This week I am focusing on creating an amazing Interaction Design for the Miami Trolley app and by the end of the week I will have my prototype.
First thing I did was gather my user research and sketches and created a low-fidelity wireframe on pen & paper.
After doing some thorough user testing with my low-fi wireframes, I noted some room for improvements and began to translate it onto my computer using Sketch.
My main goal in revamping the Miami Trolley is to make this very, very simple. I consolidated all the features onto one single page, giving the users a clean & easy experience.
When creating my mid-fidelity wireframes on Sketch, I realized that I think it’d be great to implement an easy-access button to going to your “My Stops”. The “My Stops” feature is something currently offered on the current Miami Trolley app, that I really find to be convenient. Placing the heart button, aka My Stops button, in the lower right side always gives users some awesome IxD because it’s right at your thumb. Another key IxD tool that I used was consistency– I put the heart icon in the “Add to my stops” button & in the title for the “My Stops” page. This always the user to learn to associate the heart with that page.
One thing I am definitely going to start working on is to work with a grid for my wireframes, e.g. working with the Bootstrap grid in order to make this “soon-to-be-prototype” easier to code.
The results from my testing was the following:
- Users encountered issues on the “information” page where it would tell you the estimated time of arrival for the next trolleys
- No one loves the hamburger menu
- Let people click the stops on the map