Challenge 2: Google Maps Wireframe

While doing Challenge 1 I came upon the realization of how much we depend on an App that probably most of us give for granted: Google Maps. Every person I interviewed for the project used Google Maps to look for the best way to move around (even if it’s not the most accurate one). So, I didn’t have to think too much when asked to do a wireframe of an App that I use often. In this second Challenge I decided to make a wireframe of setting up Google Maps to go from one place to another.

The following are the screenshots of how we would do it in the App:

UI elements I used for the wireframe:

- Search boxes.

- Buttons.

- Image placeholder.

- Map placeholder.

- Different text representations (“Lorem ipsum”, lines).

- User icon.

- Phone Keyboard.

Lo-fi user flow:

These are the lo-fi prototypes I did for every screenshot. Not too much detail, but we can still see and understand the location of each object.

The mid-fi Figma prototype:

1- “Home Screen”: The first thing we see when we enter the App.

2- “Search”: When we click on the Search Box it will show us our favourites and the history of our searches.

3- “Choose Option”: You select the option you were looking for.

4- “Preview of the Chosen Option”: You will see a preview of the place you are going.

5- “Go!”: Everything is set, you just need to press Start and follow the instructions.

Conclusion:

It was really fun to do this project. I realized how much I enjoy doing prototypes using Figma, it’s pretty intuitive and easy to use but you can elaborate great designs. Something I should work on and get better at is the time I spend doing the wireframe. I know it’s only the beginning and it takes time to get used to the interface and where the tools are, but next time I will try to spend less time with the details.

Thank you for your time!