Locale

Introduction to User-Centered Design

In my Introduction to User-Centered Design course of Fall 2021, my team and I designed the Locale application, which encourages outdoor exploration and socialization whilst observing pandemic restrictions. Our research revealed that many are eager to explore outside but are unsure of how to get started. Locale lets users add pins on the in-app map with photos, audio clips, music, and more. The pins may only be accessed at the given location. By sharing these locations with friends, users can be provided with or provide others with a subject for an urban exploration outing and an opportunity to learn about the local community.

The Research Phase

In our initial research, our team had planned to design for users interested in hiking with little to no experience. We each conducted an interview with one such person, and then collectively complied our findings to create two personas for this user group. I personally designed the visual layout for these personas. We eventually chose to pivot to targeting people interested in urban exploration instead, as we found that there already existed a multitude of products and services aimed at our initial users. We conducted a second round of interviews, then created a user journey map outlining the story of a budding urban explorer to better understand the people we were now designing for.

Fig. I: Jacob Branson persona

The Research Phase (Cont.)

Key research insights included:

  • People want to try new things, especially with friends, whom they trust the recommendations of

  • People feel calm and decompress when spending time outdoors

  • People feel a level of trepidation when venturing into unexplored outdoor spaces for the first time

Fig. II: Urban exploration user journey map

Flow & Interaction Design

Our team knew from the start of our design phase that we wished to avoid the "liking" feature of social media, while still leveraging some classic features. We decided that in order for Locale to be a tool that enhances the exploration experience, we would need to minimize distractions within the app and encourage users to be more mindful of their surroundings. We developed a set of design requirements, then developed a storyboard to depict a potential solution. We refined this solution by laying its pieces out in an information architecture using Miro, which we later used to guide our low and high-fidelity prototypes.

Fig. III: Locale interaction design schema

Low & High-Fidelity Prototyping

With our design requirements and user research insights in mind, we began designing the low-fidelity prototype of Locale. Having settling on the "map and pins" design, we built our low-fidelity prototype to encompass key pathways including making a pin, accessing notifications, and changing the map settings. We tested these flows with potential users to receive feedback on their usability and intuitiveness. After assessing the feedback, we refined those frames into polished high-fidelity screens alongside all of the other possible screens in the app, and then built them into an interactive prototype using the Marvel tool.

Fig. IV: Locale low-fidelity prototype frames

High-fidelity frames depicting the pin feature within Locale

Reflection

The final iteration of the Locale application meets the design requirements our team set for it, but more could be done to improve on the design. The bright colors help mask some of the usability issues still present by leveraging the Aesthetic-Usability Effect, including clunky pin vs. menu interactions and the cluttered menu bar.

If we had pursued the project further, we would have given more time and thought to fixing these issues. By consolidating and pruning menu options, and making better use of visual queues to direct people to the application's key functionalities, the cognitive load people using the application faced would have been lightened.

Fig. V: Locale high-fidelity frames