Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lululemon App redesign

697 views

Published on

Fictional project part of the UX Immersive at General Assembly, NYC.
Alivia Duran + Melanie Wider

Published in: Design
  • Be the first to comment

Lululemon App redesign

  1. 1. L U L U L E M O N O M F I N D E R 2 . 0 A L I V I A D U R A N & M E L A N I E W I D E R J A N U A RY 2 9 T H 2 0 1 5
  2. 2. Busy professionals want to sign up for fitness classes that are near their home, work, or along their commute while having information about bookings, studios, payment and friend activity all in one place. P R O B L E M
  3. 3. Om Finder aims to help you discover classes on-the-go, book the ones closest to you and reward you for all the hard work you put into it. S O L U T I O N DISCOVER - BOOK - GET REWARDED -REPEAT ALL IN ONE PLACE
  4. 4. TA B L E O F C O N T E N T S N E X T S T E P S D E S I G NR E S E A R C H Competitive Analysis Personas Wireframes
 and testing User Flows Prototype Surveys Current App Analysis Mobile Platform Technical Research Interviews MVP feature prioritization initial sketches
  5. 5. S U R V E Y O B J E C T I V E S R E S E A R C H Our initial survey was designed to explore workout habits, class attendance, incentives to exercise and general needs when trying to stay active. Devices:
 
 iPhone was the platform of choice to book classes or check schedules.
 
 Some discovery of new classes was on personal computers. Content:
 
 Users needs extensive but concise information when considering attending a class
 
 Users often shared plans with friends when working out.
 Workout commitment:
 
 Users like variety in their workouts, whether they are a member of a gym, studio or not. 
 
 Although often not available at their respective gyms/ studios, users mentioned how booking classes ahead of time was a good way to commit to working out. K E Y L E A R N I N G S
  6. 6. M O B I L E P L A T F O R M Fit.Reserve • Curated listings, but you can only view classes and sign up after paying for a membership GoRecess • Extensive listings - Good if you know the specific type of class you are looking for but overwhelming to browse • No incentives to use site Much of the class discovery process is done at home on a personal computer, so integration of Om Finder into the Lululemon website is something to consider in the future. Two competitors in the web-only space are Fit.Reserve and GoRecess. Neither are available as an app. R E S E A R C H
  7. 7. C O M P E T I T I V E A N A LY S I S Classpass • Not good for discovery - You must be a member to even view classes • No solution for the not-ready-to commit person - Only one unlimited month class package option • No social aspect • Doesn’t highlight new class offerings for curious users Mindbody Connect • Extensive but not curated listings of fitness classes • Includes spas and salons as well as fitness studios and gyms -“Information overload” • Many booking options (one-off classes to packages) that vary per studio • No incentives or rewards for booking with Mindbody R E S E A R C H
  8. 8. T E C H N I C A L A N A LY S I S O F E X I S T I N G A P P Om Finder is a free app is designed to help iOS users locate yoga studios, classes, and instructors in Canada, the U.S., and around the world. Om Finder uses the Mindbody API currently to source yoga studio data. Core existing features are: R E S E A R C H Invite friends to class - Built-in feature through phone contacts and / or Facebook Add yoga classes to your calendar (in-app and personal) Schedule reminders (in-app setting) Get directions thru Mindbody API Read tips on classes (user generated)
  9. 9. T E C H N I C A L R E S E A R C H • Class data isn’t up to date • Find a friend function doesn’t work • No incentive to reserve through Om Finder • Dependent on breadth of listings - No curation of classes • Users can only can reserve a spot, you can’t pay ahead of time • Only yoga classes • Minimal information about instructors • No data on class size • Locational data is all in kilometers Incomplete date on instructors, no sense of trust. Schedules aren’t populated. Data through Mindbody R E S E A R C H
  10. 10. I N T E R V I E W S R E S E A R C H The goal of conducting face-to-face interviews was to determine and discover if the problem really existed. By hearing real life experiences about users workout habits we took a closer looks at how we could solve issues that users current face when scheduling workouts on-the-go.
  11. 11. M I N I M U M V I A B L E P R O D U C T Using insight from our interviews we refined the core function(s) that we needed for our MVP. R E S E A R C H MVP Discover new classes
 Book and pay for classes in one place
 Feature trusted instructors
 Incentivize workouts
 
 AMBASSADORS/ TEACHERS
 Attract a wider range of users to classes
 Gain recognition by being linked to a global brand USERS
 
 Book classes on-the-go
 Have incentives to workout
 Discover new classes LULULEMON
 
 Trusted lifestyle brand with large and active following but small digital engagement
 

  12. 12. R E S E A R C H K Y L E “ T H E E A R LY A D O P T E R ” 2 7 - 3 4 Y O We identified 3 key personas to inform each steps of the design process. K I M B E R LY “ T H E C O M M I T T E D M E M B E R ” 2 1 – 2 6 Y O C H R I S T I E “ T H E F O L L O W E R ” 3 4 Y O A N D U P • Busy but never misses a workout • Stays current with fitness trends and loves trying new classes • Stays motivated by having a varied workout routine • Loves challenging workouts that show noticeable physical results • Trusting a brand is important, but his friend’s recommendations go a long way • Occasionally attends drop-in classes but usually calls studio directly to book ahead of time • Works out regularly • Invests in membership to save money and commit to working out • Needs on-the-go access to class schedules • Wants to attend classes at various locations to accommodate a busy, changing schedule • Likes to work out with friends • Likes to sign up for classes ahead of time • Wants to workout but doesn’t do it regularly • Overwhelmed by amount of unfamiliar choices • Prefers smaller boutique studios • Picky about instructors and class size • Needs to book ahead of time to commit to working out • Places a high value on trusted recommendations P E R S O N A S
  13. 13. F E AT U R E I D E N T I F I C AT I O N & P R I O R I T I Z AT I O N R E S E A R C H
  14. 14. I N I T I A L S K E T C H I N G D E S I G N
  15. 15. U S E R F L O W: K Y L E D E S I G N LULULEMON APP HOME PAGE CLICKS TO OPEN LULULEMON APP CLICKS ON CLICKS RESERVE CLASS SELECTS LOCATION AND TIME CLASS PAGE ENTERS CREDIT CARD INFO CLICKS PROCEED CONFIRMATION PAGE CLICKS ON FEATURED CLASS FEATURED CLASS details include (instructor, locations, studio amenities, level SIGN UP PAGE ENTERS INFO AND SIGNS IN ACCOUNT PAGE CLICKS PURCHASE PURCHASE RECAP CLICKS ADD TO CALENDAR CLOSES LULULEMON APP Scenario
 As an active member of the Lululemon community in NYC Kyle recently heard about their latest ambassador. He opens the app to see if he can learn more about this new ambassador and where he teaches.
  16. 16. U S E R F L O W: K I M B E R LY D E S I G N LULULEMON APP HOME PAGE CLICKS TO OPEN LULULEMON APP CLICKS BACK CLICKS FIND A CLASS HOME PAGE ENTERS LOCATION & TIME SELECTS CLASS CLICKS ON FEATURED CLASS FEATURED CLASS details include (instructor, locations, studio amenities, level LIST OF CLASSES FOR THE DAY (BY TIME BASED ON NEAREST LULULEMON ) CLICKS FILTERS FILTERS SELECTS BOOK CLASS FILTERED LIST OF CLASSES CLICK REFINE CLASS PAGE SIGN INENTERS EMAIL CREATES PASSWORD CLICKS CONTINUE TO BOOKING PACKAGE OPTIONS PAGE SELECTS PACKAGE PAYMENT PAGE ENTERS PICTURE CREDIT CARD INFO REVIEW PAGE CLICKS PURCHASE/BOOK CLASS MY CLASES PAGE Scenario
 Kimberly is getting ready for her day before heading to class to at NYU. Her last yoga studio membership just expired and she wants something new. She shops at Lululemon occasionally, and considers her purchases there an investment.
 She recently downloaded Om Finder app, and opens it up to see what she can do.
  17. 17. U S E R F L O W: C H R I S T I D E S I G N LULULEMON APP HOME PAGE CLICKS TO OPEN LULULEMON APP CLICKS BACK CLICKS FIND A CLASS HOME PAGE ENTERS LOCATION & TIME SELECTS CLASS CLICKS ON FEATURED CLASS FEATURED CLASS details include (instructor, locations, studio amenities, level LIST OF CLASSES FOR THE DAY (BY TIME BASED ON NEAREST LULULEMON ) CLICKS FILTERS FILTERS SELECTS BOOK CLASS FILTERED LIST OF CLASSES CLICK INTRO OFFERS CLASS PAGE SIGN INENTERS EMAIL CREATES PASSWORD CLICKS CONTINUE TO BOOKING PACKAGE OPTIONS PAGE SELECTS PACKAGE PAYMENT PAGE ENTERS PICTURE CREDIT CARD INFO REVIEW PAGE CLICKS PURCHASE/BOOK CLASS MY CLASES PAGE Scenario
 Christi is new to NYC. On the top of her busy job, she she feels so overwhelmed by the amount of options that she doesn’t know where to start looking for classes. She is familiar with Lululemon, and recently heard about their app from a friend.
 She wants to find classes that fits in her schedule, but doesn’t want to commit to a membership right away.
  18. 18. W I R E F R A M E S & T E S T I N G D E S I G N
  19. 19. I T E R A T I O N S R 1 & R 2 Clarified navigation icons Added arrow to featured class Added distance from you in class description Added selected state Change state for already booked class Added view of About & Schedule R 2 H O M E C L A S S L I S T C L A S S D E TA I L Added back navigation Simplified class and instructor details D E S I G N R 1 Users wanted a quick search option
  20. 20. Refined button copy & added exit button Refined button copy to include before/after state Removed progress bar Adapted progress indicator Added selected state I T E R A T I O N S R 1 & R 2 D E S I G N S I G N I N PA C K A G E O P T I O N S PAY M E N T I N F O Grouped elements for better association
  21. 21. Added package information Adapted progress bar Added search by instructor Added ability to edit information Standardized back button Added menu bar Added share + studio location to info Changed copy on “free classes” I T E R A T I O N S R 1 & R 2 D E S I G N R E V I E W S C R E E N C L A S S H O M E F I LT E R S
  22. 22. PRIMARY COLORS Avenir Heavy HEADLINES ABCDEFGHIJKLMNOPQRSTUVWXYZ1 2345678 Avenir Book COPY ABCDEFGHIJKLMNOPQRSTUVWXYZ123 45678 IMAGERY 21% RED OVERLAY ON SELECTED STATE 21% BLACK OVERLAY STUDIO PHOTOS To ensure brand consistency across screens we developed a brief style guide of the key UI elements. SECONDARY CONTENT (i.e. CLASS DETAIL PAGES) NO FILTER This is an active button This is a disabled button This is a cancel button S T Y L E G U I D E D E S I G N SECONDARY COLORS PRIMARY ICONS APP LOGO BUTTONS TYPOGRAPHY
  23. 23. F I N A L I T E R A T I O N S D E S I G N Loading Screen Quote from Lululemon mantra that changes each time you open the app Request for Location Classes are filtered by distance from user. Ask for access to location data on first open Home Screen Featured instructor changes weekly and can be customized based on closest Lululemon store Selected State When tapped selection is indicated by 21% red overlay Find a Class Screen Filtered by time and relevant to location of user Find a Class Screen Selected state is indicated with 21% red overlay Class Detail Page Tabbed view of details and schedule 1.0 1.0 Color changes to red in menu bar to indicate user’s location in app1.1 1.1 Heart icon adds class to favorites list. Distance from user is shown below. 1.2 1.2 Filters icon opens Filters Screen (bottom left) Filters Screen Filters Screen w/ Keyboard Filters Screen with Time Filters Screen with Button 1.3 1.3 Red text indicates user’s location in app 1.4 1.4 Only show classes that have specials for new members/visitors 1.5 1.5 Auto-suggests location 1.6 1.6 Button appears after filter option is defined
  24. 24. F I N A L A N N O TA T I O N S D E S I G N Login Screen User enters email - System recognizes email as new/ existing account Login Screen w/ Keyboard When field is tapped keyboard scrolls up Login Screen w/ Password Once email is entered Create Password field automatically scrolls up Login Screen Completed Success /fail message for password entry Select Package Screen 1.0 1.0 Button is inactive 1.1 1.1 X icon takes user back to class detail page 1.2 1.2 If user has account they can tap this & enter single password field appears with “Enter your password” Payment Screen Payment Screen (completed) Review Before Purchase 1.3 1.3 When password is recognized keyboard scrolls down and button changes to active state 1.4 1.4 Pop up appears “Are you sure you want to cancel? “ No OR View My Account 1.5 1.5 Option to scan credit card instead of entering info. Add Paypal in future? 1.6 1.6 Inactive button until credit card information is verified Select Package Screen Selected state is indicated with 21% red overlay 1.7 1.7 Option to save credit card information for future purchases
  25. 25. A D D I T I O N A L F E A T U R E S I N S P I R A T I O N N E X T S T E P S Account profile page:
 
 A place for users to edit account information, track activity data and connect with friends. Reward Program:
 
 To incentivize booking through Om Finder, we can incorporate a rewards program that would include class bookings as well an in-store purchases at Lululemon. Activity Page:
 
 Users and influencers be apart of the Lululemon community by creating, sharing and interacting with content. 

  26. 26. N E X T S T E P S I N T E R A C T I O N I N S P I R A T I O N Launch Page
 Randomized inspirational message My Classes/Calendar
 Accordion Menu to create
 a more relaxing view of current calendar My List Page
 Add animations for sharing, quick booking, favoriting etc
  27. 27. P R O D U C T E X T E N S I O N N E X T S T E P S Wearables & Activity tracking
 For users who like to see measurable results, we see the possibility of a later feature that would allow integration of a wearable device to track fitness activity using the existing activity tracker built into iOS8. Web integration and iPad app
 We see the Om Finder being directly integrated in the current Lululemon website in the user account. One place to track all your data, from past purchases to checking your workout activity.
  28. 28. N A M A S T E

×