Work    Gigs

UI Challenge 1: Ranking Preferences


Sketch & Flinto


Design a screen branded for GE Transportation for this question:

“What factors are most important in selecting a manufacturing location?”

The four options (“factors”) are:
  • “Lowest labor costs”,
  • “Lowest material costs”,
  • “Lowest transportation costs”, and
  • “Skilled work force”.


Laying out thoughts

Brand Research

Given GE’s tight control over their files and brand resource, I had to manually scout for their brand and materials.

UI Mockups

What’s the use case & where’s it gonna be?

 Lo-fi mockup

Lo-fi mockup of the initial flow leading up to the “rank preference” screen.

The user here is a representative of a company that wishes to look for a manufacturing location.

Given the overwhelming options of locations to choose, he/she decides to refine his/her search.

Hi-fi mockup of the entire flow

Hi-fi mockup of the entire flow, from the homescreen to the “rank preference” screen.

Key Component

Feed and factor in

Close-up of the static ranking preference UI


Although there are 4 factors of importance to rank. The user is fed one factor at a time to let them closely consider their options without the sense of being overwhelmed.

A little description of each factor is given at the bottom of the title.

This is what the screen would look like after the user is done ranking their preference from 0 – 5.



A Flinto animation of what the ranking UI would look like during interaction.

First factor with a description. Once completed, the next factor shows up with its description.

Final design was designed according to the GE brand guidelines.

© 2019 Jonathan H. Kho
LinkedIn  //  Email  //  Résumé