Timeframe/tools

• Three-week Agile sprint consisting of research, wireframing, low-fidelity prototypes up to high-fidelity mockups

• Sketch

• InVision

• Zeplin

• Whimsical

• Xtensio

• Pen and paper

The goal: To translate the in-store experience online, but simplifying the shopping experience so that users can navigate the website quickly and efficiently. Instead of a chaotic and busy layout, I wanted to design an organized and intuitive website.

Final product: High-fidelity mockup of an organized, functional, and attractive e-commerce website where customers can easily find and purchase what they are looking for.

Research: I conducted user interviews and employee interviews; practiced contextual inquiry at Decade to observe how people shopped; compared similar gift stores’ websites for competitor analysis; then created personas, user flows, and a site map.

Some findings…

• While interviewing users, I found that many customers loved the store’s visual appeal in its thematic display, some calling it their favorite store. Customers said it’s a great store to browse and to get gift ideas, but conversely that it can be hard to track down specific items.

• Currently, there are no products sold through Decade’s website.

Personas: Two personas were developed based off user interviews using Xtensio. One is the more casual shopper looking to browse the site and see what products pique their interest. The other is a more focused shopper set on finding and purchasing specific items without wasting time.

User flows, site map and competitor analysis: Next, I mapped out the user flows of each respective persona to navigate through the e-commerce site using Whimsical. Creating the personas for Janice and Jillian helped to inform what each user might prioritize as well as what features were universally important. The goal was not to bombard users with unnecessary pages or information - simple and sleek is best.

Wireframing and prototyping: There were many iterations in Sketch before arriving at my final prototype. Prior to thinking about a color palette and overall aesthetic, I sketched out some ideas to highlight the most crucial information architecture of the site. I started at a lower fidelity prototype to ideate on layout organization possibilities.

Iterations: I conducted usability testing to the site’s flow and started making tweaks to the design, focusing on a more seamless and intuitive user flow for each customer. Users expressed that it could be overwhelming when there was too much information crammed into any single page.

Responsive web design: The next step was transitioning to a responsive design, starting with mobile and expanding to a desktop design. At this point, I considered the aesthetic and feel of the existing store and strived to translate that into a fluid online experience.

Transferring store brand online: Above are images of the brick-and-mortar store, giving a feel for Decade’s personality and aesthetic. I sought to translate their in-store appeal to a website that matched it, while allowing users to search for exactly what they wanted.

Responsive design lessons: Moving into the responsive design phase, I honed in on atomic design techniques to make the most essential elements of the mobile design stand out in the desktop version.

More iteration: After more user testing, I condensed content on the Product Description Page to only include the most important info. The goal was to make the process as simple for the user as possible while showing the information needed to make a purchase or bookmark for later.

Reflections: After several rounds of conducting research, sketching and wireframing, ideating and prototyping, the final mockup was designed to provide each user with an online shopping experience that was simple, easy, and as enjoyable as visiting the store itself.

My hope was that with a well-designed e-commerce site, Decade can continue to grow and expand its customer base locally and beyond. Customers who enjoy the store but find it difficult to shop in person can find their favorite products online and recommend their family and friends do the same.

With so many retail stores feeling the revenue pain of customers increasingly shopping online, it is more important than ever to have a strong website that will attract more customers to your business. For a store like Decade with a long history and dedicated customer base, merging their in-store success with an attractive, user-friendly online store can only propel their business forward in the future.

After becoming interested in design late in my college career, I worked for three years as a news page designer and copy editor for community newspapers. To be a journalist, you have to be curious and empathetic about the people and subjects you cover. To be a designer, you have to arrange information & images to assist in telling a story without distracting from it. The users, aka readers, must always be at the forefront of successful design.

A keen eye for detail lent itself well to my additional role as a copy editor for cleaning up copy, both for typographical errors and clarity. Brevity is best — especially when limited by square inches on a page. As a copy editor, I constantly learned how to convey information effectively, extracting the highlights into concise headlines and sub-headers.

In the beginning, for me, it was always about using the written word to tell stories. When you break down UX design, the words on screen are absolutely paramount in creating an effective user experience. Choosing the right words in the right place is critical to communicating a message to users. If it is not immediately clear what service a website or app provides, your potential users are already lost and lacking incentive to search for it.

My background in journalistic reporting and marketing copywriting prepared me with an invaluable skillset and ability to listen, empathize and engage with other humans to fully understand their specific story or problem, then be able to explain it to others. UX design, at its core, is about connecting with users to understand their wants, needs, and challenges in order to conscientiously design solutions to problems. That spirit of journalistic investigation and curiosity has been an incredible asset for me throughout my UX journey.

Human rights ambassador

This feature story assignment was a profile of a woman who helped found a human rights commission at a local university. I spent several hours at her home interviewing her about her passions and her lifetime breadth of work in addition to conducting my own research into her background history. I then synthesized all of this information into a feature narrative to tell her story.

Weaving a story

Talking to, empathizing with and understanding people is one of my biggest passions and part of why I enjoyed interviewing and reporting so much. There is so much to be learned by listening to and observing other people to gain insight into their behavior and motives.

female-owned business

I met with and interviewed a local small business owner and learned what prompted her to open a women’s clothing store, Textiles, after graduating from college. Although her store was well known in the downtown business district, I found that not many knew her own story and motivation to offer products impossible to find in other local stores.

telling a life’s story

I find interviewing people to be incredibly enjoyable and enriching. The fun is in learning about a person’s unique journey and compiling all of the most pertinent details in a way that can be easily understood by readers. Writing and studying human stories will always be one of my favorite parts of my work.

connecting with the reader

I love the ability to connect with readers (or users) by writing in a conversational, user-friendly voice. Communicating with your audience in a way that makes a story relatable and helps them feel a connection with the subject is gratifying and makes the world feel a little bit smaller and friendlier.

The challenge: Design a user-friendly concept app where Amazon’s Subscribe and Save customers can easily shop for products and organize purchases to see effective cost savings.

The business: While Amazon is ubiquitous, not many users were aware of the Subscribe and Save feature or knew how to use it.

The team: I worked with a team of two other members to conduct user research and iterate on interface design approaches.

My role: I wrote interview questions and conducted interviews and affinity mapping, designed initial UI patterns and owned the assets of user flows, journey maps, and problem and solution statements.

Tools/timeframe

• Two-week Agile sprint working with team to carry out research phase and design an efficient app with simple UI.

• Sketch

• InVision

• Whimsical

• Google Suite

• Pen and paper

• Design studio

• iOS HIG design

Interviews: Next, as a team we interviewed both current and prospective Subscribe and Save users (7 total) to identify any problems and goals associated with their online shopping experiences, as well as to indicate whether a new budgeting tool would be useful.

What were the findings? Several themes emerged from our interview responses, including:

• Users enjoy the ease and convenience of online shopping.

• Users like to comparison shop for specific items to confirm whether they are getting a “good deal.”

• Users who purchase recurring items online want the ability to “set it and forget it” until delivery arrives.

Any pain points? Despite the general ease of online shopping, some users encountered issues with Amazon’s system, such as:

• Lack of transparency about price changes and inability to easily compare pricing.

• It’s unclear on Amazon’s current interface what qualifies as a “Subscribe and Save” item or not.

• Many day-to-day items are not needed in monthly quantities; end up buying too much stuff.

Takeaways: The main user goals and pain points became clearer after grouping responses thematically by affinity mapping.

• Users want to save time and money by shopping online, and they want a way to track and budget for purchases.

Developing research assets: After compiling our team’s research findings, we started to develop assets to guide our design decisions. I took ownership of the problem and solution statements as well as the user flows and journey map for our user personas. My teammate Martha Asselin created the persona visual below, and we collectively created the persona traits.

Solution statement: The Amazon Subscribe and Save app will allow users to track their monthly spending on recurring purchases, break down how much money they are spending in each category, compare spending from month to month, and enable users to compare different brand pricing. The app gives users confidence and satisfaction that they are aware of their monthly spending habits and have control over changes when necessary, offering notifications to help users stay on track.

A user journey map: I created a journey map in Sketch illustrating the emotional arc of a user finding products and completing a purchase on Amazon’s current website, highlighting pain points and areas for improvement. The color palette used is made up of Amazon’s official style guide of colors.

What next? How do you take all of this research and incorporate it into a better design? Keeping our user needs and goals in mind, to kick off the second week our team held a design studio to quickly sketch out various ideas we had for interface design onto paper.

Wireframe iterations: All three of our team members started to create wireframes in Sketch to design our ideas, before coming together and deciding on one wireframe to move forward, integrating other design features into that.

Featured below: My Sketch wireframes and prototypes are displayed here, showing my design ideas and what I contributed that made it into our final designs.

Key feature: Although we used my teammate Isaac Kazin’s Sketch wireframes to complete our final mockup phases, a couple of my design iterations were used as key UX design features. I created a “Swap” button after a product is selected so that a user can easily compare similar products to one another and decide whether to swap out products saving on cost or other factors.

Interface design mockups: Moving our Agile design phase forward, we worked as a team to collaborate on feature elements, visuals and microcopy to accomplish our users’ goals. Below is a higher-fidelity mockup showing how we incorporated the “swap” feature using iOS HIG design standards.

Budgeting tools: Our users expressed a strong desire to save time and money while online shopping. As such, setting monthly or annual budgets to track how much money was being spent on Amazon purchases was a major design goal. We ideated on possible ways to monitor and track budgets, landing on a couple of different screens to see how and where a user is spending money.

Cleaning it up: Another user complaint we discovered upon testing Amazon’s current site is that pages are cluttered with too much information, too many distractions. Our team sought to de-clutter our Product Description Pages and Subscription app screens with only the most important product information.

How much to buy for savings? One of the ways subscribers can save money through Amazon’s Subscribe and Save program is to sign up for five monthly items to get a 15% savings. However, that stipulation was not clear to some users. We added a tracking bar to visualize more clearly how users can get the 15% total discount.

Results: Based on our research findings, our team set out to design an app that would accomplish the goal of saving users time and money while shopping via Amazon’s Subscribe and Save. Users could be confident they were staying on budget and were in control of monthly spending by using our app. Many users said they loved the convenience of online shopping but find the lack of transparency and inability to track expenses to be frustrating. Every design decision we made kept those user goals and pain points in mind to create a simpler and more satisfying online shopping experience.

Future changes, iterations: As with any Agile design strategy, our further usability testing and feedback illuminated more changes we could make to the app going forward, such as changing the direction of tracking bar arrows (shown in the screen above) to indicate progress towards five selected products earning a discount. We would also be more conscious about integrating Amazon’s color scheme into our style guide to maintain brand consistency. We would add more detail and variability to the budget tracking screens.

Overall goal met: All in all, though, we created a concept app that successfully addressed many of the current issues with Amazon Subscribe and Save and would keep happy customers coming back.

The challenge: Redesign website for local Denver nonprofit to better tell their story and engage a newer, wider donor base.

The organization: Third Way Center houses, rehabilitates, and educates young adults in need of alternative resources to address mental and emotional health struggles.

The team: I worked with four team members to complete the project, including Colin Tackett, Katie Schmuhl, Patrick Keating, and Katie Davidson.

My role: I owned all of the UX writing for the redesign and conducted all user research along with Katie Schmuhl.

Tools/Timeframe

• This redesign started as a pro-bono project with a local organization and turned into into a 6-month, paid freelance contract to launch the new site.

• Sketch

• InVision

• Miro

• WordPress page builder

• Google Forms survey

• Design studio

• Whiteboarding

Problem statement: Third Way Center’s previous website was cluttered with irrelevant, outdated information that failed to attract and compel new donors.

The goal: Restructure and redesign the website in a concise and compelling way that tells Third Way Center’s powerful story and expands their donor demographic, strengthening the nonprofit’s longevity well into the future.

Research discovery phase: Implementing a survey to gain insight on the targeted demographic — millennial young professionals — was critical to understanding what would drive someone to give their time and money to a nonprofit like Third Way Center. I wrote questions along with my teammate Katie Schmuhl and distributed it to our respective networks, capping the survey after receiving 60+ responses.

Findings: The survey was hugely successful in uncovering giving habits and motivators from our respondents.

• Contrary to public perception, our survey revealed that millennials are highly incentivized to donate time and money to causes that they care about, with 83.6 percent donating to a nonprofit in the past year.

• Of those who donated, 72.5 percent said that they primarily made donations online rather than in person or via phone or mail.

Research conclusions: In addition to the survey, my team members and I conducted in-person interviews with millennials about their giving habits and motivators. The interviews validated a lot of the survey results, confirming that many millennials are enthusiastic to donate money when they understand how the funds will positively impact causes that they care about.

Translating research into design: One of our biggest design goals was to break out Third Way Center’s standout statistics and facts into bite-sized chunks, paired with iconography and images. While the old site had plenty of information, it wasn’t getting traction because there were too many words and not enough visual appeal. You can’t effectively tell a story if you can’t drown out the background noise.

clearing the clutter

Compared to the old site, we wanted to hone in on the nonprofit’s core mission and values, and draw people in by telling the story visually with the right amount of words.

Information architecture: Another important consideration of the user’s experience in website navigation is where & how information is structured. In our first design phase, we focused on the five most essential pages to rebuild first: the home page, ‘What We Do,’ ‘About Us,’ ‘Treatment’ and ‘Get Involved.’ With the findings of our research in mind - that young professionals are motivated to support local nonprofits if they understand whom and what they support - we sought to better tell Third Way Center’s story.

Streamlining navigation: The old site was cluttered with dropdown menus featuring dozens of page links; usability testing found that many users were unsure how to find what they were looking for and had a feeling of overwhelm trying to figure out the navigation. Beyond that, the carousel on the home page was distracting and disorienting. Users could not even tell what exactly this nonprofit organization did or whom exactly they helped.

Instead of long paragraphs, I kept the copy clean and tight, paired with hero images & iconography created by my team member Colin Tackett. Scannable, small chunks of copy = more likely to be read and understood by users, our testing found.

Teamwork makes the dream work: In all, our team completed the redesign and launched the new site live after six months, completing several phases and iterations (all in addition to working full-time jobs). It was an incredible opportunity to work together on a freelance project with a nonprofit doing meaningful work, just needing a digital boost for sustained future support.

The UX redesign effort accomplished our client’s goals of streamlining website navigation, telling their story succinctly, and increasing engagement with their targeted user demographic. I feel proud of the robust website we created for a nonprofit with such an incredible impact.

New opportunity and challenge: Create a place for patients to sign up for on-demand telehealth visits addressing specific health needs.

The timinG

In early 2020 as the COVID-19 virus spread throughout the world and across the U.S., it became increasingly apparent that not only was telehealth urgently needed as an alternative way of delivering health care to slow the virus’ spread, but it would also become a primary way for patients to schedule doctor’s visits of all types well into the future.

Around this time in March, I had discussions with product managers whom I worked closely with as well as with company leadership to advocate for creating a new telehealth/virtual visit feature, which was not only relevant, but had the potential to be life-saving. It was a rare opportunity to help serve a very real and practical societal need with innovative technology.

Project scope

The original concept of this new Healthgrades feature was to create a “Virtual Clinic” as an intermediary site between prospective patients and partnering websites, which would host the telehealth visits and handle payments. Our goal was to present users with enough relevant information about specialties/treatments available as well as price differences and estimated wait times amongst the variety of partner options in order for users to make educated choices before starting a virtual visit.

The biggest challenge in solving this UX problem was creating mocks for the developers to build - determining what information to display to users - while having no idea which of the following data points might be provided or consistently available from each partnering vendor:

• Pricing: Do partners only provide flat, one-time payments, or do they accept insurance plans like traditional offices?

• Specialty areas: Which medical specialties will be available to patients and what treatments do they typically offer? How do we present this info to users in laymen’s terms?

• Location: Must patients be physically located in the state in which they reside to start a virtual visit?

• Availability: How many providers are readily available at any given time, and what is the average wait time for patients to start a visit?

• Hours: Are providers open for business 24/7 or only at certain hours?

These questions were just a starting point to consider before creating a smooth, seamless virtual experience that would meet both user and partnering client expectations. I took a stab at guessing the likely answers to these questions, designing mocks which could be quickly implemented once my company’s sales teams got telehealth contracts to be signed by partnering clients.

User testing: I set up a clickable prototype in Figma to test a user flow in which a potential visitor to Healthgrades’ telehealth clinic enters the website after exploring Google search results. I then created an unmoderated remote usability test on UserTesting.com to get user feedback on the search flow and designs. The testing found that most potential users were familiar with the concept of virtual or telehealth doctor’s visits and found the designs to be fairly straightforward and easy to navigate.

Some key themes to emerge from user testing were that determining the cost of a visit and whether their insurance would be accepted were highly important, and if there are many search results, having a way to sort or filter them would be ideal.

Assessing user feedback: After launching an unmoderated usability test on 10 users, I watched the recordings and took notes and clips of key insights. I shared out a few of these clips with my cross-functional team of developers and product managers also working on this feature (using the Slack integration on UserTesting.com).

Applying insights, adding UX features: As Healthgrades hopes to add an increasing number of partnering clients with added variety and complexity, I implemented some user feedback to give users the ability to sort search results by various criteria like cost or specialty, using a dropdown menu. This iteration will hopefully improve usability and will be added in a future sprint.

UI upgrade and copy tweaks: In an effort to improve the visual appeal and consistency of the designs, I coordinated with Healthgrades’ branding team of graphic designers to create a set of iconography for the specialty cards. My goal was to reduce cognitive load for users in identifying medical specialty areas. I also clarified some of the written content once we got more information from our partnering clients hosting the telehealth visits.

Going live: After contracts were signed and there were two partnering clients ready to go live, our development team deployed our first release of the feature. We went live to production with the Telehealth Resource Center in October 2020 and have already facilitated thousands of telehealth visits.

The company’s legal department determined that “resource center” was a more accurate label than “virtual clinic” so as not to suggest that Healthgrades itself is hosting appointments.

When the Resource Center launched, I got more design feedback from internal stakeholders. This prompted me to set up a design workshop session with my boss, an experienced UX designer, so that we could revisit the designs and revamp them for increased visual appeal as well as improved usability. The timing of this workshop also coincided with a company-wide update to our corporate color palette, allowing me the opportunity to infuse new colors into the design mocks as well.

Copy updates, restructured layout: I got input from Healthgrades’ editorial team to revise written content on the Telehealth landing page and rethink the layout of the page. I wanted to add more hierarchy to make the page quickly scannable and add treatment details to the specialty cards, providing users with more information to focus on the specialty that would best meet their health needs.

Data mapping: While updating designs, I met with one of our company’s data scientists to evaluate our range of treatments and specialties to ensure the accuracy of medical terminology. I worked with him and my team’s product manager to revise our list of treatment areas verifying that terminology and grouping of treatments are both medically accurate and user friendly, simple enough for users to understand.

New imagery: I again reached out to the branding team to get updated graphics and sleeker imagery to accompany the newer designs - the teal circles on the right mock above show intended placement of new and improved images.

What’s next?

As I continue to iterate and refine mocks for phase 2.0 of the Telehealth Resource Center, I’ll conduct more usability testing to validate or disqualify any changes for future implementation. While initial partner contracts were only signed for an experimental trial period through December 2020, the immediate success of this project has ensured that telehealth at Healthgrades will continue into the next year and beyond.

In addition to user research, I met weekly with product managers and a data analytics team to follow tracking and conversion related to all aspects of the resource center and determine areas for improvement. The data and user feedback will continue to guide the direction of the Resource Center, with more links to resources to be added as well.

While the future ahead is uncertain as ever navigating uncharted territory with a global pandemic, I am proud of taking advantage of an opportunity to quickly adapt and create a digital resource addressing real and immediate health care needs. Patients can meet safely with providers from the comfort of their homes to get diagnoses, prescriptions, and questions answered using tools that my team and I created.

This project represents the power of technology to innovate and truly transform the way that human beings interact with the world and solve real problems.

Timeframe & Tools

• Project kicked off in March 2022 with discovery testing, and final designs went live in July 2022.

• Figma (design, competitive analysis, research documentation, prototyping, handoff)

• UserTesting.com

• CrazyEgg

• Miro

• Jira

The company: DAT, shorthand for “Dial A Truck,” is the largest freight matching load board in North America, connecting millions of brokers, shippers, and carriers daily to find partners shipping freight across the continent, 365 days a year.

The business proposal: Primary goals were twofold: 1) There was a business need to migrate legacy databases off the CSB, which hosted aging engineering architecture. 2) Customer-facing representatives were forced to spend too much time cross-referencing data while meeting with customers. Consolidating data into one internal platform would save DAT’s reps and customers both valuable time.

My role: Lead researcher and designer, starting with discovery work to understand existing user flows and needs, ending with high-fidelity new designs and protoypes for dev implementation.

The users: DAT’s internal, customer-facing teams, including:

• Enterprise Sales

• Customer Success

• Customer Support

• Compliance

Timeframe and tools

• Project kicked off in January 2024, and went live in August 2024.

• Figma

• LucidChart

• Jira

• Legacy tools including DAT Rep, Project Usage Dashboard, and CSR Pages

Discovery phase: What are the problems?

The problems with the existing platforms were plentiful. There were more than half a dozen different tools being utilized across various teams, with sometimes conflicting customer info. DAT employees spent extra time cross-referencing at least four different legacy products as well as Salesforce, Tableau, and BI tools.

When interacting directly with customers, time = money, and minimizing total time spent for reps reviewing customer data and reducing minutes spent on the phone with customers saves the business money, as well as mitigates customer time, effort, and potential frustration.

The legacy databases, including CSR (or Customer Support Rep) pages, Product Usage Dashboard, and DAT Rep all contained some overlapping customer information, making it cumbersome for internal support, compliance, and sales reps to quickly find necessary information and serve customers with ease.

All of the tools offered different layouts and information architecture, so this added to the “context switching” each internal employee was needing to spend time adjusting to throughout the day.

I conducted multiple workshops and interviews with four key internal DAT teams actively utilizing these databases to understand their usage and workflows, respective pros and cons to using each tool, and created journey maps to get a better holistic understanding and paint a picture of their user experience.

I included my partners in product management, UX research, and engineering in these sessions to bring them along in the journey and capture their knowledge and perspectives.

One of the biggest design challenges was to come up with an elegant, streamlined final solution that would minimize effort for all internal teams with different needs and priorities, valuing different information.

• Instead of maintaining three internal customer databases, we decided to combine all three into one tool.

• Eliminate the need to maintain legacy products and aging engineering architecture, reducing latency issues.

  • Considering all existing tools, DAT Rep provided the best infrastructure to build off of as the base tool, with the most up-to-date, branded interface and best engineering architecture.

• Add data visualization and more intuitive interface navigation into DAT Rep for better usability and less scrolling.

Early design stage wireframing: I transported high-level sketch ideas for a new design solution into low-fidelity wireframes conveying a new concept for bringing transaction and usage charts from the Product Usage Dashboard into a holistic dashboard on DAT Rep. Added functionality included searching directly for transactions on this dashboard at either an account or individual user level.

User feedback: Since the users of these tools were internal DAT employees, I regularly touched base with our four primary stakeholder teams to review design progress and to gauge how effectively the new designs might be meeting their needs. As part of these iterative improvements, I made adjustments to the search filter options and dropdowns based on their usage needs, balanced with development feasibility to launch an MVP build by end of Q3.

Final solution and results for MVP: The development team was able to build out the MVP version of the new and improved DAT Rep experience ahead of schedule, launching in August 2024. This release was met with a positive reception by the impacted stakeholders, expressing gratitude for an improved day-to-day workflow experience.

The new version accomplished the original project goals of:

• Cleaning up the company’s database architecture and migrating off the CSB, a critical business engineering deadline and goal for 2024.

• Reducing the amount of different tools required to reference on a daily basis, as well as context switching.

• Streamlining the tool’s interface, implementing existing design patterns and componentization across all DAT platforms for better ease of use.

• Adding data visualization and functionality into DAT Rep, creating more of a “one-stop shop” for representatives to access each day.