Although Jaunt Coffee Roasters has a 5-star rating across Yelp and Facebook, the shop does not have something that is typical of most businesses: A website. While they are a local favorite, they do not have a large online presence. Thus, they are now looking to setting up a dedicated responsive website in order to retain their customers and reach out to prospective ones who are looking them up online.
How can we make a responsive website that is user friendly for Jaunt's current and potential customers, while also highlighting their business model, story, and purpose?
From user research, I defined the following needs that users had when it came to coffee shops.
While the general public see fancy and beautiful coffee drinks across Instagram stories, Yelp pages, and Google reviews, ultimately they are just pictures that don't say more than "hey look, a pretty drink!". Consumers that buy these drinks (and the non-pretty ones) are interested in knowing more about said drink beyond just the final product, from the ingredients used to the brewing process. This is because they value well-brewed coffee.
Consumers no longer go to coffee shops just to drink coffee: The shop space is used for reading, studying, meeting with friends, interviews, and so on. Thus, users that are looking into a specific coffee shop need to have information that define the physical space, so that they can decide on if the space is suitable for varying situations.
A positive interaction between the baristas and consumers can make one's experience drastically improved, as founded by my interviews. By being able to transfer this into the digital space, Jaunt's website can fulfill the users' need to have, continue, and/or start that positive interaction.
Using my research to empathize with users, Jaunt's website features could kill two birds with one stone by both catering to user's needs and showcasing what makes Jaunt so special as a business.
Jaunt Coffee Roasters is a local and independently-owned café in the "Beeramar" neighborhood in San Diego. They pride themselves on sourcing their coffee to ensure their customers are getting quality and ethical drinks.
While they do have a social media presence, they are otherwise not accessible online, meaning they are losing out on reaching a larger audience.
Disclaimer: This is a speculative project. I am not affiliated with Jaunt.
I explored how to best design Jaunt's responsive website in order to make it user friendly, while also highlighting their business model, story, and purpose.
Team
Role
Duration
Tools
Self-directed, with feedback given from mentor and peers
UI/UX Designer
4 weeks
July - August 2019
Figma
Invision
01. Research & Analysis
02. Ideate & Define
03. Interaction Design
04. Usability Testing
05. UI Design
Researched the current market and potential users
Created problem spaces and determined how to resolve them
Mapped user's journey and began designing
Evaluated viability of product's features through testing and feedback
Created and implemented brand identity
Purpose: Scoping out the current market and potential users
Process: Market Research, Competitive Analysis, Provisional Personas, User Interviews, Empathy Map Insights & Needs, Persona
As a non-coffee drinker, I knew little about coffee consumption and shops. Researching more about coffee consumption, shop attendance, and demographics gave me a better understanding of Jaunt's target audience and coffee trends.
Terminology:
Gourmet Coffee: Espresso-based beverages, blended drinks, or cold brew
Traditional Coffee: Coffee not brewed from premium whole bean or ground varieties
Past-day/week: Consumed coffee within the last day/week prior to time of survey
When and where (luckily not how, as I am familiar enough with how coffee is consumed)? These were the questions I asked when it came to understanding coffee consumption.
Reported to consume coffee during breakfast
Are more likely to prefer locally/independently-owned shops
Is more likely amongst consumers under the age of 35
Given that coffee shops are preferred in consumers (and is the subject matter of my end product), I looked into what made these shops such a coveted place.
“ 'Coffee has everything millennials love: status, experience and personalization.' ”
Gabrielle Bosche in The Washington Post's "Look how much coffee millennials are drinking" Article
Coffee Quality is the biggest reason, according to 25% of surveyed consumers
Imagine this: A hip, Instagrammable coffee shop where high school and college students go to work. Sounds familiar?
That's because younger consumers are driving the gourmet coffee (which is typically sold in shops) consumption growth due to exposure at a younger age and coffee being more socially acceptable.
The percentage of gourmet to traditional coffee drinkers
The highest age groups that drank coffee past-day are 18-24 (39%) and 25-39 (50%)
Which is the reason behind why 50.8% of surveyed men drink coffee
This is compared to 32.8% of women who drink coffee to relax
Since Jaunt doesn't have a website set up, analyzing competitors to uncover standard industry practices would help guide design decisions and what Jaunt could offer on their website.
Direct competitors were local & chain coffee shops, while indirect competitors were companies that weren't primarily coffee shops but offered drinks in some form.
To hypothesize a target audience and determine what potential user goals and pain points, I created provisional personas based on the market research findings.
In order to get direct feedback from Jaunt's clientele, I interviewed five participants in person during a visit to Jaunt.
To get a full understanding of in-person and online experiences with Jaunt, as well as their experiences with coffee shops in general, I asked the interviewees open-ended questions.
“ It’s all shiny! Like, they really do a fantastic job, they always take good care of me. ”
Participant #2, Micha, when asked about a positive experience at Jaunt
“ Definitely the pictures, since that is what made me want to try this place. ”
Participant #3, Rachel, when asked about a positive online experience with Jaunt
To organize my interview findings, I created an empathy map to list out all the talking points.
By finding recurring patterns from my empathy map, I could identify user insights. I then considered what needs would have to be met in order to get to that insight.
To make user-centric decisions, I created a persona named "Claire". Taking data from my empathy map and interview observations, I continued to give more context to a potential user.
Purpose: Create actionable problem spaces, ideate solutions, and map out new features
Process: POV + HMW Statements, Brainstorming, Feature Prioritization, Site Map
Now that a target user was defined, I crafted POV and HMW statements. Framing the POV statements helped me understand the reason behind user needs from the mindset of Claire, while HMW statements could encourage solutions to meet her needs.
Brainstorming on how to resolve the HMW statements provided a pool of potential solutions.
Utilizing the brainstormed ideas, I picked out the most feasible and impactful solutions to each HMW statements, now framed into goals for Jaunt's website to accomplish.
I created a site map to ensure the proper pages were being built to meet user needs. The features and pages were determined by referring back to my product map and competitive analysis sites.
Purpose: Understand user's journey through website
Process: User Flow, Task Flow, Mid-Fidelity Wireframes
I mapped out three user flows (derived from Claire's needs, which were specified to clarify the flow) to help me understand what effective UI would look like when going through the site.
Next, I laid out the steps that it would take for a user to complete three tasks, each derived from the scenarios in the user flow. This helped me understand a user's process more in depth by assuming each page would be built in a manner to prompt completion of each task.
Now that I had the tools to start designing, I drew out sketches using pen and paper, using previous deliverables and existing design patterns from coffee shop websites to guide me.
After sketching, I gathered feedback on what to improve upon from peers. Using Figma, I built out the wireframes for all the pages, then built out responsive versions for three of the pages.
When choosing which pages to design responsively, I wanted to ensure that complex UI elements (such as the pictorial representation) could translate across different devices.
Purpose: Test the viability of implemented features through usability and feedback
Process: Usability Tasks, Affinity Map, Priority Revisions
In order to gain feedback on the functionality of Jaunt's features, I created an InVision prototype to test with participants. Testing a mid-fidelity version would keep participants focused on the usability of the site, rather than the visual design.
I conducted moderated, think-out-loud usability testing at another local coffee shop. I recruited a total of six participants, as by that number, recurring patterns were emerging.
Using the task flows, persona, and product roadmap, six tasks were created in order to uncover any user pain points or successes with site navigation.
To organize my test findings, I synthesized my data into an affinity map to visualize successes and patterns and comments from users.
Based on the difficulties that participants had with my design and their comments, I found insights. I could then determine how to improve my design, then prioritized these decisions based on the amount of impact they would have.
Using my recommendations, I updated my mid-fidelity wireframes to ensure they could alleviate any user pain points from testing.
Purpose: Create a brand identity and apply it create a high fidelity prototype
Process: Mood Board, Style Guide, UI Kit, High Fidelity Prototype, High Fidelity Responsive Wireframes
After gathering inspiration from a mood board, I built Jaunt's new brand identity, aligning it to stay true to its brand attributes. Jaunt's new logo called back to its original logo that had a plant with berries, while being updated to be unassuming and simplistic.
Prior to building the high fidelity wireframes, I created a UI kit to determine what elements I needed to create. Doing this prior to creating the wireframes helped me adapt the elements to Jaunt's brand identity so I could rapidly build the website.
I applied the branding and styles created from the style tile and UI kit into the mid-fidelity wireframes to create a finalized high fidelity prototype for Jaunt. Using this prototype, I could convey what Jaunt's website redesign would look like.
To ensure the branding style worked well responsively, I designed tablet and mobile wireframes.
The biggest takeaway from this project was ensuring to utilize research to guide product decisions, all the way through final iteration of the website. Many of my decisions were built from findings determined in the early stages of the project, which supports the outcome that Jaunt's website is a research-focused and user-centric product.
Build Out the High-Fidelity Responsive Pages
Since the intention is to make a fully responsive website, I would build out all the pages in high-fidelity and different viewports to maintain the visual design.
Assist in the Website Launch
As the website's final iteration is ready to be launched, I would ensure that the UI elements are translated as the engineers build the website to be fully operational.
