Challenge

As part of a fictitious design challenge, I was tasked with designing Filson's first mobile product, a core commerce iOS app. Filson is a fashion brand that wanted to achieve two things in their app: 1) reinvent the "compare" feature, which allows users to select multiple products and compare their features and 2) leverage native iOS design conventions and interactions.

In additional to accomplishing Filson's business goals, the mobile app needed to solve for the user goals as well: easily find a particular item, be able to compare it against others, with the end goal of making sure it's the best fit as Filson's products last a long time.

Team: Solo
Duration: 3 days
Platform: iOS mobile application
Role: Lead designer

 
 
 

PRocess

Discover and Define

Methods: brand exploration, heuristic analysis, competitive analysis, information architecture

Since this challenge was about translating a website into a mobile application, I knew I needed to get a good understanding of Filson's current brand and website.

Filson – Prolific Interactive.png

Brand Exploration

Filson's use of natural colors speaks to their product line created for outdoors activities. Their rustic look echoes back to pioneering times, yet they carry a sense of refinement with well curated product placement.

Filson – Prolific Interactive (1).png

Website Exploration

Filson's website focuses the user on their products, with clean white product image backgrounds without models. I utilized their Perpetua typeface used in their logo, along with Futura for titles, and Letter Gothic for misc. information. Additionally, I carried over a few of their background colors as well as a green accent color.

 

I conducted a heuristic analysis on the current website to identify website problem areas and ensure to fix or not replicate on the mobile application. I used a severity scale from 1 to 3 (highest). 

 

In addition to getting to know Filson's brand, I spent time completing a competitive analysis, examining Tanner Goods, Huckberry, Man Outfitters, Mr. Porter, Topman, Gilt, ShopStyle, and Canopy. And guess what? Not one of the companies employed a "compare" feature, so I knew I'd need some time for ideation.

 

Information Architecture

After mapping out Filson's current website information architecture, there was a need to down-size and reconfigure a few things. Card sorting helped to identify new product categories for quicker navigation inside the app.

Develop and Deliver

Methods: sketching, hi-fidelity prototyping using Principle

Once I gathered brand, website, and competitive insights, along with new information architecture, I went to the drawing board! There were a few design guidelines I kept in mind for this project in particular:

  • lean on iOS conventions
  • carry over Filson colors and typefaces
  • ideate on the best way to compare products

For this last guideline, I ended up utilizing the iOS segmented control to help the user sort between different bits of information.

 
 
 

View the Filson prototype made with Principle:

 
 

Solution

The Filson iOS commerce application solves the design challenge in a few ways:

  • leverages Filson brand with iOS conventions
  • updated information architecture for quicker browsing
  • more intuitive and effective filtering
  • focuses the compare feature for Filson’s selective customers
  • doesn't repeat severe heuristic issues
  • utilizes e-commerce best practices while enhancing the filter and compare features to distinguish Filson from the competition