Introduction
This mobile app encompassed my whole course project with Careerfoundry. I was able to create an app from inspiration to exposition following the design thinking framework.
MY ROLE
UX Designer
UX Researcher
SKILLS
Wireframing
A/B Testing
Prototyping
Design Thinking
Information Architecture
TOOLS
InVision
Adobe XD
Usability Hub
DURATION
6 months
Overview
Coffeine is a subscription and learning app targeted towards coffee enthusiasts from beginner to expert.
Project & Context
This was a course project of my own choosing for the UX Immersion segment of the Careerfoundry program. I was able to simultaneously dive into UX techniques and implement them in a hands on product from research to design to presentation.
Objective
By learning and using the Design Thinking process, I aimed to identify the type of users, their current pain points and needs for a coffee subscription app.
While putting my newly gained UX skills to work I was able to identify the gap in the market of coffee subscription apps.
Inspiration | Understand & Observe
Define the Problem
Purpose
Goal
- This step was my initial phase of discovering the problem space and the challenge ahead.
- Try to predict the possible problems within the coffee subscription market and solutions that could be created with the app.
Possible Problems
- The quizzes that are offered to be taken by the potential subscriber now are good on the preliminary front but there doesn't seem to be a follow-up quiz post coffee selection consumption to tailor the next selected coffee even more for the subscriber. This engages the potential that people’s palettes may change over time.
- The information about the coffees and origins are very limited and broad. For those who don’t know much about coffee or want to learn more, there is a cap to what they can access through current coffee subscription platforms.
- There isn’t enough variety or inclusion spread across various subscription sites. A lot of them have overlap and repeat the same featured roasters.
Potential Solutions
- Creating a mobile app for a coffee subscription service presents an avenue for more immediate accessibility when on-the-go especially if coffee shoppers are interacting with friends in-person or via text and want to save a recommended coffee roaster and not have to wait to download a website via desktop or on mobile phone.
- Formulate a quiz not just for the initial subscription but follow-up quizzes and questions that probe the coffee shopper to examine and reflect on their experience and what they have tried and point them towards roasts and information that can help them see the big picture. This is a solution to the fact that people’s palettes can change and mature over time.
- An app that allows coffee enthusiasts to dive deeper into the origins of coffee from bean to their cup. Resources that are offered on the platform are interactive and cross referenced from notable coffee experts and crowdsourced from other users that have also interacted on the app (i.e., reviews). These will be broken down into guides that are free and accessible within the app for the user before, during, or after their initial subscription experience. The interface will be immersive and organized in such a way that is easy to navigate.
- To include newer and niche roasters, comprehensive research can be done on the current micro roaster market. New companies can be discovered through blogs and YouTube videos. Prove that a platform like this subscription service can be beneficial and cost-effective for these small businesses to get recognition in the coffee community.
Problem Statement
Our coffee subscribers need a way to learn more about the coffee that they are purchasing because they wish to not only taste new coffees but also know more about them. We will know this to be true when we see how many coffee shoppers are using our app to discover new coffees in their consecutive subscription cycles.
Competitive Analysis
Purpose
Goal
- This step was essential to understanding the current landscape of subscription services in the coffee industry.
- The research I did helped me to understand the gaps and pain points in coffee subscriptions already on the market.
Skills & Tools:
- Research, Compare/Contrast, SWOT Profile
Learnings
- I was able to analyze 2 companies: Angels' Cup & MistoBox
- Key takeaways: neither of these companies had mobile apps, each had at least one unique feature like a coffee curator or blind coffee tasting for a more personalized experience for each user.
- This part was tedious so I broke it down into increments in order to extract all of the data about current competitors and used the SWOT profile method to categorize information.
- There is an opening of possibility for an app that will be the next step in what a coffee subscription service can offer.
- It can be all encompassing and a resource. The key will be to center the app around a tailored user experience that includes both ease of use and features that will aid in the in-depth exploration of coffee for novices to experts.
- As I analyzed the research I was able to decide a best path forward in what I would address in my own app and how to craft my user interviews.
User Interviews & Research Analysis
Purpose
Goal
- After I identified my research goals, the types of users I would interview and created a script of questions, I dove into the interview phase.
- This step gave me an opportunity to interact with real life people who drink coffee and have purchased coffee beans.
Learnings
- It was important to choose the right participants, according to my previous research and project brief, to gain fundamental insights on the nuances of users to identify their personal experiences and pain points.
- The responses I received were reviewed and divided into: behaviors/attitudes, frustrations, goals/needs and quotes/facts.
- Affinity mapping helped to group the responses so the findings could turn into insights which then resulted in potential solutions.
- You can see my groupings in the images below:
- I was able to gain insights about how users consume and purchase coffee and how they go about notating, learning and finding new recommendations for coffee.
- Grouping the responses was initially overwhelming but taking the time to synthesize the information in order to communicate the broad ideas to a team is an essential skill to have.
- The extracted insights and solutions helped me in the next step to create the user stories.
User Stories (Hypotheses)
Purpose
Goal
- The initial hypotheses I created helped to map out the features of the app to be designed.
- I was able to see into the perspective of users to continue into the context in which they will operate these features to achieve their goals within the app.
‣
Learnings
- By creating these user stories, I was able to see the types of solutions that needed to be addressed in order to plan my future work accordingly.
- User stories bode well with task planning for teams that work according to Agile or Lean methodologies to break down the work into chunks.
- While keeping future tasks in mind it was important to not forget the granularity of certain stories and that they could even be broken down into more nuanced hypotheses to help teams manage better the work that needs to be done.
- It was a challenge to touch on every feature to be made but it was important to remember the business needs as well as the app requirements and what features could be used to achieve ROI for both sides.
- At the end of this stage, I was able to look at all the hypotheses and decide on the initial features I would elaborate on to then design and test.
Conceptualization | POV & Ideate
User Personas & Journeys
Purpose
Goal
- The personas were a vital foundation for the rest of the project and translating them into their journeys fleshed out the steps and emotions that users would go through to complete tasks within the app.
- I was able to use my skills of storytelling and connect empathetically with these personas to see their progress through the app and exactly what they needed to complete tasks.
Learnings
- A challenge in this step was trying to distinctly differentiate the two personas; I understand now that this step is very essential and will take me more practice to create personas that not only have their own stories but also addresses their needs and desires.
- The user journeys fleshed out scenarios for each persona and followed them through each phase.
- This helped to connect with the personas at an empathetic level, spending a moment in their shoes.
- This is a step that I know I want to master because this helps to solidify not only to designers on a team but also to developers how the needs of the users can be infused into journeys that connect back to the business needs of the company.
User Flows
Purpose
Goal
- This visualized the exact steps that the personas would take to complete scenarios within the app.
- The goal here was to create a chronological task list from the hypotheses aka, user stories to identify the entry point and the success criteria at the end of completing the tasks.
Learnings
- The challenge was the attempt to correctly navigate through the features so that users could find what they needed to achieve the success criteria.
- It took time to create pathways that had the least amount of resistance for users and gave them intuitive directions to what they wanted to accomplish.
- I decided to focus on two out of three user flows I created, to start with essential features for when I entered the iteration phase so I would not be overwhelmed by designing the wireframes.
Card Sorting & Site Maps
Purpose
Goal
- Conducting card sorting was essential to creating a baseline of categories and information architecture for the site map.
- The goal here was to translate the results of the card sort into the initial site map that I had created after the user flows.
- Make changes accordingly for a better navigational structure for the app overall.
Skills & Tools
- Design Information Architecture principle and frameworks, Optimal Workshop
Learnings
- As the familiar elements laid out easily, the challenge was organizing the unique features of the app.
- I extracted a lot of perspective from those that participated in the card sort like similar groupings of sub-items and categories that I had not anticipated and that is evident in the new site map that I created.
- According to my learnings about cognitive psychology, specifically mental load, I used that as the final deciding factor to create the easiest/direct path to complete tasks before continuing into the iteration phase.
Iteration | Prototype & Test
Low & Mid-Fidelity Wireframes
Purpose
Goal
- Create the general landscape of the app according to the user flows and site map and prepare screens for the testing phase.
- Low-fidelity: Transition the initial user flows into the first round of tangible designs on paper.
- Mid-fidelity: Digital grayscale wireframes for eventual testing to limit distractions while participants walk through the app.
Skills & Tools
- Paper, pen, Adobe XD
Learnings
- The paper sketches were easy to create but translating them into mid-fidelity wireframes brought up challenges because of the learning curve of using Adobe XD for the first time.
- I was able to better my skills in Adobe XD by using tutorials and articles to aid the creation of the iterations in this phase.
- I made a definite decision to keep my design and aesthetic simple in order to focus on fulfilling the needs of the users to keep the user flows in focus.
Usability & A/B Testing
Purpose
Goal
- Usability testing was essential to gain insights about the actual usability of the app to make sure users were able to accomplish tasks that were established in the test plan.
- The goal of usability testing was to observe and measure the user’s ability to understand the purpose and the value of the app indicated by the ease of accomplishing the tasks.
- A/B Testing was great tool to test out screens side-by-side, one being a control and the second screen being a variation of the control screen to see what users prefer.
- A/B testing was used to provide feedback for minor screen changes like CTA placement, to optimize usability.
Skills and Tools
- Interviewing, compiling & reporting results, test script writing, UsabilityHub, rainbow spreadsheet
Learnings
- When I was creating my usability test plan, I decided to use moderated remote and in-person usability tests in order to work with the participants in real time if they ran into any issues while trying to complete the tasks that I made in the test script.
- Even with participants that first appeared timid during the interviews, I was able to help them open up with phrases or questions that helped them explore their own thoughts.
- I made sure to plan ahead accordingly with troubleshooting questions to bring out their honest reactions and guide them through confusion without leading them.
‣
- I made changes to the mid-fidelity wireframes from the issues that the participants shared through what I observed, their quotes and errors that were made and consolidated the information using the rainbow spreadsheet method.
- I made the decision to focus on five issues during this phase of testing and presented the changes and screens with evidence and reasons in a usability test report.
- The issues consisted of important changes to make coach marks more readily available, clarifying the sitemap and make CTAs more clearly identifiable.
- A/B Testing was conducted for the onboarding screens.
- Although the results were not statistically significant (54% for the variation design versus 46% for the control design), due to a small number of participants (13); I learned how to properly conduct these tests and still gained usable feedback from the users.
Feedback for the CONTROL design:
"This version has more breathing space and still the back and next are visible without being an actual button."
"It feels more comfortable to the eyes"
Feedback for the VARIATION design:
"Among all the scattered text, these buttons stand out better than links. I like knowing the area where I have to tap"
"Buttons make it easier to determine steps"
- I decided to move forward with the VARIATION version of the onboarding screen from this round of A/B Testing because I saw value in the reasoning that I got from the feedback.
Design Language & Style Guide
- The creation of these documents punctuated the finalization of design specs for the eventual hand-off to developers.
- This was good practice in how to clearly communicate and clarify my design choices and communicate it to a developer.
- Streamlining the CTAs and buttons was a challenge but I was able to solve that problem by researching appropriate button sizes and understanding how to better create and use components in Adobe XD.
High-Fidelity Wireframe and Clickable Prototype
Peer Feedback
- There were some additional changes made after collaborative feedback from peers in my program.
- I changed sizes of icons and buttons.
- Added options to share content on social channels.
- Redesigned the whole layout of the onboarding pages.
Accessibility Guidelines
- I explored WCAG accessibility guidelines and made changes accordingly.
- I found that the main green color I was using was not an ideal contrast ratio for those who have visual impairments.
- I plan to add captioning options to video playback within the app.
- Form field labels were added so users could still identify what to type.
High-fidelity Wireframes
View my clickable prototype below:
Final Results
Conclusions
I have learned that the process matters just as much as the design.
- I was able to create a simple app to highlight features that I found that users would be engaging with.
- The wireframes that I have in my current high-fidelity version accomplishes what I set out in my initial hypotheses and user flows.
- I was able to gain great perspective about creating an app that users actually wanted to use because of how they already consume coffee everyday and how an app like this can easily be integrated into their daily life.
Connecting the personas to the business needs was a balancing act
- I was challenged by the creation of personas because the whole project counted on creating definitive foundations for who, how and why this product would be created.
- It is important to refer back to the business needs and the user personas when conducting tests and creating new iterations in order to connect the features back to the needs of customers and the functional requirements of the business.
- The investment of time into newer features like the notebook and video tutorials, added to the user experience.
- Users would want to continually use this subscription service to order coffee and also document their journey for a more enriching experience that would bring return value to the business.
Future Steps
In a second iteration I want to focus on:
Incorporating the quiz and checkout flows. I will do this by referring back to the site map and creating user flows for these features. By adding these user flows, users will be able to experience the subscription process from beginning to the end.
It would be ideal to find the right placement for the favorites list. A/B testing can be conducted for the placement of the favorites button. This will help to create a smoother user flow of saving coffees to favorites moving them to the cart and then purchasing the products. I want to find the best way to make this flow as direct and accessible as possible.
I would also like to work on more of my design skills:
I will expand my knowledge of Figma and Adobe XD in order to apply those skills to future projects.
I am continuing my next step of coursework in UI to further expand my knowledge on the aesthetic design process.