Elevate Coffee Trading Website Redesign
decorative icon of shopping cart website
Client Work
E-Commerce Site
decorative icon of clock and truck
3 Weeks
decorative icon of coffee beans
Team of 4 UX Designers
decorative icon of messages and coffee cup
User Research,
Affinity Map, Personas,
Comp Analysis, Info Architecture, Wireframing,
Hi-Fi Mockups, Prototyping,
Usability Testing, Branding
decorative icon of farmer
Figma, Shopify,
Zoom, Slack. Procreate
Figma Prototype
line break divider
overview

Who is Elevate Coffee Trading?

Through non-profit partnerships and business venture, Elevate Coffee Trading sponsors education, nutrition, and clean water access for children in need. In addition to charity, Elevate hosts Adventure Tours to coffee-growing regions to explore and get a closer look at where their morning joe originates.

Love Coffee Adventure Polaroids
line break divider
Design Objective

In a team of 4, we were tasked with the following:

1. Create a new Shopify design using the Dawn 2.0 template
2. Improve subscription flow to gain business
3. Promote upcoming adventure tours
4. Promote wholesale B2B partnerships
5. Maintain outdoor, charitable aesthetic
line break divider
Elevate Coffee Homepage
Elevate Coffee Trading homepage
line break divider
coffee dates — Interviews

We interviewed 7 coffee drinkers...

Social Impact

100% of our users say they care about the social impact of their purchases

86% of our user group NEED transparency for suBSCRIPTION BENEFITS, pricing, and options

Subscription Benefits
Coffee Attributes

71% of our user group NEEDs TO KNOW ATTRIBUTES such as origins, roasting methods, and flavor profiles

86% of our user group WOULD CONSIDER GOING ON coffee related adventure TOURS

Adventure
line break divider
coffee drinkers — Personas

Ideal Patrons for Elevate Coffee

Personas for Erica, 35 and Joe, 29
line break divider
Espresso 'self— competitive & Comparative analysis

How do we compete?

We observed that the majority of coffee websites are transparent with coffee attributes, subscription models and charity causes.

Through competitive research, we found that being up front and honest with customers is the best approach for business.
Competitive and Comparative Analysis
line break divider
Light roast — Wireframing

Using Shopify theme editor to create the framework

Instead of sketching, we opted to use the Shopify theme editor to understand the limitations and constraints of our designs. Moving forward, we recreated our designs as wireframes in Figma.
Shopify theme editor
line break divider
Dark roast — Features

Ensuring  transparency

1. Advertising Elevate's promise to charitable cause


2. Implementing detailed coffee attributes


3. Breaking down their story, mission, and how they give


4. Thorough subscription process to ensure transparency
Ensuring Transparency
line break divider
The taste test — usability

Changes based on user feedback

1. Alteration navigation bar and dropdown menus because the blue color bled into the background, causing confusion among users


2. Allowing breathing room for icon visuals


3. Adding visual cues for accessibility
Changes based of usr feedback
line break divider
The Final Project

We designed a complete website for Elevate Coffee compatible with Shopify

Elevate Coffee Website
line break divider
Contribution

Leadership and responsibility

During this time, I discovered that I possess a natural inclination towards design direction, an ability to quickly grasp and utilize new tools, and I have a diverse skill set as a designer.
1. Creative Direction - Oversee website layouts and elements including images, graphic design and colors

2. Communication - Schedule weekly meetings with client as well as sending updates

3. Shopify - create sandbox to understand limitations and constraints, also hold account access for client site

4. Graphic Design- Create digital graphics and source images for content

5. Webpages - Lead designer for Homepage, PLPs, and PDPs
Michelle's To Do list
line break divider
Last drop — conclusion

What I would have done differently

1. Spend less time in Shopify's theme editor. My team and I spent a large amount of time trying to customize within Shopify. Although I don't regret learning how to use this web editor, we could have used the time to focus more on what our Figma product could be.

2. Managing client expectations. As an individual, it was my first time working with a real client. I definitely got lost trying to navigate what was best for the client versus what he wanted. Going forward, I believe on focusing on the user needs to back my design decisions.

3. Forgo trying to learn CSS. I attempted to code in Shopify. Not having the knowledge but trying to go above and beyond for my client, I think it's best to leave it to the experts and focus on my expertise

I'd like to express my gratitude to my team members, Ben Lee, Christina Knudson and Danny Tran, for their hard work and dedication. And a big thank you to Michael Iwasko, for entrusting us with this project! Visit his site here at Elevatecoffeetrading.com

Thanks for reading!