Hi-fidelity prototype


This week’s assignment was to design an interactive high-fidelity version of the wireframes done in week 3. This should be a final version on the app’s visuals. After the prototype was done a colleague did an expert review on it.


My final prototype followed the interface of the wireframing, with the main navigation being at “thumbs reach”. This time I used an actual map other than just leaving it blank, and also added more realism to other elements. The results are shown below:

Search screen. (click to enlarge)
Routes screen. (click to enlarge)
Route detail screen. (click to enlarge)

Following feedback from my peers on last week’s assignment I changes the background from blue to white to improve readability. I also added the Tripp3r colors to the route options to make it more characteristic of the brand.

Also, I used as example a trip using public transportation. For the sake of not cluttering the interface, the “bus” icon is used to select public transportation as a method. When the routes are displayed, icons for different types of public transportation (metro, tram…) are shown to clarify the user on what to do.

Expert Review

I asked Alex to do an expert review on my current interface, and this is what he noted:
Simple and natural dialogue:

Make things efficient

Provide feedback

Be consistent and use standards

Use visual hierarchy and keep it simple

Use emotion

Review Reflection

My colleague’s expert review was surprisingly helpful. I, again, overlooked the back button, and gained some insights on aspects of the interface I wouldn’t have found by myself.

From my perspective, knowing why I put everything the way it is, I understand why an explanation to eco needs to be available. It could mean a lot of things from being zero emissions to using a bus that has an environmentally friendly engine.

I also agree that I chose unorthodox colors. Maybe because of my color-blindness I see enough contrast, especially on route A’s blue shade against the map’s blue shade. I have figure out a way of displaying it all in a better way, probably by changing the maps color to a more traditional one.

Process & Tool Reflection

I continued working on Adobe Xd since it’s a familiar tool. I worked on the wireframes done last week, and it was a smooth process. This time I applied some more changes based on feedback I had received already. The result is a visually similar interface, with more polished items and an image of an actual map. To try an interactive version of the prototype, go to: BEP Assignment 2.2

You can also view the prototype below. Please note that both here and on the link above the stroke widths are out of proportion because of Adobe Xd export settings.