Week 11 — Research For/By Design — Part 4— Prototype
Introduction
For the final implementation of this group project, my group and I began discussing the next steps shortly after creating our user personas from Part 3. We decided to consider all of the the design ideas that we have brainstormed from Part 3 and agreed to make a new UI interface/mockup of the MTA’s app as the ultimate prototype solution.
The Problem
Looking into the MTA’s distribution of their provided services through their apps on smartphones, the main issue was the overall user experience of having to navigate between apps just to use specific functionalities of each app to gain the full experience. There were a total of six different apps that were created and design within their intentions. It causes an annoyance to users as they try to switch between apps endlessly.
The Solution
After considering the overwhelming presence of the multiple apps being provided by the MTA, my group members and I decided to create a singular UI application that contains the extensions that users wanted provided by our research and integrate them alongside the overall MTA experience.
The key features we wanted to add in additionally:
- Crime Alerts/Map
- Improved ticket payment flow
- Robust search feature for trip planning
- Navigation bar
The Process: Creating a User Journey Map
By using the primary user persona that we have created in Part 3 as a placeholder, we followed through each stage of the user journey as we thought of how the user would use the app to solve his problems for his day in the life. We also have considered what the user was thinking, feeling, and the opportunities that were presented as he moves along the journey map.
The Process: Wireframing
Next, we had created a site map of our UI application to map out what specific functionalities should the MTA app consist of as part of our designed solutions and ideas.
Following on, the team decided to distribute the work into each section of the site map to create the wireframes of the app. I had done the work on creating the crime functionality of the app.
The Process: Hi-Fi Mockups
Then, we created a few high fidelity mockups so people viewing our presentation could get a good understanding of what we wanted our app to look like.
Here are the screens we created below.
It’s Self-Reflection Time!
Overall, I think my group members and I had performed a great job of simply showcasing the main idea/purpose of our product. I was really impressed with the work that was produced by the team with such limited time. By empathizing with the amount of users that we have conducted research on and interacted with, we could all relate to the frustrations that each user would encounter when using the public transportation system that New York City provides to the general public. With the intention of making integrations of the MTA’s app, we felt that our design helped increase productivity and reassurance by providing the favorable functionalities that users needed.
Looking back, I did feel like the team could have made more enhancements and refinements to make our designs more eloquent and completed to showcase a stronger design concept if we had more time to continue on this project. Though, our team was very satisfied on the progress we all made so far.
Personally, I have gained so much from this experience as I learned to develop my wireframing/prototyping skills. With the addition of using Figma and InVision more extensively, I can say that I am getting more proficient on using these design tools. As I aspire to become a user experience designer, this project has definitely given me the “real” experience!
Please take a look at the links provided below to view our final designs and prototypes:
