Schramm Coffee Beans
Timeline: January – March 2022
Deliverables: New Mobile Site
Team: Self-directed with feedback from mentors and peers
Role: UX/UI Designer
Tools: Figma, Adobe Photoshop
Schramm Coffee Beans is a fictional startup coffee bean company whose headquarters are fictionally located in Salt Lake City, Utah. Schramm Coffee Beans does not have a website for its users to see their products.
Background:
Design a responsive prototype for a new mobile site
Focus on design styles for the mobile site
Objectives:
Step 1: Empathize
In order to strengthen my UX and UI skills, I took a course on Udemy called “Figma UX/UI.” In this course, I was tasked with creating a mobile site for a fictional startup company. The company I was given, Schramm Coffee Beans, was generated by a randomized user persona site. This site gave me the user persona and company description for Schramm Coffee Beans which I then based the rest of the project on.
“How might we design a new mobile website for a coffee bean company?”
Problem
With the user persona given to me, I began designing the mobile site. I took into consideration what styles would appeal to an older generation, as well as to someone with a busy lifestyle. I then did research on similar coffee bean sites, like Starbucks and Nespresso to get a better understanding of what their mobile site’s design style feels like.
User Persona/Research
In this course, I was given a task flow on what my main goals were for this mobile website. The task flow was to get from the homepage to the product details, then to the checkout, and finally to a confirmation page.
Task Flow
Step 2: Define/Ideate
Low Fidelity Wireframe
After researching other coffee bean sites, I began designing the low-fidelity wireframe for the mobile site. I took inspiration from Keurig’s site as I found on Statista that 32% of their overall buyers were in the age range of 32-59, and 29% were over 60. Since my fictional company’s target user is in their early 50s, this seemed like a good place to learn. Following the needs of the task flow, I designed the homepage, product details page, checkout page, and confirmation page (as seen above).
Once I finished the low fidelity wireframe, I wanted to see how well the prototype ran with my targeted user base going from the homepage to the confirmation page. In order to test this out, I gave the low-fidelity wireframe to 5 female adults above the age of 50. During each test, I noted whether or not they were easily able to get to the confirmation page. By the time they were finished, only 3 out of the 5 were fully able to get to the confirmation page while others were stuck trying to find the product details.
The Takeaway:
Make the “Learn More” button much more accessible, by possibly changing the color
Next, I came up with some key colors for the mobile site. I decided on dark brown as my main color, dark green as my secondary color, and bright yellow as my accent color. I chose dark brown as my main color because it reflects the color of coffee. I chose dark green as my secondary color because I found that many coffee sites had shades of green in them. Brown and green together give off a sense of nature, and so is beneficial for a coffee company as it makes the user feel like your products are made naturally. As for the accent color, I chose bright yellow because the other colors are quite dark and I wanted some important messages to stand out.
Styleguide
When considering the font choices I went with Raleway for the headers and Bitter for the paragraph styles. I made sure to choose font sizes that would be accessible to all, making sure the paragraph styles’ size is no smaller than 16 pts, following WCAG guidelines. I chose Raleway for the header because it is an easy font to read and is a part of the sans-serif typeface family, which tends to be more modern. I chose Bitter for the paragraph style because while researching font options I learned that Google Fonts stated that Bitter was, “designed for comfortably reading on any computer or device.” I also chose Bitter because it paired well with Raleway.
After taking into account all my research on different coffee companies, I created a mood board to prepare for the design of the high fidelity wireframe. Within this mood board, I collected images for inspiration for the user interface design. I obtained images from coffee bean companies and other coffee-related products.
Mood Board
Step 3: Prototype
High Fidelity Wireframe
Finally, after taking all of my research and testing into account I created the high fidelity wireframe for the Schramm Coffee Beans mobile site. When going through the process of designing the high-fidelity version I would show my work to my peers and they would give me valuable feedback. I included a number of those ideas within this final wireframe, and in doing so, I changed the task flow. I did this by adding an account signup page and a review page. I also added animations to the confirmation pages, which can be seen below in the prototype.
While creating this final wireframe I focused on the user by constantly testing versions of it as I went along.
Step 4: Moving Forward
After finishing this mobile site, the next step is to go back and retest the final high fidelity wireframe on my targeted users and see how well it performs. Once that is accomplished I will be able to go back and make the appropriate changes.
Throughout this process of creating a mobile website from the ground up using Figma, I was able to challenge myself and grow in my Figma skills. I was also able to learn how important it is to constantly test my designs on users throughout the whole process. I will now be able to take these skills that I have learned and use them in real-world problems.