Work    Gigs






UI Challenge 1: Ranking Preferences


Medium

Sketch & Flinto

Problem

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”.






Sketches


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




Concept:

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.






 

GIF





👈🏼
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.






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