Filson iOS App Concept | Design Process

Starting from pencil & paper, ending up with a prototype.

What do I want to do

1. Translate the ‘Men’s Shirts’ page of the Filson website into a native iOS experience/design incorporating important information such as the item price, description and color selector as well as any available filtering and sorting functions;

2. Design and prototype an innovative experience for comparing two or more products within the Filson core shopping experience.

What I will present

I will present all steps I followed to create and reinvent the compare experience. I’ve translated this web feature into an easy and intuitive experience in a mobile device.

I’ll carry you through all the phase that brings me to accomplish the design and the final prototype, specifically:

Phase 1 | Understand the Filson website to be able to translate a web experience into a native iOS app, and focus on the “compare” feature.

Phase 2 | Design the entire UI in line with the Filson brand and mood — experience designed for iPhone6 @1x.

Phase 3 | Creation of a prototype to better communicate my ideas and the entire UX.

Tools I’ve used in the process

Pencil & Paper: UX design and understanding what to do

Sketch 3: UI design / prototype assets

Principle : Prototype

Phase 1

Understand the Filson website to be able to translate a web experience into a native iOS app, and focus on the “compare” feature.

The main focus in this phase is to understand how the web experience work on the Filson website. This allows me to understand how the website create the experience for the user. In this way I will be able to translate the web UX into a mobile UX, so the user will benefit of all functions and feature that the web experience is able to provide.

In order to do this I need to focus on the main elements that makes the web experience good and useful for the users, at the same time I skech ideas on paper about how a define feature can be translate in a native iOS mobile experience.

Understanding the task, and the web experience
Converting the web UX into a iOS native experience
Understanding the structure and navigation
TIP: During this part fo the work, try to understand as much as you can what you’re trying to achieve, and always have in mind the user’s needs.

During this phase a lot of ideas come to mind about how the screen will look like when the app will be complete.

In this process some ideas will be good and other bad, and this allows me to proceed into the right path without being caught up lately in a wrong direction.

During this phase I’m also playing around with some concept regarding the animation to be able to see if I’m capable of representing the idea that I have in mind through a real working prototype. This will be also useful later, because I will be able to hand over the prototype to developers. It will be easier to show what I want to communicate with my design instead simply talking about the UI and showing static mock-ups.

Creating super simple prototype to communicate my ideas

The base prototype that I build in this early stage they are just a little samples about micro interaction. I do this to see if I’m able to replicate my ideas in a real mock-up: it’s like a test to see if I’ll be able to present this correctly to developer for future implementation. These have just this simple function: help me to communicate my ideas with ease.

Sidebar menu idea
Compare feature idea

Phase 2

Design the entire UI in line with the Filson brand and mood — experience designed for iPhone6 @1x.

After having a complete overview and understanding of the web experience, and having a structure about how to connect screens, the phase 2 allows me to create the complete UI of the iOS app. While I’m designing the screens I mirror the current art board I’m working on, so I have a better sense about how it will look on the real device.

The UI will be base on the mood of Filson brand, easily communicate from the website. Color, typography, guidelines of iOS app and Filson’s mood are the main elements that I bring into this phase.

Starting to build the UI based on colors and typography
Design all the UI – and different states – of the iOS experience

This is the phase the I prefer the most. I really love to build all this UI. This allows me to be creative, to explore visuals without loosing the main focus of the UX — because previous process.

TIP: Always miorror your layout on a device. Nothing is bettere than see your UI in an actual device.
Overview of the screens I’ve come up with

After few iteration of designing the final UI, I’m about to create all assets that I will put together into the prototype. This is little long process because I have to cut out all the single assets based also on the animations and interaction I wanna build into the prototype. Sometimes it’s just a few pieces but sometimes a single UI can be broken into a lot of single elements. This is useful to achieve nice and meaningful micro interaction between elements.

Collection of elements needed to create a high fidelity prototype.

As you can see in the left side there are a lot of elements that need to be prepared and sometimes I go back and forth because I realize that some pieces are missing.

This process though it will be well rewarded once the prototype will be put together and tested.

This allows me to create a high fidelity prototype to give the closest experience to a real iOS app, and give a feeling that you’re dealing with a native app.

TIP: Focus on being in line with the brand and being aware of the UI design pattern of the platform you’re developing for.

Phase 3

Creation of a prototype to better communicate my ideas and the entire UX.

Here it comes the fun (and the hard) part. All the previous work on the UI come together into this point where I put together a final prototype about the iOS app.

This is a quite peculiar work since the positioning of the element is crucial. If something is out of place then you will notice switching between screens. This is the reason why I build this step by step integrating all the screens.

Starting with the sidebar menu, base of the prototype.
Adding few screens more…
Adding screen after screen…
…Until the “compare“ feature. It got a bit wild!

As you can see following the pictures, this process is very delicate and it can be done only adding piece by piece and being careful about all the elements placed on the canvas.

The more interaction you add to your prototype the better, but things get complicated easily if you’re not careful with adding more and more and more…

TIP: If some animation behave weird, just check the layer’s name. I fix tons of “bugs” in this way.

The main goal was to recreate the Filson we experience into a native iOS experience.

The process I showed to you is the process that i usually follow when I have to come up with UI solution that fits a mobile UX. This process though can be followed on the other way around and for creating a native Android experience. These are the foundation of my process, starting from paper and ending up on the device.

The last step — creating an high fidelity prototype — is the main gate to the implementation because it allows developers to be understand better how the UI and the UX will be define through the development phase. I think this is really important because it allows me to close even more the gap between designers and developer, which result in better communication, better use of time and — in the end — better result.

I create a shot of this on Dribbble and below you’ll find all the things I’ve created:

  • 10+ UI screen done in Sketch here
  • Principle prototype source file here (optimized for iPhone 6)
  • Video with all interactions here

Thanks for reading and I hope that this will help you on your next project.

Cheers! :-)

You can find more of my work on my Dribbble account.

You can also find me on Twitter and Facebook.

Show your support

Clapping shows how much you appreciated Tobia Crivellari’s story.