Wireframing Uber

Ironhack UX/UI Bootcamp Prework Challenge 2: Wireframing Uber

“Here we go! Welcome to the second challenge. In this session I’ll learn about how to translate a UI design into a wireframe and how to make a good design requires a set of different skills”

The challenge

In this session we have been asked to choose an application we love and to produce wireframes of 5 to 7 screens, my choice went on Uber!

I love the simplicity of the Uber user interface, it's an app that I use the most in my city and when I am abroad. During my travels, especially in developing countries, it was a life saviour and a must-have application!

Mission

The mission is to wireframe 5 to 7 screens, show how reducing the navigation experience to its simplest, functional and efficient steps, helps to produce a smooth flow when aesthetical elements are not taken into consideration; at least not as the main object!

I made an inventory of the UI elements we see in this app:

• Images Logos, cars and other avatars, background illustrations
• Icons Arrows, clocks, pinned locations
• Navigation Primary navigation, footer navigation, interactive component controls
• Buttons The quintessential UI element are buttons: primary, secondary, disabled, active, big and small, loading
• Interactive Components Maps and other modules with moving parts
• Headings Variations of typographic headings.
• Forms Text areas, dropdown menus, select menus.
• Blocks Clusters of the interface that are built for reuse. Collections of headings and/or images.
• Messaging Alerts, success, errors, 4o4s, in-progress, validation and warnings.
• Colours Black and white, with variations of blue tones.

After listing the UI elements I was able to operate on the page structure, in which every element was identified as functional or aesthetic, making it easier when designing wireframes and the user flow.

User flow in low-fi

Go with the Flow!

Select “YOUR TRIPS” from the menu on the home page in the left top corner…

• Land on the “Choose your trip” page, to the menu of the top right corner, select “BUSINESS”
• The “Welcome to Business ride” page gives you the opportunity to “GET STARTED”, so do it!
• Here we are! on the “Ride for business” page you have the possibility to keep work rides separate; get travel reports; make expensing seamless & easy… Keep going and click on the “JOIN NOW” button!
• On this page, we are asked “What’s your business email?” Tap into the search bar and when the Next and Skip buttons appear, select “SKIP”
• The “Choose payment” page is here. You keep going “ADD PAYMENT METHOD”
• We are not interested in the service anymore! We can go back to the home page… To be able to do this we have to click the left arrow that stays for “backwards”, five times!

UI interface

These interfaces are my reproduction of a flow on seven screens for the Uber case I decided to work on for Exercise 2 commissioned as one of three by Ironhack.

*Some of the icons are missing on the first page. They were expensive in terms of timing so I skipped it to be able to publish this article in time. I’ve learned that it's possible to create amazingly complex visual content with the Figma tools ;)

I also start to create a collection of Icon sets to use in my future projects. Stay tuned!

Wireframes

Strait to the point! Here is a mid-fi wireframe of the Uber app flow i’ve choosen.

Conclusions

It was really important to exercise over Figma tools. I learned how to structure a wireframe and the important steps needed to create a smooth flow. I also learned how to create consistency into the project and not get lost on the way. At least I hope! :P Love doing this :) let’s have more of it!