alli
UX/UI Design + Strategy for Alli's Web and Mobile applications
developed by Weber SHandwick New York's iX Team.
Creative Assets: alli
Art Direction: Weber Shandwick x alli
Responsive Design: Weber Shandwick
UX Strategy: Weber Shandwick
alli is an otc weight-loss aid that helps users along their weight-loss journeys
BACKGROUND
alli's website needed to drive more visitors to buy the product and engage with new user weight-loss tracking features.
STRATEGY
Reconstruct and redesign alli's website to aid and inform users on their own weight loss journeys.
User Needs
Clear path to log in/sign up
Interaction with site alongside alli's personalized tools and educational content
Adopt best-in-class approaches from a competitor analysis of websites with similar features
Goals
Create an intuitive, clean, and streamlined UX/UI design through site
Design a responsive interface through site navigation
Develop/execute content and UX strategies to deliver efficient, effective user flow from landing page to user goal
Responsive Design
Mobile Navigation
The mobile navigation for alli's website allows users to jump from page to page easily. By tapping the caret beside each menu item, a dropdown appears with each submenu item below. The search function is responsive, turning blue to indicate that the feature is in use. "Buy Now" and "Get Coupon" buttons on the bottom of the screen are sticky.
Desktop Navigation/
Hover States
The utility navigation and menu navigation items turn blue on hover to show that the links are clickable and will take the user to a different page. The "Buy Now" functionality remains green throughout all pages for differentiation, and allows the user to click this command at any time.
Button Styles/Hover States
Designed hover states for each button style to illustrate how each would respond to the user. These styles were determined by layout, placement, and CTA.
Branding
Logo Usage & Color Palette
Padding around the official alli logo was important to note when branding across web.
Before the layout design was created, the color palette had to be streamlined and consistent across all website features and icons. Used previous moodboards and assets that the client provided to assist developers when building the site.
User Engagement
Helped strategize the user journey through member onboarding, as well as restructure the sitemap to fit all needed pages.
