Fellow Web Refresh
Senior Design Lead: Jessa Strayer
UX Design: Rachel Cutler, KC Katalbas
Development: Presidio Creative
Web Refresh Goals
Improve Conversion Rate
Fellow had high growth expectations for 2021 and beyond. It needed a website that could accommodate product launches, growth features, and promotional sales.
Introduce the New Brand
The brand team had been hard at work on a brand refresh since late 2020. With the website redesign, we had the opportunity to launch this new brand into the world.
Lean Into Education
Fellow's mission is to help people along their coffee journey, whether someone is a pour-over expert or just curious about coffee. Videos, blog posts, photography, and illustration were all educational tools used on the new site.
Homepage Redesign
For the new homepage, we redesigned the header module, product carousels, content modules, sale banners, and Instagram module. To highlight Fellow's brand voice into the design, we scaled up the typography system and created two different systems for UI copy and campaign copy.
PDP Redesign
We created four PDP designs to cater to the variety of products and bundles Fellow sells: one for electronic, non-electronic, bundles, and pick-and-mix bundles. Each followed a high-level template that highlighted its features.
Electronic PDP
Non-Electronic PDP
Pick & Mix PDP
Component Library
I spearheaded the design system work and was the point person for any updates to the system throughout the design and handoff process. After the website launched, I built out the rest of the design system to contain typography styles, icons, product silhouettes, illustrations, and components.
Process Overview
01
Wireframes
The design team took the detailed brief the ecommerce team created and started mapping out all of the features and pages that needed to be developed in detailed wireframes. This included homepage modules, product collection templates, and PDP designs.
02
Design Exploration
Once wireframes were approved, the visual design portion began. Between the three designers on the team, we each created 3 designs for the homepage, PDP, and collections page using the new brand. We then met and combined the designs into three strong concepts to present to leadership.
03
High-Fidelity Designs
The design team went through two more rounds of visual design review, before starting to build out a more comprehensive system of web pages and components. I made prototypes in Figma and After Effects to explore how each flow could work with each other.
04
Handoff and Development
The final designs were once more reviewed by the team before being handed off to a freelance development agency. I stayed on after the handoff to QA the site as it was developed in a staggered timeline and helped answer any questions around the designs from the engineers and project managers.
