Loading      Loading      Loading      Loading      Loading      Loading      Loading      Loading      Loading      
Loading      Loading      Loading      Loading      Loading      Loading      Loading      Loading      Loading      

AMELIA ISLAND TEA HOUSE

Designing a Responsive E-Commerce Website

Project Overview

Amelia Island Tea House is a new, up and coming business located in Amelia Island, Florida. The owner would like a responsive website to further establish their online presence, offer products online, and help grow their business in a competitive market.

High-level Goals

01. Design a responsive website from scratch for Amelia Island Tea House.

02. Extend coherent branding that aligns with Amelia Island Tea House's current/desired clientele and customer experience.

Role

UX/UI Design, Freelance, User Research, User Interviews, Prototyping, Usability Testing

Tools

Figma, Adobe Illustrator

Timeline

3 weeks/20hrs per week

DESIGN IN DETAIL

Ready to jump into the prototype? Click to view in Figma.
view prototype

01 research

RESEARCH GOALS

USER RESEARCH RESULTS

Making reservations online and filtering systems topped the list of key motivators for these users

USERS WHEN SHOPPING FOR TEA...

USERS WHEN SEARCHING FOR LOCAL BUSINESSES...

PERSONA

Using the information gathered from the interviews, I created a persona that sought to understand the goals and frustrations of my user. Then, participant responses were categorized into six main categories that helped solidify the user and allowed me to gain a deeper insight into Amelia Island Tea house's users.

Goals

  • Easy, simple navigation
  • The ability to reserve a table via the website
  • Products to gift her friends and family
  • A loyalty program with initiatives

Frustrations

  • Businesses that only have a social media platform
  • Inaccurate website information about inventory
  • Not able to reserve a table for large groups

02 BRANDING

For Amelia Island Tea House, the stakeholder had a logo but wanted a brand refresh.

BRAND DESIGN

For Amelia Island Tea House, the stakeholder had a logo but wanted a brand refresh. Their theme is clean, elevated, and minimal.

03 INFORMATION ARCHITECTURE

Based upon data from research and in-person interviews, I organized my observations and categorized them using a customer journey map. This helped me expose pain points and areas for improvement in the app along the entire user journey.

FLOWS

Based upon data from research and in-person interviews, I organized my observations and categorized them using a customer journey map. This helped me expose pain points and areas for improvement in the app along the entire user journey.

Through my user flow, ​I uncovered any usability issues and established these tasks could be completed with the framework I had constructed. ​

Thinking back to my persona, I mapped out 3 tasks Susan would need to perform on the site:​

Usability of my site was the most essential element to consider. After detailing each step I could focus my attention on branding and product design without worrying about usability issues.

Task flow

SITE MAP

04 WIREFRAMES

After preliminary sketches, mid-fi wireframes were created to see how the imagery and interaction would work together.

EXPLORATION

05 FINAL UI

TESTING

I found 5 users and set out to test a few aspects of my design, primarily the process of finding and purchasing tea and the usability of its interface. I also tested the efficacy in communicating the details of the tea house, such has how to find the location and hours.

My usability testing was a success with 100% of users completing the tasks and no usability errors.

My next steps in testing would be to enable more features throughout the prototype and design the Tea Club subscription page.

HIGHLIGHTS

5/5

  • Easy to navigate website.
  • Great layout and easy flow.
  • Loved the Instagram feature.
  • Thought the checkout process was intuitive.
  • Would return to website due to design.

4/5

  • Loved the images of loose leaf tea instead of tea bags.
  • Enjoyed the feature of changing the size or adding to cart directly from the result page.
  • Sought to learn more about tea from the description, steeping instructions and 'For the Novice' section.

SUGGESTIONS

2/5

  • Wanted to view Tea Club subscription page

1/5

  • Had subtle pain point due to prototype not being active

final reflection

After reviewing the affinity map & the usability testing findings, I found that users all agreed that the prototype was intuitive, easy to navigate and visually pleasing – all things that I aimed to accomplish in the design.

I was able to verify that users could complete the given task of purchasing an item and the usability test gave me the opportunity to observe how users went about completing that task and how users went about finding the location and hours of the store.

I was so happy to be able to dive deep into topics that I am very passionate about—my local downtown area and supporting small businesses.

The project deliverables were handed to the stakeholders who are currently working towards getting the website developed. Links will be updated once the website is live.

Overall, the design of Amelia Island Tea House had a usability test completion rate of 100% (5 out of 5 participants) when navigating the prototype, and all participants would return back to the site.

view prototype

other projects

Cynch
AR & Keyless Entry Feature