How typographic hierarchy can improve PacSun’s mobile app

E-Commerce App Design

Overview

PacSun is a clothing retail company. Its mobile app is heavy on text. Filtering results requires scrolling through a long list of text-based options. In addition, the lack of typographic hierarchy slows down the ability to quickly scan information.

For this mobile app design concept, I customized the layout of the filter options and adding hierarchy to prioritize key pieces of information.

Process

Inventory count

Scrolling through dozens of products, especially on mobile, can be time-consuming. Filters provide a great way to cut through the noise and view your desired products. However, not all filters are created the same. PacSun’s filter options are all text-based. They present the filter options in a list view for each filter, making for several scrolls on the user’s end. For example, their color filter has 30 options, which equate to 30 lines of text.

I counted the options for their size, color, and price filters. Then, I decided how to best present those options to users while reducing real estate on the screen.

Size filter

For the size filter, I used a grid format with four sizes on each row. I also added headers to indicate the type of clothing the sizes corresponds to. (The current app doesn’t distinguish between sizes nor does their desktop website.)

Color filter

The grid format also worked well for colors, reducing the number of lines from 30 to 4. I also added a label for each color for accessibility.

Size Filter UI Design Color Filter UI Design

Price filter

I replaced their list of price ranges with a slider that allows the user to select either end and slide it to her desired price range.

Price Filter UI Design

Filter screen

In addition to redesigning the Filter options, I also switched their Filter page to a Filter screen. Instead of the user being taken to another page to select filters, I designed the Filter screen to slide in from the right.

This gives users context as to what the filter options correspond to. Having the filter screen slide in from the right was also intentional since the Filter option in the Filter/Sort menu is on the right side.

Typographic hierarchy

There lacked a strong difference between information. For example, on the Products page, the font size and weight are the same for both the name of product and price.

In my design concept, I made the price bigger and in bold on the Products page. Helvetica was their font of choice with 0 letter spacing, and reading it on tiny screens made for eyestrain. I borrowed their use of letter spacing from their desktop website and used it throughout the app.

Product Details App Design PacSun Mobile App Design

LEFT: Current PacSun app, RIGHT: My Mobile App Design Concept

On the Product Details page, I also reorganized the content below the product image. I turned “No Reviews” to 5 stars with a number on the right side to indicate the number of reviews. I also made the quantity and size options into drop-downs and made them look equal to each other and on the same line. Last, I moved the “Add to Bag” CTA button higher and below the drop-downs for easy access and faster checkout process.

Tiny enhancements

I made a few changes to its product category page with the goal of improving user experience.

Product Category Page Design

I also added “Edit order” on the checkout page to allow users to edit all fields, including size and color.

E-Commerce UI Design

Result

If I were a UX/UI Designer for the brand, I would measure performance of these changes by measuring the time it takes to complete a task now and comparing it to the time for task completion after the UX changes are implemented. Web analytics data could provide this data, but usability tests would also provide valuable qualitative data as well.