UX/UI Design
The Problem
E-commerce retailer, LuckyVitamin, had two websites; one for desktop and one for mobile (mDot). Both were dated and needed a redesign. Even more pressing, however, was the need for one adaptive site that shared the same code base. As site traffic migrated to mobile LuckyVitamin was in danger of losing its hard-earned SEO value as Google shifted its search results based on mobile content.
Old mDot Site
The mobile site was busy and overwhelming. Content had been stripped away, hurting the retailer’s SEO rankings.
Old Desktop Site
The desktop site was cluttered and unresponsive. This made for poor UX on larger monitors and tablet devices.
The Solution
Working collaboratively with UX/UI designers, front and back-end developers, QA, SEO specialists and content teams, I planned and executed a fully adaptive website redesign, with an emphasis on mobile-first. The final result preserved LuckyVitamin's high SEO ranking and drove 40% increased revenue (combined with omnichannel marketing and personalization efforts).
New mobile and desktop site
The Process
We did an analysis of each page to determine what was working vs. pain points and areas of confusion. Where did users click? Where is there drop-off and abandonment? After that, we created low fidelity MVP wireframes to quickly iterate solutions. Below are example wireframes we developed.
MyAccount | Low Fidelity Wireframes
Expanded Order Details & Tracking
From UX to UI
Once we were confident in our wireframes, we worked in Sketch and built component libraries to design high fidelity prototypes. We conducted user testing to further optimize and validate our designs.
Wellness Circle Rewards
UX/UI Case Study
The Problem
LuckyVitamin's old rewards program was a confusing and frustrating experience. The point system was hard to understand and even harder to redeem. Once you reached a certain point-level, you were emailed a promo code, which couldn't be stacked with other promos and quickly expired.
The Solution
I led an effort to overhaul the rewards program, from the branding down to the way you redeem and apply your rewards. Here are some key enhancements.
Wellness Circle Rewards
New Branding, Tiers, & Messaging
"Spreading the wellness has never been more rewarding."
"Obsessed with your health? You're in luck. As a Wellness Insider, you'll enjoy free 2-day shipping and earn 1 Wellness Point for every $1 you spend. You can cash in your Wellness Points to redeem exclusive Wellness Rewards like first access to new products, free samples, or even a trip to the spa. And during exclusive Happy Wellness Days, you'll have a chance to earn up to 4X Wellness Points—an added bonus that could help boost your Wellness Status to unlock even more rewards."
Rewards Landing (signed out user)
This page introduces the loyalty program, having the primary message to sign up or sign in. This is followed by featured rewards, tier benefits, and other ways to earn points.
Dashboard (signed in user)
An existing guest is presented a dashboard with relevant bank points, status, and marketing messaging around points.
Your Benefits
Fly-out
All Ways to Earn Points
Fly-out
Your Activity
This page gives guests the ability to see their dashboard of bank points against their current status within the loyalty program. All recent activity keeps track of earned points.
