Navigation
Mobile App
UI & Interaction Design
I had 8 months to design the mobile app interface and user interactions before the target launch date. During this time, my team and I worked closely with locals and visually impaired communities to pilot test the app. I was involved in the early design and development stages as a UI/UX Designer, where I worked closely with the Executives, and Research & Development teams.
A data gap exists for street-level features on most navigation systems. They are often designed to serve vehicular transportation, which often overlooks street level features such as pathways, street evenness, obstacles, or amenities that could be useful for pedestrian navigation.
With the help of machine learning, crowdsourced information, and local open-source data, MapinHood is bringing pedestrian mobility and accessibility down to the human scale by giving users full control of their routing options, allowing them to interact with their environment and move around on their own terms.
Who knows more about their community than locals?
Users play a key role in identifying and geotagging street-level features essential to mapping out the pedestrian landscape. One of the most important goals of this project was to incentivize users to share useful, accurate, and high quality contributions to fill in local data gaps. In order to do so, we had to make the process as fun and smooth as possible to keep users engaged and motivated.
These considerations prompted us to think of ways to obtain and promote user-generated content. The following points are key areas on which we chose to focus our design and development efforts:
“When a product’s value increases with more data, and when additional usage of that product yields data, then you have a Data Network Effect.”
Once we identified our main challenges and goals, I started by sorting key features into high-level categories to break down into smaller processes.
With findings from the research team about how people in our target audience use navigation apps, I created task flows for each of the core uses to determine key screens and points of interaction points of interaction that needed to be designed prior to wireframing.
After building conceptual models for the main focus areas, I began designing wireframes for key pages with various alternatives.
With the app’s unique trip customization feature, I had to think about how users prefer to personalize their routing settings. We wanted to enable users to have control over which features to approach and which to avoid while taking into consideration the sequence users customize their trip and how this influences their travel preferences.
My team and I went through several iterations of the geotagging function as we discovered several usability challenges regarding gestures and system feedback. Throughout this process, I worked with developers to improve tagging interactions. I measured its effectiveness by a) the speed and ease of tagging, b) allowance for error correction/ prevention, and c) adequacy of system responses to user actions.
After five design iterations of the app’s user interface, we were ready to start fully implementing the changes before launch. While some elements were refined, changed, and adapted throughout the development process, we landed on the following screens:
