How typographic hierarchy can improve PacSun’s mobile app
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.
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.
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.)
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.
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.
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.
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.
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.
Wish list icon
PacSun uses a heart icon to allow users to add items to their wish list. Yet, they’re only placing the heart icon on the image once a user clicks through to the Product Details page.
I expanded the use of the icon and added it to all product images. This makes it easier for those who wish to scan the Products page, add items to their wish list, and then visit their wish list to view their selections before adding them to their cart.
I rearranged their Sort menu options to go from: Relevance, Low to High, High to Low, and Best Reviewed. I added Best Reviewed because it’s a common (helpful) filter for e-commerce sites, and a user requested it in the App Store.
Number of results
The number of results is now displayed below the Filter/Sort menu to provide feedback. This lets users know the number of items they can expect to see after searching or filtering.
The current bag screen, before checkout, only offers the option to edit the quantity of a product. I added “Edit order” to allow users to edit all fields, including size and color.
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.