Wireframing
Getting my first UX design job requires a lot of persistence and hard work. Working on my challenges have only proven that it will not be easy, but step by step I learn new things and I really enjoy it!
In last couple of weeks, I have been reading about wireframing quite a lot.
Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys.
Today my task was about creating a wireframe version of the user flow of the chosen app based on screenshots or high-fidelity prototype screens of such app. In general, I simply created a reverse engineer wireframe of Deliveroo app. Myfinal product was composed of 6 screens I built in Figma.
The lockdown of millions of people at home across the globe due to the coronavirus have been the perfect recipe for success for online meal delivery companies. Having some real Thai food for a dinner was a great idea to start using this app again. This is why I decided to work on Deliveroo app, a very popular online food delivery company based in London, England.
Making the user experience of finding, selecting one and getting food delivered has to be as efficient and as easy as possible. Not only does better UX reduce the likelihood of the user becoming disappointed and abandoning the app, it also improves the process from a logistical perspective on the courier and the restaurant. Less confusion in the ordering process results in less complaints and hassle on the delivery management side. For my project I decided to break down the Deliveroo app process of getting a burger.
On the main page, we can easily find restaurants serving kind of food we like. There are many categories, helping us making the best choices. After selecting a restaurant, we are able to see products, including photos, which I find very helpful! As soon as I make my decision and select a specific burger, I am taken to a page with an option to add extra items to my burger. In the next step I hit the button with “Add item” and I am taken back to the restaurant’s home page. There is a clear indicator as to what I’ve already ordered — a bright green stripe on the left side, and the total cost of my basket is visible all the way on the bottom. If I am happy with the order, by tapping “View basket” the app will show me all details of my order, including delivery fees and extra charges. In the last step I have to provide the address I want my order to be delivered. I really find this step useful, because we are able to drop a pin on the map, instead of typing the exact address. This works brilliant, when I am sitting in the park with friends! To finish my order, I click on “place delivery order” and I am taken to a payment and delivery summary.
I really enjoyed working on this challenge and I have learnt that I should keep wireframes simple. They are a great tool for experimenting with and communicating design solutions with clients or team mates. They allow to focus on what’s most important, high level concepts and functionality, before getting too focused on the branding aesthetics.