Free People Mobile App

The Free People mobile app had to be updated to go along with the new Free People Site for the overall replatform goal. As the team went through marketing and product needs, we realized that a complete overhaul was necessary. The first steps were to refine the shop process that the customer would go through when opening the app.

img-1.jpg

Navigation & Search

Artboard.png

Goal: After going through the iOS Human Interface Guidelines the team realized that the tab bar is the navigation structure that Apple recommends. How could we present the navigation in a way that was different than the traditional off-screen menu?

Solve: We decided it would be effective to do a dropdown menu that would let you dig one level deeper. An added benefit was that this would act as a breadcrumb system to the customer. She would be able to quickly glance to see what category she was in, and in a single tap could see the previous categories she moved through. Once a category is selected, the customer is pushed to a category landing page, which then allows the selection of a sub-category. This aligned itself perfectly with the site navigation since product is never shown on an overall category level but on a sub-category level.


Product Filtering

Goal: Allow filtering and searching directly from a browse level page.

Solve: Influenced by other e-commerce and the legacy FP app, we decided on using the filter button next to the centered navigation bar to balance out the search icon. The filter and sort system would auto-update in the background so that when the customer left the view she would be presented with new products. By auto-updating after every filter we also eliminated the possibility for her to apply filters and end with 0 filtered results. This was pivotal since we always wanted product to be shown.


Product Detail Page

Artboard.png

Goal: Present basket options clearly to users and make it easy to decide on color, sizing, and other information needed for conversion.

Solve: We kept a lot of the skeleton from the legacy app. The size of the buttons and touch areas were updated and aligned with the iOS guidelines. Through analytics we noticed that users would read through reviews of the products, so we surfaced the average rating along with making reviews easily accesible. Product images were contained within a carousel, while tapping on the image would open the zoomed view. This zoom and carousel decision was based on surveys we ran throughout the navy yard with the targeted demographic.


Mobile Checkout

Artboard.png

Goal: Provide an extremely quick and easy way to check out. Leverage any key information that we have collected before from a user to further expedite the process.

Solve: The entire process from cart to receiving a confirmation can be finished in just 3 screens. Tapping checkout from cart starts the information collection process . If a user is signed in and has purhcased something before, we automatically pull the previous billing address, shipping, etc. The thinking would be that a user would change either shipping address or their payment method. This kept the number of necessary actions on a screen extremely low, and would result in a quicker, smoother checkout experience.