Alchemist Trading Co.

I went through market research to develop three common demographical types to get an overview of our target audience, which will help us define what we do and don’t know about our users.

In order to empathize with our audience and hear their experiences, I conducted seven in-person one-on-one interviews with patrons of ATC in the shop’s space. A series of open-ended questions were asked in order to allow participants to share their stories and experiences with online and in-person coffee shops.

Participants

• 7 participants: 4 female, 3 male

• Ages 17-34yrs

• Patrons of Alchemist Trading Co.

• Frequent coffee shop visitors

• Avg interview time: 19 min.

From the user interview transcript notes, I began synthesizing the interview research by creating an empathy map. By grouping similarly themed observations together, I was able to uncover key insights, which led to the discovery of our users’ needs.

User Personas

To help define our users’ problem, I took insights and needs from the empathy map to form point-of-view problem statements, then constructed them into ‘How might we…?’ questions in order to spark the brainstorming process for solution-based ideation.

To ideate on the problem solutions of the HMW questions, I did a timed mind mapping exercise. I brainstormed any and all solutions that came to mind for two 3-minute rounds for each question.

To better define the project goals and create a reference point through the design process, I constructed a Venn diagram to outline the business goals (from the perspective of the ATC owner), the user goals (from our user personas), and the shared goals between them.

I created a UI requirements document to define and outline the necessary UI elements for each page in order for the user to achieve their main goals. I referred to the project goals, product roadmap and sitemap to gather these elements.

To identify the main flow and possible challenges a user may have when achieving a task, I created a task flow chart. Then I created a user flow chart to identify multiple user paths and tasks throughout the product.

I then started sketching the key screens of the site to create the layout, navigation, and structure for each page. I referenced my sitemap, UI requirements document, and product roadmap to make sure the necessary elements were included on each page.

From my sketches, I created mid-fidelity wireframes to organize and nail down the layout for each page to prepare for prototyping and testing as well as the future UI design. After all desktop versions were complete, I created the corresponding mobile and tablet screens.

From my desktop wireframes, I created a prototype in InVision in order to make the wireframes interactive for usability testing.

I conducted usability testing on the mid-fidelity prototype for the Alchemist Trading Co. website. During my visits to two local coffee shops, I approached patrons with an offer of a free beverage or pastry in exchange for their time to test a potential website. I informed them of the process of testing, then observed and took notes as they interacted with the site to complete the specified tasks I presented to them.

Participants

• 5 participants: 4 female, 1 male

• Ages 18-39yrs

• Coffee shop patrons

• Avg. session time: 17 minutes

View the full test plan here.

Summary

Users thought the site was simple, easy to navigate, and user-friendly. The main areas of disruption centered around users not being able to find items or information and wanting more specific information when it came to products and events.

After testing I created an affinity map to synthesize user testing results for updates to the wireframes. This allowed me to discover insights related to the prototype and its’ users. From these insights, I was able to come up with the highest priority recommended solutions for the challenges users faced when interacting with the prototype.

After creating the recommendations, I implemented the three highest-priority solutions into the wireframes.

Recommendation 1: I removed the matcha tea drink from the coffee menu. It will go in the upcoming design of the tea menu. 

Recommendation 2: I added information about their drink sizing in the page description to stand out from the rest of the text so users can easily spot it. 

Recommendation 3: I added more information regarding times, prices, and details to the event calendar and event details page

In order to generate ideas for the UI style of the brand, I first created a mood board on Pinterest to highlight the visual representations of the brand’s attributes. I also redesigned ATC’s logo to be more scalable and visually distinguishable, while keeping the same brand tone and style. Finally, I referenced the mood board to create a style tile that defines the main UI design elements of the brand.

Building from the style tile, I made a UI kit to create a reference document with all the essential UI elements and components for future design building. This kit was continually expanded as the design of the high-fidelity wireframes was constructed.

Working off of my updated mid-fidelity wireframes, I implemented the necessary UI elements to create the high-fidelity wireframes. From those wireframes, I created the high-fidelity version of the desktop prototype.

Upon looking back through the design process of this project, there are certain things I believe were successful and some that did not go as expected. I feel we were successful in clearly defining our target users and understanding their needs and goals. However, I would have preferred to extend the usability testing process, in order to test with more users, which would have garnered more well-rounded and definitive insights for recommended improvements. Moving forward, I will allow myself the proper resources and time to test with as many users as necessary.

After completion of the high-fidelity prototype, the remaining pages of the site (i.e. contact page, food menu, FAQs, etc) need to be wireframed and prototyped, as well as the remaining responsive screens. Then, further testing of those pages will need to be done, followed by recommended updates. Finally, redlining will be done to complete the handoff to developers.