Background

Area Coffee is the passion project of Katie and Ricardo Arias. They begun roasting green coffee beans sourced from Ricardo’s home country of Ecuador in 2021. They needed a website to sell their beans and advertise their coffee service. 

Additionally they needed a complete branding kit, with logo and packaging design.

The inspiration for Area comes from an Ecuadorian airline that Ricardo’s grandfather operated in the 1960’s. Using this as the jumping off point I created a brand palette, graphics, logos, packaging and conducted research with their customers to design a user centered responsive website prototype.

Student Project – User Research, UI Design, Visual Design, Brand design.

4 Weeks | 80 Hours

Figma, FigJam, Photoshop, Illustrator, Zoom, Discord.

Previous slide
Next slide

Design Process

Empathize

Empathize

Competitor Analysis

  • I compared the E-commerce patterns, tone, and content hierarchy of 5 coffee roasting companies.
  • The smaller brands had very simplistic websites with few features, the larger brands had more features and deeper website architecture.
  • The more established brands such as Stumptown and Partners coffee offered useful insights into storytelling and user journeys for subscription commerce.
  • My findings suggested that a minimal approach is favored, prioritizing the product and brand visuals, grouping content by interspersing blocks of background color and full bleed photography with white space.
  • Consistent branding and color helped tie the content together.

Feature Analysis

Looking at competitors its was evident that Area would need to have a landing page, shop page, contact page, about page, and a coffee subscription page.

The user journeys on the competitor sites were very simple, storytelling and UI tended to take center stage, with most flows prompting the user to purchase items, sign up for a subscription service, follow socials, or learn about the company. 

Customer Survey

  • Next I developed a survey to uncover peoples coffee drinking habits, in conjunction with their E-Commerce preferences to understand what type of  website would resonate with Area’s customers the best.
  • 27 surveys were completed in person at the weekend coffee service.
  • The survey asked questions relating to brand awareness, taste level, coffee knowledge, coffee information hierarchy etc.
  • Most customers were regular coffee drinkers who are well informed on the different methods of brewing coffee. 
  • The demographic skewed towards the younger side (late 20’s early 30’s)

https://drive.google.com/file/d/1OPtWIB2fHqLUT-NLsllQz2Tr6pp9krAN/view?usp=drive_link

Define

Key Survey Findings

Design Decisions

  • 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.
  • 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.

Favorite brands of coffee with survey participants

  • Stumptown
  • Blue Bottle 
  • Partners Coffee
  • Irving Farm Coffee
  • Illy
  • I wanted to create a familiar user experience for Area customers to the brands they already shopped.
  • 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.

Hierarchy of coffee information as determined by the survey.

  • Origin
  • Flavor Notes
  • Roast Date
  • Grower
  • Price
  • 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 Customers Personified

Previous slide
Next slide
Previous slide
Next slide

Ideate

Information Architecture

Area 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 were simply- Homepage, About Us, Subscriptions, Contact Us, and an online shop. 

Sketching The Responsive Site

Area Task Flows

Prototype

Brand Book & UI Kit

Mood Board
Logos
Palette
Typography
Packaging
Photography

High Fidelity Wireframes

Responsive Website Prototype

I decided to design for Desktop (1440 x 1024 px) and the device I chose was the iphone 13 Pro Max. 

The blocks of content transferred with relative ease to the smaller viewport. I simplified headings, and omitted the wavy text treatment to keep the UI simpler. 

I chose two journeys to prototype for testing. 

The desktop journey was to add a weekly bean subscription to cart and check out, and follow the Area Instagram.

The mobile journey (featured to the right) was adding a product to cart and checking out. 

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.

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..

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 viewport, 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 extended the hero photograph to the top edge of the page and floated the NAV over the top.

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 & Next Steps

Although the brief and ask from the founders was initially a UI and website with a retro vintage vibe, they decided that they would prefer something more minimal and less colorful going forward. Due to the lack of actual materials for my client (photographs, content and product etc) I decided to use creative license to explore a this direction .

I did work on revising the concept and would of course tailor to the needs of the client in a real life situation. However I decided to present & test this version of the UI as I felt strongly about the more contemporary direction.

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.