What is the Source Coffee Co application?
Source Coffee Co is a mobile application platform focused on a budding community of coffee lovers. Here they can add Specialty Cafés and Roasters for their own logs in addition to sharing reviews and helpful tidbits for other members of the community. Source allows users to create a coffee log of the cafés you've visited in order to form a sort of coffee diary similar to check-ins on Facebook or Swarm's check-ins function. They hope to create a community where users can see local coffee shops and what they serve and also allow users to learn about coffee roasters and the beans that they offer.
The Challenge
Source functions on the premise that its users will be going about their day outside and hitting up a café along the way but thanks to the pandemic things aren't really working that way. Due to Covid-19, the various lockdowns, and the prevalence of social distancing; I was tasked with aiding Source in adding new flows that would allow the community to still be active and adding new logs despite the world coming to a near halt.
My client was straight forward in the request of wanting work done on one flow in particular to allow users to add a coffee type to a Roaster's Profile Page. I had a timeline of about 1 week in order to deliver the designs and accompanying files.
Research
I began by conducting research into other mobile applications that allowed users to add destinations to lists and aggregate them into lists of favorites/categories. I wanted to understand some of the commonly used design patterns used in these products so that when I focus on Source's solution I could apply similar concepts. This speaks to Familiarity Bias in users as they have a bias towards things that they're already familiar with.
My working hypothesis here was that most well designed digital products utilize Progressive Disclosure or the breaking up steps in order to ease the burden on the users. If too much is asked of the users then they will abandon the process due to feelings of being overwhelmed or the actions being too complicated.
From examining Yelp, Google Maps, & Apple Maps I saw that chunking out the steps through the process of Progress Disclosure was an industry standard in application flows similar to what I was working on. I also noticed that both products, while different, approached the flow in a similar way which had me considering familiarity bias.
I also noticed that Google Maps in particular used icons in each section which helps recognition of the required information. These icons were conventional and easy to understand which helped to make this process more a bit more enjoyable.
Figuring out the User Flow
User flows are crucial to evaluating the process the users will go through when performing a task in your product. I utilized a user flow diagram to help plan out what pages would be displayed to the end users. Using this diagram aided me in considering the order of the information I would be asking users to input as well informing me on certain aspects of the design that would need to be present like the ability to cancel the flow all together should someone not feel like completing it right now.
The goal here was to map out the task so that when I jumped into the rough drafts I could focus on experience instead of worrying about what information goes where and not knowing what the process is.
Add to this Roaster Version 1.0
I want to preface the next few sections of this case study. Due to a very short sprint time, lack of resources, and the fact that Covid-19 was still very much hitting hard; I was not able to gather as much research and testing as I would've wanted. Designing without research is quite difficult and given more time and resources I would have loved to conduct user surveys and more user interviews however at the time it was not an option.
Due to the timeline being tight and the fact that my client already had a quasi-design system with some components available, I felt I could brainstorm and put together a version of the flow which is what can be seen below!
When initiated from the Roaster page, the user will see a blank template where they can begin adding information about this specific roast they have in mind. I included common options under each subsection in order to provide the user some of the information and make it an easy selection process
