lululemon app redesign

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

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)

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

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

I N I T I A L S K E T C H I N G

D E S I G N

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



CLICKSBACK

CLICKSFIND A CLASS HOME PAGE

ENTERS LOCATION & TIME

SELECTSCLASS




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



CLICKSBACK

CLICKSFIND A CLASS HOME PAGE

ENTERS LOCATION & TIME

SELECTSCLASS




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.

W I R E F R A M E S & T E S T I N G

D E S I G N

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


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”


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.

N A M A S T E

lululemon app redesign

Design

mindbody r e s e

p e t i t i v e

f i n d e r

d e r j

ly s i s o f e x

s t i n g

r c ht e c h n

t f o r