Designing a Responsive Website for Area Coffee
-
Student Project – User Research, UI Design, Visual Design, Brand design.
-
Responsive Website
-
4 Weeks | 80 Hours
-
Figma, FigJam, Photoshop, Illustrator, Zoom, Discord.
Background
Area Coffee is the passion project of Katie and Ricardo Arias. Based in Upstate New York both founders currently work in the hospitality and food industry, and began roasting roasting coffee beans in 2021 from their home. The project is still relatively new and evolving, they are a very small business and currently have no functioning website. They rely on instagram as a platform to tell their story, and promote their product.
Talking to the founders I wanted to understand their vision for the company and its positioning in the market s they saw it. We decided that the main function of their website would be to sell product, and convey their mission statement, brand storytelling, and to keep the public informed of events and releases. Their goal for the future is to have the capacity to fulfill subscription and wholesale orders. For now the website will focus on e-commerce, but its good to know that this expansion is a possibility.
Before beginning the project, we reviewed their existing brand collateral. The hallmarks of their existing branding were the logo based on an old aviation company, and the color red. I realized that to tell a compelling story and have enough content for a website we would need to overhaul the assets and create some exciting packaging options as well as a wider ranging palette.
The name Area and some of the visuals were taken from from an Ecuadorian airline that Ricardo’s grandfather operated in the 1960’s. This is at the core of the companies storytelling, the retro aviation aesthetic was rich with imagery and inspiration for color and graphics. Using this as the jumping off point I created a brand palette, graphics, logos, packaging.
Design Process
-
![]()
1. EMPATHIZE
Competitive Analysis
Customer survey
Founder Interviews
-
![]()
2. DEFINE
Interview Synthesis
Persona Creation
Brand Tone & vision
-
![]()
3. IDEATE
Sketch
Architecture
Low Fidelity Wires
-
![]()
4. PROTOTYPE
Brand Style Guide
High Fi Mockups
Final Prototype
-
![]()
5. TEST
Usability Testing
Feedback Synthesis
Iterate
Founder Interviews, key takeaways
Before I began the project I interviewed the founders of Area at length about the functions the website design needed to perform, and how they see their product placement in the market. Several actionable takeaways helped form the core narratives and hierarchy of the website.
“ We would love to be able to offer coffee subscriptions one day, to begin with it would be a local operation, but as the business grows we see it as an important component”
I would have to make sure I allocated a page for the coffee subscriptions. Area prioritize sustainably sourced beans from micro growers, and the artisanal blends they curate, and this is a central to the brands vision and .
“The Ethiopian bean lends intense flavors of nectarine, peach skin, herbal rue and orange marmalade. The Colombian bean has notes of molasses sugars, hints of dried raisin and apple, hazelnut laced chocolate, and aromatic almond oil”
I would need to make sure that the narrative of the landing page captured these details, as a small batch roaster this level of attention is what sets them apart from the bigger roasters. Other than roasting beans to sell by the bag, they also have a weekend coffee service pop up.
“We are So happy to be at brunette wine bar serving coffee on the weekends, and it’s important that we have that information on the website”
After getting a good idea of the key business pillars, I compared Area’s market positioning by running a SWOT competitor analysis, based on the competitors the founders had suggested.
Competitor Analysis
One of the first challenges I faced was the sheer volume of coffee companies and brands on the market today, with a wide range of product quality, ethics and target audiences. To select the right competitors, I went back to the founders mission statement to better understand what values lay at the core of Area.
Sustainability, sourcing independent growers & small batch process.
Keeping these values in mind I selected some big box companies, but also cross referenced with some smaller local coffee roasters to understand how they present themselves online, and how they communicate their product. I compared product features, E-Commerce patterns, site architecture, branding, and the overarching storytelling that each of the brands adotped.
5 coffee companies selected for comparison
Partners Coffee A medium sized Brooklyn based retailer and roaster of coffee.
Big Mouth A small local roasting company, with very limited distribution.
Heavy Feather Roasters A small and local coffee roaster and distributer.
Stumptown A very large coffee roaster sold internationally in supermarkets and cafes.
Farfetched A small local coffee roasting company.
Before doing the competitor research my assumption was that the smaller brands wouldn’t have very sophisticated websites or deep architecture. I also predicted that the coffee packaging and graphic design would be a key driver of the UI aesthetic. Both predictions were correct overall, and informed how I would go on to develop Area’s site. Below the table shows a swot style comparison.
Key Takeaways
Smaller brands had very simplistic websites with few features whilst the larger brands had deeper website architecture.
The more established brands offered useful insights into storytelling and user journeys for subscription commerce. They used graphics and color for impact, and bold messaging to keep the user engaged.
A minimal graphic approach was a commonality, prioritizing the product and brand visuals. Content was grouped observing Gestalt principles, and utilizing white space for impact.
Most brands used high contrast, and beautiful rich full bleed photography to anchor key messaging & content within a section.
Across all brands the user journeys were very simple, prompting the user to purchase items, or sign up for subscriptions.
The smaller brands placed a large emphasis on sustainability messaging, and ethical sourcing.
Customer Survey Key Takeaways
DEMOGRAPHIC FINDINGS
The demographic skewed younger with 75% of people aged 30 and under. The remaining 25% ranged from 35-60 years old.
25% of participants were visiting for the weekend from New York City.
The remainder were a mix of ‘transplants’ who had relocated from nearby New York City and people who were originally from the area.
DESIGN NEEDS
Due to the median age of the audience, I needed to ensure the tone of the brand, and its online presence had a vibrant and youthful feel.
Storytelling needed speak to a certain level of luxury given that customer base has some disposable income and in general a high taste level.
Additionally the product needed to reflect a more cosmopolitan vibe.
PREFERRED BRAND OF COFFEE (RANKED BY MOST POPULAR)
Stumptown
Blue Bottle
Partners Coffee
Irving Farm Coffee
Illy
DESIGN NEEDS
Creating a familiar user experience for Area customers to the brands they already shopped would be essential in retaining .
Reviewing the websites revealed that they aligned well with the competitor analysis I had done.
Takeaways were to keep the site architecture simple, the branding and visual design clean, bold, and focused.
CONTENT HIERARCHY
Origin
Flavor Notes
Roast Date
Grower
Price
DESIGN NEEDS
This information informed the hierarchy of the product description.
Origin story and ethical background of the product was most important, customers wanted to support fair trade and sustainability.
Price and subscription information had to be prominent wherever product is featured.
Area Customer Survey
Personas
Information Architecture
Site Map Architecture
The Area website only needed a very basic structure, it was evident that the user journeys would be very short. The main priority of the website is to get people to complete 1 or more of the following actions.
To make a purchase from the online store
To sign up for a bean subscription.
To follow socials.
To advertise the weekend coffee service.
To learn more about the product and company.
The pages needed to accomplish these tasks- Homepage, About Us, Subscriptions, Contact Us, and an online shop.
User Task Flows
After mapping out the site architecture I worked out a few task flows and user journeys to understand what pages would be needed and how they would interact with each other.
Low Fidelity Wireframes
It really helped to map out the content blocks of each page in low fidelity first, and then sense check by dropping each into the mobile device size, before getting too committed to a design. I found that thinking ahead and anticipating the re-size kept the design user friendly and ultimately would reduce a lot of re-working to transfer to the mobile size.
Wireframe sketches
I used this sketching exercise to play with copy, and style. Having focused on layout with the Low fidelity screens, I wanted to ensure that the UI aesthetic would feel cohesive and make sense. Having designed the product packaging and logos, sketching a more holistic view gave me confidence that the website would have the playful feel that I was aiming for.
Brand Book
Taking cues from the vintage aviation theme, I created a mood board, color palette, logos, packaging, and brand guide. I felt that rounded corners, and a retro palette would help ground the visuals in the vintage feel I was trying to create. Embracing the bright red for bold impact and pairing with some off whites, browns and a soft pink gave it a modern twist, the result feels unique and stands out.
High Fidelity Mock-Ups
The final product began coming to life designing the high fidelity frames, seeing the UI take shape was very satisfying. Having been very thorough with the branding preparation and low fidelity screens, things came together relatively easily.
Responsive Website Prototype
I designed and tested the prototype for the Macbook Air (1280 x 832 px) and chose to make the design responsive for the iphone 13 Pro Max. The blocks of content transferred with relative ease to the smaller viewport. I abbreviated headings, and omitted wavy text treatments, and background noise (like the loose beans) to keep the UI simpler and less crowded.
Click anywhere in the video below to view the prototype.
Usability Testing
6 people completed usability tests for both the Desktop, and mobile versions of the product. I recorded the tests via zoom screen sharing. All participants were asked to explore the website, and I asked them to complete 2 different tasks. All participants completed the tasks easily, and found all possible routes to add product to cart, check out, and sign up for a subscriptions. Below shows the before and after of areas that caused friction during the tests.
1. Subscription Sign up Iteration
BEFORE
During testing, 3 out of 6 people hesitated when asked how to sign up for a bean subscription.
2 people had some confusion around how to select quantities of bags.
3 People suggested that having clearer messaging about the price savings would likely encourage them to buy a subscription over a single bag.
AFTER
I added a box below the delivery cadence drop down that stated how many bags were being assigned per subscription.
I added the ability to edit the quantity in this new box vs in the cart where it was previously located.
I edited the subscription price copy to reflect the savings with a focus on the different prices..
2. Hero Section Simplification
BEFORE
During testing some participants mentioned how busy the hero section was.
2 people felt that the image in the background was too distracting.
The mobile version had a full bleed hero section to the edge of the screen, 2 participants expressed a preference for that treatment.
AFTER
I edited the hero background photograph to omit the bag of beans.
I removed the small batch coffee subheading, and instead added it to the ‘specialty roasts’ section subheading directly below.
I made the header adaptive to the hero section image for a more contemporary and less cluttered appearance.
3. Shopping Cart UI Edits
BEFORE
During testing, there was some ambiguity about the subscription purchase UI in the shopping cart.
3 people found the wording confusing, and wanted to be able to edit quantities of bags in this window.
4 people wanted to know how they would continue shopping if they wanted to add more to cart.
AFTER
I edited the UI copy to reflect with more precision the subscription cadence and quantities.
I also made sure that it was clear in the price that it would be a weekly occurence.
I added a ‘continue shopping’ link that would take shoppers back to the shop.
Conclusion and Next Steps
Designing for a responsive website posed a lot of challenges that needed to be considered throughout the process. in hindsight I would have chosen a business with a more developed product and pre-existing website. Area are in the very early stages of their venture and still experimenting with their style.
The initial brief from the founders was initially a UI and website with a retro aviation vibe, and they had quite a few different aesthetics that they were attempting to merge into one brand vision. Time was running out and there were too many conflicting ideas to pull together. I decided to make use my creative license to lean into the retro vibe, bringing in color and flair.
After seeing the final design, the founders decided that they would prefer something more minimal and less colorful going forward.
Had they been paying clients, I would have continued to work with them to hone their vision, however given that this was a student project with limited time, I decided to explore Figma and play with breaking the grid, with wavy dividers and text.
During usability testing the website was well received as a departure from the oftentimes stark and minimal approach to coffee websites.
Going forward if I was to continue developing this site for my client, I would strip back the UI to a much simpler palette, with less color, simpler fonts and a ‘quieter’ approach to messaging. Along with actual photographs of their product.