Date post: | 16-Jul-2015 |
Category: |
Design |
Upload: | melanie-wider |
View: | 183 times |
Download: | 0 times |
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 R Y 2 9 T H 2 0 1 5
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
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
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 N R E S E A R C H
Competitive Analysis
Personas Wireframesand testing
User Flows
PrototypeSurveys
Current App Analysis
Mobile Platform
Technical Research
Interviews
MVP
feature prioritization
initial sketches
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 classUsers 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
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
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
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
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)
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
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.
M I N I M U M V I A B L E P R O D U C TUsing 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 classesBook 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-goHave incentives to workout
Discover new classes
LULULEMON
Trusted lifestyle brand with large and active following
but small digital engagement
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
U S E R F L O W : K Y L E
D E S I G N
LULULEMON APPHOME PAGE
CLICKS TO OPENLULULEMON APP
CLICKS ON
CLICKSRESERVE CLASS
SELECTSLOCATIONAND TIME
CLASS PAGE
ENTERS CREDIT CARD INFO
CLICKSPROCEED
CONFIRMATIONPAGE
CLICKS ONFEATURED CLASS
FEATURED CLASSdetails include (instructor,
locations, studio amenities,level
SIGN UPPAGE
ENTERS INFOAND SIGNS IN
ACCOUNTPAGE
CLICKS PURCHASE PURCHASE
RECAP
CLICKSADD TO CALENDAR
CLOSESLULULEMON APP
ScenarioAs 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.
U S E R F L O W : K I M B E R LY
D E S I G N
LULULEMON APPHOME PAGE
CLICKS TO OPENLULULEMON APP
CLICKSBACK
CLICKSFIND A CLASS HOME PAGE
ENTERS LOCATION & TIME
SELECTSCLASS
CLICKS ONFEATURED CLASS
FEATURED CLASSdetails include (instructor,
locations, studio amenities,level
LIST OF CLASSESFOR THE DAY
(BY TIME BASED ONNEAREST LULULEMON )
CLICKSFILTERSFILTERS
SELECTSBOOK CLASS
FILTEREDLIST OF CLASSES
CLICK REFINE CLASS PAGE
SIGN INENTERSEMAIL
CREATESPASSWORD
CLICKSCONTINUE TO BOOKING
PACKAGE OPTIONS PAGE SELECTSPACKAGE PAYMENT PAGE
ENTERSPICTURE
CREDIT CARD INFOREVIEW PAGE
CLICKSPURCHASE/BOOK CLASS
MY CLASES PAGE
ScenarioKimberly 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.
U S E R F L O W : C H R I S T I
D E S I G N
LULULEMON APPHOME PAGE
CLICKS TO OPENLULULEMON APP
CLICKSBACK
CLICKSFIND A CLASS HOME PAGE
ENTERS LOCATION & TIME
SELECTSCLASS
CLICKS ONFEATURED CLASS
FEATURED CLASSdetails include (instructor,
locations, studio amenities,level
LIST OF CLASSESFOR THE DAY
(BY TIME BASED ONNEAREST LULULEMON )
CLICKSFILTERSFILTERS
SELECTSBOOK CLASS
FILTEREDLIST OF CLASSES
CLICK INTRO OFFERS CLASS PAGE
SIGN INENTERSEMAIL
CREATESPASSWORD
CLICKSCONTINUE TO BOOKING
PACKAGE OPTIONS PAGE SELECTSPACKAGE PAYMENT PAGE
ENTERSPICTURE
CREDIT CARD INFOREVIEW PAGE
CLICKSPURCHASE/BOOK CLASS
MY CLASES PAGE
ScenarioChristi 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.
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
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
Added package informationAdapted 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
PRIMARY COLORS
Avenir Heavy HEADLINES ABCDEFGHIJKLMNOPQRSTUVWXYZ12345678 Avenir Book COPY ABCDEFGHIJKLMNOPQRSTUVWXYZ12345678
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
F I N A L I T E R A T I O N S
D E S I G N
F I N A L
Loading ScreenQuote from Lululemon mantra that changes each time you open the app
Request for LocationClasses are filtered by distance from user. Ask for access to location data on first open
Home ScreenFeatured instructor changes weekly and can be customized based on closest Lululemon store
Selected StateWhen tapped selection is indicated by 21% red overlay
Find a Class ScreenFiltered by time and relevant to location of user
Find a Class ScreenSelected state is indicated with 21% red overlay
Class Detail PageTabbed 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
F I N A L A N N O TA T I O N S
D E S I G N
Login ScreenUser enters email - System recognizes email as new/existing account
Login Screen w/ KeyboardWhen 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.61.6 Inactive button until credit
card information is verified
Select Package ScreenSelected state is indicated with 21% red overlay
1.71.7 Option to save credit card
information for future purchases
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.
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 PageRandomized
inspirational message
My Classes/CalendarAccordion Menu to create a more relaxing view of
current calendar
My List PageAdd animations for sharing, quick booking, favoriting etc
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 appWe 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.