UX/UI Design IRONHACK Prework

Challenge 2: Wireframing

1. Choose an app and show an example task of user flow for it.

The app i picked was eCooltra — an electric scooter and bike renting app i use everyday to move around Madrid. The main task was to reverse engineer the app to its wireframe. Basically work back from the finished product to understand its UX/UI components and slowly understand how the app presents itself to the user.

Figma export where you can see 5 screenshots of the finished product above and their correspondent wireframes to study interactivity below

2. I replicated the interface on each screenshot using tools from the Ironhack’s Wireframing kit. Top 5 screenshots from left to right:

Screenshot one

Main page where you have your city map (the city where the service is available), 4 main buttons, two on each corner on the top and two on the bottom right corner and one secondary button on the bottom left corner.

Screenshot two

Account settings where you have all the menus that relate to your travels. It’s grouped by 5 items with the App logo right above the iPhone’s bar.

1. Shows your Screen/User name and it also show how much money you have available for your travels.
2. Button that takes you to your Profile where your account info is stored.
3. Credit card info and tariffs and a second button with all your travel history
4. Offers, cupons and promotions, each with its own button
5. Help button

Screenshot 3

Flow from number 2 from screenshot two- Profile. Here you have 3 buttons that let you edit your account info ranging from: Personal info, Email, Password and one for Notifications. There’s also one top right close button and one botton right button that let’s you sign off from your account.

Screenshot 4

The ‘How does it work?” page where you have two main groups. One that explains how to rent a scooter or a bike and a second one for the app’s contact center. There’s also one top right close button.

Screenshot 5

Rent your scooter help page with a basic explanation on how the reservation proccess works. A bottom center button that gives you access to an explanatory video and pagination button for the rest of the instrucions. There’s also one top right close button.

3. I chose to try and develop the flow from the main page and its two top buttons — the left takes you your account and the right to the help page.

Link to the prototype.

4. Main takes from this challenge:

• Hierarchy is fundamental in choosing primary, secondary and terciary buttons.
• Allways have your iPhone bar visible, you never know when you’ll need to check the time.
• Always have a ‘Go back’ button.
• The user experience and interface should be simple or at least appear simple.
• Information/data should be organizaded according to a system (any system one chooses)

5. Conclusion

It helped me to work on an app I use everyday and how seamless it is or at least how it seems to me. And seamless is a keyword here.