Redesigning Lululemon's Website

A night time habit of mine is to lie in bed, scrolling through my phone. I'll do my usual rounds on Instagram, Facebook, and Youtube. Then once in a while I'll do some, what I call, online window shopping. I pretty much go through some website, look at what I could buy, add items to my cart, and close the browser. I've frequently looked at Lululemon's website but rarely on my phone until one night, and I noticed how difficult it was to shop online on my phone. I eventually gave up and switched to my YouTube app. This became a perfect platform for this project - redesigning an existing product.

Project overview

The Problem: Lululemon's website is not very mobile-friendly. The design is responsive, but certain functions don't work as well, such as tapping on a link and swiping through images. Unresponsive functions and displeasing aesthetics can cause loss of potential customers.

The Solution: Giving Lululemon's website a facelift will increase usability, attract more customers, and increase business. For those who navigate through the website but don't buy anything, the redesigned website will leave a positive impression for future opportunities.

Tools: Balsamiq (wireframes), Sketch (customer journey map, task flows, mood board, mockups), and drawing.

Customer Journey Map

After conducting usability tests on mobile view (iOS and Android), I used the results to create a main persona and a corresponding customer journey map.

Main persona: Mallory is a young adult, working as a customer service representative at an established company. She enjoys going to exercise classes and is a self-proclaimed yogi. When she isn't in work attire, she chooses to dress in an "athleisure" style. Her favorite pair of leggings that she's had for a while recently ripped, so she's searching for a replacement pair.

Use Case and Task Flows

The three main use cases a user will perform are logging in, finding an item he/she likes, and purchasing that item. These can be created into task flows.

Wireframes

Using the three main use cases and task flows, I created wireframes in Balsamiq to reflect these actions.

Mood Board

The main themes I wanted to showcase in my mood board was that the brand was inspirational/motivational, modern, simple, and calming.

Mockups

I created mockups for the homepage for desktop, tablet, and mobile views. I also created a few more mockups for mobile view of an item information page, the account menu, and adding an item to the shopping cart. Note: images were taken from Lululemon.