SEPTEMBER-OCTOBER 2020
SHOTTED
Getting your morning coffee is now easier than before!
An intuitive responsive website for a local coffeeshop; making it convenient, and quicker for its customers to purchase coffee.
—OVERVIEW
WHAT
Shotted is a new specialty coffee shop providing unique and quality coffee drinks, sweets, pastries, and an atmosphere for its customers. It operates from a kiosk at a high end mall but are foreign from an online presence. They have been maintaining their online presence mainly through social media. While in instances where they customer cannot come at the location they heavily rely on the Yelp app or third party vendors to purchase coffee.
WHY
I know how dear my caffeine is to me first thing in the morning and I am no different than 1 billion people out there who love their early morning coffee. However, no one wants to make an extra errand of brewing fresh coffee before heading to work or worse, get late at the cost of getting stuck in long drive thru lines.
HOW
To bridge the gap between Shotted and their customers I decided to develop an official, responsive website that will make it convenient for its customers to purchase coffee and stay informed about what’s new.
PROJECT GOALS
Create an intuitive e-commerce website that catalyses the process of buying coffee for the consumer and poses as a medium to stay up to date with the developments surrounding the business.
Role — UX Designer
Tools — Figma, InVision
Duration — 4 weeks
Scope — Research, Strategy, Interaction Design, Interface Design,
—RESEARCH & ANALYZE
Glimpse of the coffee industry and competitors’ strategies to ensure an up to the mark user experience
While the market research has its own significance in the design thinking process, understanding the status quo of the competitive markets is crucial to the research phase as well. I did not want to create a design that resulted as completely irrelevant, and awry of industry standards. Therefore I studied the market trends as well as my competitors; their strengths, their shortcomings and also tried to learn about their ingenuities.
Market Research
Demographics
Competitive Analysis
Provisional Personas
All that I gathered and learnt from my research, I translated it into my provisional personas. These personas also paved a path for me by narrowing down the types of people I had to interview and empathize with - the potential user.
Interviewing for Empathy
By this point I had an idea about whom to interview to gather some qualitative data; to understand the genuine frustrations and needs of the potential user. I synthesized this qualitative data into an Empathy Map to observe patterns from the potential users’ responses.
What I learnt in the entire process of my design thinking was that the consumer chooses convenience over everything. Time is precious in this day and age and every individual intends to accomplish something in less time. Belonging to this fast paced world I was aware of this phenomenon already but my research led me to discover new things that I would have never given significance to otherwise —
User Persona
Based on my entire research, and interviews I defined a persona to serve as an overarching representation of all the potential users of the product. They all share the needs, behaviors, pain points, and motivations. Meet Emma Barnes - Shotted’s potential user.
—DEFINE & IDEATE
Brainstorming ideas and setting solid foundations
I brainstormed ideas that were to be the features in the responsive website - solutions to the user problems. With a plethora of ideas I created a Product Roadmap and sifted them based on the time and budget factor. I further prioritized them in the context of the goals they can help achieve, and their technical constraints. Before working on the product roadmap I also took into consideration the business goals along with the user goals to ascertain a balanced outcome that would favor not only the user, but the business as well.
Gist of some basic ideas
I took into consideration what can pose as solutions to all the pain points I discovered, and all the insights I peeked into after interviewing my potential user. I designed the website in a way that the user finds that one click they are looking for to expedite their way to the end, i.e, order ahead.
I also complied by the need to keep the potential user’s dietary restrictions into mind - they can customize their beverages however they like by tweaking from a detailed list of categories of ingredients on the product detail page.
Factoring in the convenience and the time of the user the website allows the user to choose their own time slot for their order pick up, informing them how much the estimated preparation time will be for their drink.
—INFORMATION ARCHITECTURE & INTERACTION DESIGN
Ensuring an effective user journey through a clean architecture
The next step was to create a structure that ensures optimal usability, label and organize the elements that will make it easy on the user during their journey from task A to B.
Sitemap
The features that I finalized based on the priority level, I then laid them out in a basic structure as a sitemap and organized and labelled the elements.
Task Flow & User Flow
Once clear about the sitemap I set out two tasks to map out the task flow and the user flow.
Task 1: Emma wants to customize her choice of milk for an online order of iced latte.
Task 2: Emma wants to place the order for iced latte for pick up.
The Task Flow let me visualize the journey of the user; what screens will they have to go past, and what actions they will take to complete the task.
While the Task Flow displayed a linear representation, the User Flow helped me to take into consideration the decisions of the user while performing the task.
Responsive Mid-Fidelity Wireframes of Product Detail Page
This helped me construct my responsive mid-fidelity wireframes so I can run some usability tests before finalizing my design.
—PROTOTYPE & USABILITY TESTING
Improving the user experience
I created a prototype on InVision based on my initial set of mid-fidelity wireframes. This was to test out a basic user task that revolved around the prominent insights I extracted from my research. The task I created for the user was to choose a designated beverage from the menu page and after making customizations add their order to the shopping cart.
Conducting the usability tests on my prototype revealed a lot of new things -
Most participants felt lost on the menu page. They claimed that the hero image on the menu page made them think they were on the landing page and they had to click on the overlay text to enter the menu.
Another participant claimed that the labelling of some of the elements on the navigation bar confused them.
In the revision of my prototype, I took these factors into consideration. My understanding is that landing pages of have the hero image, having the same on the menu page created a semblance, thus some participants felt stuck. I decreased the real estate for the image on the menu page and also altered the positioning but bring the sub page menu bar and the breadcrumbs on top. This was another moment that revised the significance of the breadcrumbs for me.
—USER INTERFACE DESIGN
From grayscale to color
LOGO
To not derail the visual elements I consciously chose to stick with the existing logo for I believed it was the perfect depiction of what the business values were and what they intended to promote. Let’s say that the logo was my guiding light towards all the other UI elements.
TYPOGRAPHY
When speaking to the business owner he informed me how his mission is to make the coffeeshop an a fun filled place; where his customers can come to enjoy, socialize and just have a joyful time altogether. I took my cue from there and evolved the branding of the business. The logo already had a curvy yet modern nature to it so I chose the typography in terms of that.
COLOR PALETTE
The color palette was also intended to be such that it gives a modern, yet a welcoming vibe. The business’s instagram page already had such colors, I enhanced the palette by adding few accents.
In the end the branding promoted the image of the business as being joyful, inventive, and contemporary.
Final Desktop Prototype
—REFLECTION & NEXT STEPS
Convenience & Efficiency
Interviewing the potential users brought to a realization that online presence for any company is becoming imperative as we sprint into this fast paced, technology oriented world. Individuals look for to major things; convenience, and less time consumption.
Competitors’ Analysis
Competitors’ Analysis led me to believe that I was not doing anything different, however I was positive that I tapped into the right problem because I did a thorough user research, and was confident about my solutions.
Technical Constraints
Not being able to work with a developer led me to shy away from a lot of things due to lack of knowledge.
Next Steps
I would love to incorporate more features that I prioritized in the second and third categories of priority level in my product roadmap.