| 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 a 21% increase in page sessions 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.
Hillsound Equipment’s Goals
Audit of current comparison feature
Reduce the number of relevant customer inquiries
What I ACTUALLY did
The product 👩💻 : Reinforced IA and Comparison Feature Redesign.
I recategorized and modified product specifications based on customers' needs.
I redesigned the comparison feature focusing on usability heuristics and function prioritization.
The impact 📊 : 25% decrease of product recommendation inquiries.
The redesign and launch of the feature gave a notable positive impact, with a 25% decrease of product recommendation inquiries on the website’s customer service platform, which dropped costs for the business.
01 Problem Research
The audit: Self audit by Cindy Choi
“I WONDER HOW MANY PEOPLE WORKED ON THIS.”
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.
The audit: Interviews
Talking to the internal team
To validate my assumptions as well as factoring in 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.
In summary, the staff confirmed that the website suffered from a disorganized and inconsistent application of its design and brand guidelines.
02 Define
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 “placeholder” website
based on interviews
with internal staff members
& ux audit
This resulted in a proposal as the following:
1
Establishing a design system (guideline)
2
Revamping sitemap and IA
03 Branding
Brand Research
FIGURING OUT ASO'S NEW STYLE
Research: ASO
Before starting anything, I needed a deeper understanding of ASO's brand identity. Here are steps I took to approach this, I:
Consulted the client and higher-ups for additional insights about the brand.
Reviewed the "About Us" page for context and background.
Here’s what I discovered:
Logo Colours
After confirming there was no specific reason for the two different shades of green in the original design, I explored alternative color palette options. To guide this process, I delved into the brand's origin and the meaning of "alpine start."
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
DC905D
01216C
093A61
FAD07B
43779F
0B6363
097288
2 different shades of green were used - but for "no particular reason"
“Early dawn” or “Daybreak”. Alpine start would mean an early morning start, typically before dawn, often used in mountaineering or long hikes to allow for maximum daylight and favorable weather conditions. (Campnab)
Not so much green. Due to "alpine start" referring to a time before dawn, it was interesting to see more of sunrise and somewhat dusky colours in the sky rather than just pure green.
The Final Decisions
Minimizing the change
A trend in the 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.
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.
Layouts and Design
FINDING THE RIGHT TEMPLATE
A theme with a mega menu.
The Shopify Theme Store provides templates for online business owners to customize their Shopify stores.
Since ASO opted not to outsource design to code, my next step was to browse for a suitable theme. Upon reviewing the website’s information architecture (IA), I found that ASO had 91 pages under the main navigation menu. This extensive structure made it essential to reinforce the category hierarchy with visual aids.
I selected the Enterprise theme, which features a versatile Mega Menu. Unlike basic text-based menus, Enterprise offers various image sizes and configurations, enhancing navigation and visual clarity for users.
Unexpected roadblock
ADAPTING TO TIMELINE CONSTRAINTS
Around this time, the previous website began to experience technical issues, significantly tightening our timeline.
To adapt, I chose to retain most of the existing content and focused on identifying the best snippets to enhance the layout and presentation. For instance, on the landing page, I prioritized using snippets that optimized structure and visuals.
Below are annotated wireframes I used to effectively communicate these decisions with my client.
06 Final Designs
Successfully making ASO 2.0 live
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
properly using “button” elements for buttons
consistent use of design guide (e.g. colours & fonts etc.)
Utilizing the Mega Menu feature from the Theme, we implemented the dropdowns to be a lot more visually-oriented with layouts that enhance visual hierarchy.
Below are some of the changes that were made: the icon logo and the bar.
SALE AND CLEARANCE
NEW ARRIVALS
WOMAN
MEN
HIKE & CAMP
CLIMB
MEINDL BOOTS
BRANDS
ABOUT US
SUMMER COLLECTION
Bag (0)
T-Shirts
Technical Shirts
Shirts
Use of proximity grouping for visual hierarchy. (+images!) The use of Mega Menus allowed us to make better sense of layouts thus improving the visual hierarchy. We also made use of images that further enhanced the visual hierarchy.
Casual Shirts instead of T-shirts. As explained previously, we decided to keep naming conventions as consistent as possible. Now it’s ‘Casual’ or ‘Technical Shirts’ for BOTH women and men!
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.
Previous ‘Contact Us’ page
Previous ‘Warranty and Returns’ page
The new ‘Contact Us’ page
222222
42BC3B
07 Metrics
What we have achieved
AN INCREASED NUMBER OVERALL
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 22%, and pageviews by 30%.
*Sep 22, 2023 - Dec 06, 2023: around 76 days since launch
08 Learnings
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.
