Seven Seas Roasting Co.

Role UX Design, UX Research,
Visual Design

Tool Figma

Timeline January - March 2025

Seven Seas Roasting Co. is a coffee roastery established in 2017 with various cafes around southern california. Over a 10-week long period, we worked with the founder, Eric something, to redesign Seven Seas Roasting’s website with the goal of drawing in customers and highlighting their provided services.

Our Goals

To learn more about the company and Eric’s goals for the website, my team and I met with him and identified his top priorities:

The website should emphasize their coffee quality
Update the website’s navigation to create more logical flow for first-time users
Highlight services that currently have less traction, primary focusing on their wholesale and subscription services
Create a more visually engaging site incorporating more more videos & images
Showcase the uniqueness of coffee shop locations and farmers’ market booths
Ensure a maritime branding on the new website to reflect their physical locations

View Creative Brief

Research

Learning about our target audience

In this stage, we conducted user interviews with 10 people, 7 of whom were customers at Seven Seas Roasting Co., and 4 who were at other coffee shops. Our goal for the interviews were to get a better sense of the target audience’s needs and expectations.

Research Findings

From our interviewees, we found that they go to cafes for 1 of these 3 reasons:

Quality

Coffee quality is better than that of other coffee shops

Study Spot

Often people need to find out what amenities a location has to offer (free wifi, seating, etc.)

Taste testing

Prefer to browse menus online before making a decision on which coffee shop to visit.

View interview document

Personas

From the insights we gathered through interviews, we were able to categorize them into three distinct groups, which we developed into our personas.

❮ ❯

Based on these personas, we created user scenarios and user cases tailored to the Seven Seas website. Ultimately, we translated our findings into a functionality and features table, ensuring that the website captured features that aligned with both user needs and the client’s specific requests. Creating this table provided our team with a guideline to follow as we moved on to the next stages of our design.

Features and Functionality Table:

Features	Client	Personas
Subscription + wholesale system	☑	Coffee enthusiast
Ratings and review system		Coffee enthusiast, Academic weapon, Taste tester
Online menu	☑	Academic weapon, Taste tester
Coffee bean comparisons		Coffee enthusiast
Updated coffee images + descriptions	☑	Coffee enthusiast
Emphasize the quality of coffee	☑	Coffee enthusiast, Academic weapon
More engaging content	☑	Taste tester
Showcase the uniqueness of coffee shop locations	☑	Academic weapon, Taste tester
Information on the interior of each location	☑	Academic weapon, Taste tester
Shares the backstory and sourcing of Seven Seas Roasting	☑	Coffee enthusiast
Sharing Seven Seas' impact on the community	☑	Coffee enthusiast
Strong branding	☑	Taste tester
Filter coffee selection		Coffee enthusiast, Taste tester
View the ingredients in each menu item		Coffee enthusiast, Taste tester
Reflect atmosphere + branding of storefront on website	☑	Coffee enthusiast, Taste tester, Academic weapon

Competitive audit

We then conducted a competitive anaylsis with the goal to learn more of design choices of competing coffee brands. We chose these competitors because (1) our stakeholders mentioned a few of these examples as the ideal site design (Onyx/Verve), and (2) the others are popular local specialty coffee roasters with great website designs and content.

For each competitor, we conducted an in-depth analysis of their branding, functionality, content, and navigation. Ultimately, we synthesized our findings into a list of takeaways that we could implement on our website.

ONYX Coffee Lab

Onyx Coffee Lab presents a darker and grungy vibe which is close to Seven Seas branding. Their website provided customers with ample information on cafe amenities, at home brewing instructions, and coffee blends. However, we found some pages contained an overwhelming amount of information and animation.

Bird Rock Coffee Roasters

Bird Rock Coffee conveys a warm and beachy atmosphere with their website. They highlight all of their coffee offerings and services with fun imagery and bubbly visual design. However, the branding lacks a coffee centric design which was something our client valued.

Verve Coffee

Verve Coffee has a modern and earthy vibe with its color schemes being muted color scheme and beige background. Their website includes many features to assist users in picking the correct coffee blend and subscription frequency.

Blue Bottle Coffee

Blue Bottle Coffee’s website showcases the coffee subscription and best sellers with minimalistic images and icons. Similar to other competitors, it provided features to order ahead and at home brewing instructions.

Lofty Coffee

Lofty Coffee’s website focuses on their locally roasted coffee beans and products over aesthetics. Their website is minimally styled, which makes it lack in terms of illustrating the atmosphere and branding of Lofty.

Good design ideas we took away from our analysis:

Showcase each cafe location in detail by providing images, cafe amenities, menus
Include a coffee calculator to help users determine the frequency of their coffee subscription
Streamline primary labels so that secondary labels are less repetitive and easier to find
Add wholesale and subscriptions to the main navigation bar for easy access

View competitive analysis

Branding

Upon further communication with the client, we established that the new website should keep the current color scheme (red and black as primary colors) but give off a stronger maritime theme.

We created 3 different mood boards and potential style directions based on each moodboard. Each style direction aimed to link/connect/reflect Seven Seas physical products or locations.

Moodboard 1

Style direction based on moodboard 1

Moodboard 2

Style direction based on moodboard 2

Moodboard 3

Style direction based on moodboard 3

Based on our client's preferences, we landed on direction 2 and put together a style guide.

Style guide

Wireframing

Since we were creating a mobile-first website, we designed a low resolution mobile prototype for the primary screens based on our researching findings. The new layout we had in mind worked well and felt more intuitive than the original.

Low-fidelity screens of the primary navigation pages

Site architecture

Our client expressed concern that Seven Seas Coffee's existing website has a bad overall flow. To address this issue, we examined the site architecture of our competitors, creating a comprehensive table with all the menu and sub-menu items that are included within their site's navigation.

❮ ❯

We then tested our wireframe and iterated upon our navigation menu. Ultimately, using this table and the low-fidelity prototype as reference, we determined all the necessary pages needed in our website and organized it into a new sitemap.

New sitemap

Prototyping

After finalizing our new sitemap, we began creating our high fidelity prototype.

First we created important components such as navigation menus, button states, and product carousels and organized them together for easy access.

Stickersheet of components

We then were able to efficiently design our initial high fidelity prototype of all the screens and functionalities we planned to include. We incorporated features based on our initial interviews and our client's goals.

Our key functionalities

❮ ❯

Usability testing

Peer Feedback

To test our prototype, we first held a critique session with other designers to discuss the visual design details and overall user flow. Through the critique, we decided to make changes to:

Quantity adjustment buttons
Desktop navigation padding and alignment
Add cart preview
Fix scroll behavior on prototype settings
Desktop title card for all pages

User testing

Then, we conducted a final user testing session on two users that we could fit within the timeline of the project, asking that they perform some of the important tasks on our website. Here's what we learned:

Users found it difficult to find where to access the “Subscription Calculator."
Easy to overlook the “Order Ahead” button on top of the menu page when scrolling down
Going back to previous pages were not easy, which made navigation difficult.

Iterations

To improve user's purchasing experience, we decided to add a cart preview feature to give users the option to see what is in their cart before leaving their current page.

Cart Preview

We decided to add a view more button to inform users that there is more on the page and it is scrollable.

Landing page

To help users find the Subscription Calculator, we added another entry point that draws attention to the feature.

New entry point

After using the
Subscription Calculator

To help users easily access the Order Now button, we added a static “Order Ahead” button on the menu page where users can access this button anytime on the page.

LocationMenu

Final Product

Hover over each page to view our final product!

Homepage

Product page

Indiviual location page

Subscription page

About page

View final product

Project Reflection

Next Steps

Moving forward, we provided our client with all of our design assets and files, as well as an estimate for development time and cost based on our online research on various freelancing websites. Hopefully, we get to see our vision for Seven Seas Roasting Co. come true on their live site in the near future.

Takeaways

Over the course of 10-weeks, I was able to learn a lot since it was my first time working directly with a client to produce a product that could be used. Despite the tight timeline, my team and I were able to create a product we're truly proud of, and I gained a great deal of insight throughout the process.

Communicating with clients and recieving timely feedback can be difficult, especially if we are given a limited time frame.
It is useful to piggyback on other apps to improve our design
Listening to our target audience during prototype testing gave us a clearer understanding of their needs which helped us refine the user experience and determine what our design really needed to succeed.
Critique sessions from other designers gave us fresh perspectives on our work and helped us uncover blind spots in our design.

Website redesign aimed to draw in customers and highlighting provided services