| Alpine Start Outfitter's newly designed website.
✅ For who?
Alpine Start Outfitters(ASO), a retailer specializing in outdoor goods from various brands.
✅ What did I do?
I helped ASO rebrand and redesign their online e-commerce website.
✅ What impact?
The revamped website resulted in an increase of visitors by 22%, sessions by 21%, and pageviews by 30% post- launch
My Role
Lead UX/UI Designer working in a company-wide team of 11
Worked with
E-commerce Specialist
Customer Service Representative
Stakeholders (General Managers)
Timeline
5 months, December 2023
Hillsound Equipment
Hillsound Equipment Inc. is an outdoor brand that produces backpacking, hiking, and trail running accessories for outdoor enthusiasts.
Alpine Start Outfitter’ Goals
UX audit of their e-commerce website
Successful re-debut as an e-commerce retailer.
What I ACTUALLY did
The product 👩💻 : Revamped the website by rebranding and redesigning.
I redesigned the brand's visual key aspects, establishing a more cohesive design system (guideline).
I reinforced the website's information architecture including the product categories and overarching sitemap.
The impact 📊 : More than 20% increase of visitors, sessions and page views.
The redesign and launch of the new website gave a notable impact in more engagement, with an increase of visitors by 22%, sessions by 21%, and pageviews by 30%.
Audits: Self UX Audit
Illuminating Gaps in the Experience
I began by addressing one of the most prominent issues identified during the initial meeting: design inconsistency. The website lacked uniformity, with mismatched colors, typefaces, and other design elements, suggesting that the previous designer had repeatedly switched to different styles without maintaining a cohesive approach.
1
1
Inconsistent margins and paddings across all UI elements. Margin and padding around each container/element were all inconsistent.
2
2
Using image elements as buttons. Not only were the buttons part of the background image, but they also had inconsistent paddings.
3
3
Not following the best practices (e.g. all-caps font used as paragraph text). The previously used typeface, Amatic SC, does not have lowercase glyphs. Therefore, text in all caps made it especially hard to read.
Audits: Interviews
Talking to the Internal Team
In response to the tight schedule and budget, I sought feedback from ASO’s staff. I interviewed 10 staff members to gather insights on:
Their experiences with ASO’s previous website.
Their shopping habits and behaviors when purchasing outdoor gear and apparel.
The focus was that the website was "old and outdated". More specifcally, it was
visually outdated - unorganized visual elements and inconsistent design assets
technially outdated - due to lack of maintanence, they can't find the products on the right pages
The Proposal
Suggesting ASO 2.0
A newly improved website for a re-debut online.
There were two takeaways to consider from the previous steps:
A
the
transition
to online sales
based on meetings
with client
B
the
outdated current website
based on interviews
with internal staff members
& ux audit
This resulted in a proposal as the following:
A revamp/redesign/rebrand for ASO
this entailed...
1
Establishing a design system (guideline)
to tackle the outdated and visually unorganized design elements
2
Revamping sitemap and IA
to tackle the outdated product categories
Branding and Research
Refining ASO's New Style
"Alpine Start" didn't necessarily mean "green".
In order to establish a design guideline, I started with the logo. I explored alternative color palette options because of these reasons:
The higher-ups explained that there was no particular reason for the selection of the brand colours.
To search for a colour palette that will better complement the brand
I discovered that "alpine start" refers to "early dawn" or "daybreak." Using this insight, I researched images of these moments and extracted colors from them to build a visual reference for a more fitting and cohesive palette. Here's what I uncovered:
94C83D
073F2E
ASO’s previous logo and colours
2 different shades of green were used - but for "no particular reason"
DC905D
01216C
093A61
FAD07B
43779F
0B6363
097288
“Early dawn” or “Daybreak”. Alpine start means early morning start, typically before dawn, often used in mountaineering or long hikes to allow maximum daylight and favorable weather conditions. (Campnab)
Not so much green. It was interesting to see more of sunrise and somewhat dusky colours in the sky rather than just pure green.
A trend in logos: Simple styles.
Market research revealed a growing trend among brands to simplify their designs by reducing the use of colors and visual elements. This approach has the added benefit of promoting environmental sustainability, such as minimizing the use of colored inks.
The client embraced this idea, as it aligns closely with the brand's core values and commitment to sustainability.
Opted for a san-serif and simplified elements such as the lines and illustration (trees and landscape).
After
Before
The background colours and landscape were removed.
Examples of logo rebrands. Annotations of detailed analysis on the right in pink.
The Final Decisions
Balancing Innovation with Brand Familiarity
We kept a green but refined elements.
After several revision meetings, we decided to retain the main mountain logo and the green hue in the color palette to maintain brand recognition and minimize customer confusion.
However, the logo was refined with simplified strokes and elements, along with an updated, cohesive color palette to give it a modern and streamlined appearance.
Design Style/Guideline
Reinforcing the Oneness
ASO's new design guideline.
ASO's website had been live for five years, but with multiple contributors over time, the graphics and UI lacked a cohesive "voice." Essentially, there was no design guide to ensure consistency.
To address this, I developed a minimal design guide/system focused on organization and efficiency. Considering the customization limitations of Shopify websites, I prioritized the most essential elements: button styles, color palettes, and typefaces.
The Colour Palette. We started with a green shade (#09543D) and a black variant (#212523) which was derived from the green shade. I used a template from Mizko to create different shades of the two colours as well as the other essential colours to save time.
Buttons. Shopify doesn’t allow customization down to the pixel, but establishing a style guide for the different states of buttons such as default, pressed, hovered and disabled was essential to enhance cohesiveness.
Goodbye, “Amatic” and hello, “Cabin”! The Amatic SC font, ASO's “signature” font, wasn't the best to be used for every text element. I chose the simple san-serif and websafe font, Cabin, to replace the predecessor.
Information Architecture
Revisiting the Outdated Pages
One of the key user issues I identified was the numerous "empty product pages" on the outdated website.
To address this, I reviewed the sitemap, focusing on product category pages—especially those with fewer than three products. I flagged these pages for discussion with my manager to determine if there were plans to add more products. Additionally, I analyzed how the products were categorized to see if adjustments were needed based on availability.
After
deleted!
Before
The before and after of AI of categories, 'Sleeping' and 'Kitchen'.
Combining subcategories. ‘Sleeping Bag Accessories’ was originally empty, however, because it can include “pillows” and “sleeping bag liners”, 3 subcategories were combined to one. Hence, ‘Sleeping Accessories’!
Deleting subcategories. This page had 0 products available for a while. By checking with the business team, we decided to delete certain subcategories that had no further plans on being restocked.
FInal Designs and Annotations
ASO’s new outfit
At last, we launched ASO’s newly refurbished website on September 22, 2023. At a glance, the website has more a cohesive structure and layout.
consistent paddings and margins within elements
more semantic design (e.g. using buttons for buttons, images for images)
elements that abides by ASO's new style guideline (e.g. colours & fonts etc.)
Enhanced product navigation through visual hierarchy.
With the vast number of pages in the navigation, the previous standard navigation wasn't the best design. Moreover, the small clickable areas made it hard for customers to hover and "navigate" the products. We improved the navigation making better sense of layouts thus improving the frustration as well as visual hierarchy.
SALE AND CLEARANCE
NEW ARRIVALS
WOMAN
MEN
HIKE & CAMP
CLIMB
MEINDL BOOTS
BRANDS
ABOUT US
SUMMER COLLECTION
Bag (0)
T-Shirts
Technical Shirts
Shirts
Instead of having to hover over multiple layers with small click areas, customers are now able to view the hierarchy more easily.
Consistent design properties.
One of the main issues with ASO’s previous website was the lack of consistent design properties in elements. By establishing and adhering to the newly made design guide, we were able to to create a much visually organized set of webpages.
Metrics
Engaging Customers
More than 20% increase of visitors, sessions, and pageviews.
On September 22, 2023, our new website went live. The previous website was having serious issues and therefore, we had to hurry the launch.
However, despite the predicament, we were able to show customers a new and improved version of ASO online.
The project didn’t have any particular goals in number but since the launch, ASO was able to see an increase of visitors by 22%, sessions by 21%, and pageviews by 30%.
*Sep 22, 2023 - Dec 06, 2023: around 76 days since launch
Learnings
THERE IS INDEED NO “ONE” DESIGN PROCESS
1
TRUSTING MYSELF
Being the solo designer on the team, I had times when I wished I could have other designers’ opinions to critique my designs and suggestions. However, in the end, this was a great opportunity where I gained confidence in presenting, "defending" and communicating my designs to clients head-on.
2
TRUSTING THE PROCESS
Despite the efforts including research on Shopify before committing to the project, I found out that there were indeed a lot more constraints to building the final product. The fairly “different” design process had me slightly worried thinking that I wasn’t going the right path.
However, after gaining that firsthand experience of roadblocks that come into play during a design process I learned to realize there is indeed no one design process. The more important fact was that I came up with solutions to work around those constraints for end results.
