.png)
Brief
The inspiration for Blue Mondays came after talking to a friend about our shared struggle in getting coffee from local coffee shops on our rushed commutes to school or work. Often times, due to our rush we would always opt for Starbucks- even if it wasn't always our favorite coffee in the area- due to its convenience. Blue Mondays was then conceptualized as a way to make it easy to make pick-up orders quickly from any local coffee shop.
Team
Navya Adipudi
Tools
Figma, Procreate
Timeline
v1 Nov '22- Jan '23
v2 Mar '23- Apr '23
Problem
Design a mobile ordering app that is intuitive and allows users to quickly order coffee or other items from local coffee shops while on the go.
Goals
1
Users can intuitively and quickly make purchases and schedule pick-ups.
2
Encourage users to purchase coffee from local shops more often.
3
Draw users into the app and make them want to use it frequently.
Design Process
Understand
Key Takeaways
-
There is a need in the market for an app that would expose users to local coffee shops and prompt them to order coffee from these options in lieu of larger chain coffee shops.
​
-
Users want a UI that feels familiar, quick, and easy to use.
​
-
Blue Mondays needs to feel like a one-stop app for quickly getting users' favorite coffee.
​
-
Features that Users seem to appreciate in other apps: Scanning in store, Rewards, uncomplicated homescreens and navigation.
Ideation
Paper Wireframes
Above you can see some of my paper wireframes- some ideas blocked out to get an initial feel for the layout of Blue Mondays.
Low Fidelity Prototype
Homepage
User can click on the coffee shop name to view the coffee shop menu.
User can easily see how many rewards they have gained by using the app.
LoFi Usability Testing
In order to make sure that Blue Mondays was heading in the right direction, I conducted some usability tests. My goal was to figure out what specific difficulties users encounter when they try to complete the core tasks of the app. After creating a study plan, I had 5 participants use the Blue Mondays app following the prompts I had set up for them. I had the users tell me their difficulties as they followed the prompts, as well as complete a SUS questionaire after the test.
Add to Cart seems abrupt
One of the pain points made was that the "add to cart" function did not feel intuitive and felt rather abrupt. 60% of users suggested an "add to cart" confirmation prompt before being prompted to go to the cart would be more helpful.
Coffee Shop name link does not feel intuitive
I noted during testing that 4/5 of the users did not see the name of the coffee shop as a link. The button-like background behind the coffee shop's name did not prompt them to click on the name, rather they found it easier to select the coffee shop through the "local stores near you" function.
Coffee cup instead of star for rewards
One of the users sugested using a coffee cup or another type of icon rather than a star for the rewards bar.
100% user satisfaction
In the SUS survey, 5/5 users reported that they would find it very easy and/or convenient to make a purchase using this app from a local coffee shop.
High Fidelity Prototype v1
HiFi Prototype v1 : Mockups & Iterations
High Fidelity Prototype v2
After some time, I decided to upgrade the functionality (with an increased use of components) and update the UI of Blue Mondays to better the visual experience for the user. In the current prototype version of Blue Mondays, users now have a loading/landing page, a visual indicator when adding shops/items to favorites, a visual indicator when items have been added to cart, visual indicators when navigating the navigation bar, as well as smoother visuals and updated imagery. The best way to experience these changes is with the protoype linked below, however you can also look at some of the updates in the slideshow below.
HiFi Prototype v2 : Mockups & Iterations
HiFi Prototype v2
^ Blue Mondays Prototype v2. You can click on the prototype to full-screen the window and click through the app.
HiFi Prototype Figma Link: Blue Mondays Prototype
Design System
Typography
The Font used throughout the app is Jost; A modern, sans-serif font that was adjusted to have slight letter spacing to give an added modern-minimalist look. To draw the eye to certain sections, SemiBold weight was applied.
Color
The color palette is soft, and attempts to emmulate coffee with soft beiges, contrasted with a white background, a deep purple (almost black) for the icons, and black text. To tie in the colors, and speak to it's namesake and soft blue is added as a complimentary color.
Logo
Blue Mondays is all about elegance, ease, and coffee. I knew I wanted to use a script font, but I needed to make sure it was simple, and easy to read. After selecting Oleo Script Swash Caps and making the font color a medium-blue, I chose to exphasize the logo within the design by adding in an inner shadow.
Reflection
After months of work, testing, multiple iterations, and two hi-fi versions of Blue Mondays, I can say I'm satisfied with the progress this project has made. I have learned so much from this project, and in the latest version I pushed my skills to the next level. I aimed to create a better coffee experience for users while maintaining high ease of use, and after testing and showing prospective users and industry professionals I feel that the Blue Mondays Prototype is closer than ever to what a final version of the app may look like.