Atmos Coffee Shop is a start-up recently opened in Chicago. Their goal is to create an environment, an atmosphere, where people can come, meet others and strengthen their relationships with the community. Coffee for Atmos is much less of a product, it's a tool to inspire connection.
To further help the community, Atmos wants to integrate a social mission into their business. By providing career workshops and skill building opportunities in-store, their goal is to help black and brown students in the area gain access to opportunities. However, the current design of their website, on both mobile and desktop, was that it was uninformative and inefficient.
The challenge here was to create a responsive design that would allow people to order coffee, learn about the social mission and apply for to their skill-building opportunity, a Barista training program. It needed to be seamless with the in-store experience and reflect values of community, growth and racial equality. Furthermore, it needed to be flexible and buildable so that Atmos had enough freedom to add more information as their ideas became viable.
Time Frame: 3 Weeks
My Role: UX Researcher & Designer
Team: 2
To start I, I like to meditate first...
I like to spend time prior to each project thinking about my own assumptions. It gives me the ability to locate where I am, think about why I'm here and then compartmentalize with an open-mind. This mindset helps me approach each project with a flexible mind that's willing to learn.
Some initial assumptions were...
Before beginning, I also like to discuss biases as a team
This helped us figure out what preconceived notions we held about about the business and how that may affect our expectations for the project. After listing prominent assumptions, we analyzed what hypotheses we were either subconsciously or explicitly drawing. After sifting these out, we were able to approach the project with an open-mind understanding what biases we held that may impact any research conducted as a team.
To start the research off, I investigated the market
I began the research figuring out the viability behind Atmos' vision which was to sell high quality coffee while supporting the Black and Brown community. I knew I needed to determine who was drinking coffee, how much they were willing to spend and where these people were located. In addition, we needed to learn if the goal of the social mission, which is to provide career building resources to the Black and Brown community, was supported by data.
Then I contextualized the data
Atmos, which attracts 20-50 year olds and is located in Chicago, clearly had a sustainable target market. However, this poll completed by Gallup didn't separate coffee consumption with coffee purchases so I searched for how much money Americans spent on coffee.
- a whopping $1,100 annually-
And examined the data behind the social mission
I wanted to make sure that the concept behind Atmos' social mission actually worked. It was important to find data that supported this so that what we designed was actually effective.
I looked at research completed by the World Bank which had data based in populations which specifically provided career building resources to young adults. The data showed that these economies were growing, saw an increased standard of living and a decreased unemployment rate.
However, since this data was completed within an international context, I wanted to make sure that there was similar data found within America. It turns out that Fresno, California and Philadelphia, Pennsylvania held workshops for their youth and saw parallel effects.
To build off of this, we used surveys
To gain further insight into coffee consumption, we sent out surveys asking coffee consumers to talk about their motivations behind purchasing coffee, where they often drank coffee, who they drank coffee with and how many cups they typically drank.
_____________
Responses: 27
And conducted interviews
We also interviewed Atmos' customers to learn about their experiences, their relationship with the owner, their interpretation of Atmos' values and whether or not they saw a prominent social mission.
___________
Responses: 4
Average time: 15:15
After we affinity mapped
And then held contextual inquiries
We held contextual inquiries on Atmos' mobile website as well as 2 competitors with similar social missions. Our goal was to figure out how user's flowed through it, what they struggled to find and what was frustrating with the whole process. Atmos' website was fairly basic so we used these contextual inquiries as potential pain points to stay aware of.
Finally, we determined the core pain points
Although Atmos had a vision to help Black and Brown communities, there was no information on the website.The website itself was hard to move through making any information that was available hard to access. In addition, people noted that environment on the website was starkly different from the atmosphere they were experiencing in store.
And then reexamined our biases
This was interesting because some ideas were correct yet their corresponding concept was not. While our first bias was spot on, we didn't actually end up differentiating the design since we needed it to be responsive. The second bias and its respective hypothesis was correct as proven by the previous pain points. Albeit, the 3rd hypothesis was correct, because the website was missing key pieces of information, the bias that formed this hypothesis needed further research. It wasn't clear from the interviews that people were missing the disconnect and since the social mission wasn't displayed on the website, the contextual inquiries didn't provide enough evidence to support this bias. Similarly, both the the 4th bias and the 4th hypotheses needed further research since we didn't end up researching the effect of covid-19 on Atmos' social mission.
After understanding our data, we represented it in context
Although this helped us too, this phase was really completed with the client in mind. We really wanted to blend his target market with our data and therefore created a persona that contextualized this. Our persona bridged our data set with his customers by fitting into his demographic but reflecting the quantitative and qualitative data we found from our research.
To complement the persona, we also made a journey map
The journey map we created visualized for our client the discrepancy between what customers were expecting to find from his website and what their actual experiences were. When used tangentially with the persona, our client was able to grasp a much better concept of what user's were feeling and why.
We also got the client involved with how might we statements
We held a meeting where we presented the data and collaborated with the client on how might we statements. By doing this, we were able to get him involved in the process and understand the mindset with which we were all working in. This also helped us pinpoint specific features we needed like an "about us" page and an "events" page. We also knew we needed to change the UI so it better reflected the brand and add in a page that showcased Atmos' social mission.
To begin this stage, we started with lo-fidelity wireflows
This was a great way to implement our how might we statements. We collaborated on specific features we were each envisioning and compromised in areas we had disagreements on. For instance, we weren't sure how many components should be in the navigation and decided on 2 down from a proposed 3.
We also knew that a mobile website wouldn't be enough for users so we dedicated time to building out similar flows for the desktop.
We then tested and iterated our designs
Testing out our lo-fidelity led to a couple key changes. We needed to fix the flow in the Barista training program by clarifying language and changing the progress bar, add in prices in the product description and build out our community events page more. We also realized that there was a lot of scrolling on the menu page, which our research from the contextual inquiries pointed out was a pain point for users - so- we constructed a drop down menu.
Due to time constraints, we were only able to test on mobile but after working out the kinks on mobile, we then adjusted the desktop accordingly.
After all this time, we were excited to deliver a hi-fidelity prototype we knew the client would love
And our responsive design as a desktop
Some next steps for the team
We would've loved to put more time into creating responsive designs but could only get so far into the desktop. Ideally the desktop would be prototyped out more and have some more frames. In addition, we weren't able to interview any students to get a better idea of Atmos' social mission. I would loved to spend some time talking to students asking them potential questions like what they needed and why, what their dreams were and what impediments they saw impacting those dreams and why. I also would like to update the events page further putting in links to other small businesses in the community.
The Challenge...
There was one main challenge we encountered as a team
Atmos was a start-up
As an entrepreneurship major, I was familiar with the start-up industry and the flexibility it requires. Therefore, it was imperative that the team hold a flexible mindset to be able to adjust with the volatility of the industry. We held each other accountable when we were getting frustrated with our expectations not being met and made sure to prepare for iterations. In addition, we started off hosting weekly meetings with our client where we asked specific questions and talked about what we would need from him. After the meeting was finished, we'd be sure to send reminders of what we talked about and other types of notes we had taken. Most importantly though, we relied heavily on outside research. The founder's ideas were still being formed so we took his premise and researched data on the concept looking for competitors which held a similar social mission. In addition, we did a fair amount of research on the founders to get a better grasp of their story. I took care to notice trends in the language they were using in 3rd party interviews. This helped me grasp a better idea of their social mission despite it not being fully formed.