Reco

Designing an End-To-End ios App for saving & sharing
recommendations between friends.

Project Type
  • Independent Project
  • UX Designer
Tools
  • Figma
  • Optimal Workshop
  • Google Maps Platform
  • Maze
Methodology
  • User Research
  • Interaction Design
  • User Interface Design
  • Visual Branding
  • Prototyping
  • Usability Testing
Duration
  • 80 hours
  • 3 weeks
  • March 2023
Jump ahead to a specific section
case study contents
Project OVERVIEW →‍Research & Insights →‍Persona →‍Feature Prioritization →
Information Architecture →‍Usability Testing →‍Visual design →‍final prototype →‍
Reco is in the product development stage
Project background
Reco is a collaborative tool used for saving and sharing location-based recommendations between friends. Users pin points of interest to their map and create curated collections based on personalized categories. Users share their pins and collections with friends in-app or through shareable links.

As of early 2023, Reco is in the product development stage. It's back-end development is nearly ready to be integrated with the front-end. This project is a proof of concept focused on applying effective UX principles to guide the future direction and launch of the minimum viable product (MVP). The project team includes my collaborator and stakeholder, a software developer, and me, in the role of the UX designer.
Design constraints are opportunities disguised as limitations
reflection
As a design exploration for a new product launch, I approached this project with an open mind. I understood there were technical constraints to consider, as well as key assumptions to test. I was excited by the possibilities but apprehensive of the various directions the design could go in. Reflecting on the design process, there were several challenges I encountered which will be addressed in this case study.
Google Maps Platform

The Google Maps Platform provides an API, which will be used to power Reco's location services and map interface. Because of this technical requirement, I would have to work within the technical design constraints of the platform.

Team Work

I collaborated on this project with a software developer, which required a high level of collaboration to ensure mutual success. It was critical to our workflows to set clear expectations for the project scope and to define our respective roles.

Product Market Fit

The app's concept and core features are not wholly unique. The questions I kept asking myself were: How do we distinguish Reco from its competitors? What problems can we solve better than other products?

Information Architecture

As a proof of concept, I was starting from scratch. I needed to understand users' mental models to organize content in an intuitive way. Due to scope, onboarding was deprioritized for  in favor of focusing on the app's core functionality.

Gain research insights to inform the initial design decisions
Methodology
I began my research by expanding my topical knowledge of word-of-mouth marketing, which provided insight into the perceived value of peer-to-peer recommendations. I reviewed industry research related to consumer psychology and factors that influence consumers to make purchase decisions.

To complement my topical research, I did a competitive analysis of both direct and indirect competitors. As a user of Google Maps, I was familiar with its features, but this was an opportunity to assess its strengths and shortcomings objectively. Given the Google Maps Platform would power the interface, in-depth knowledge of its features would prove valuable. I also studied other existing products that had similar concepts to Reco to draw inspiration from.
Ultimately, the core of my research was a series of one-on-one interviews with 6 participants; all of whom identified as individuals who like to travel and seek recommendations from friends when going to new places. Below are 4 key research insights I derived from affinity mapping and the initial design decisions they informed.
Exchanging personal recommendations provides a sense of validation and shared experience.
Users perceive recommendations from peers as a trustworthy and reliable source of information. Not only were participants interested in receiving recommendations from trusted friends, they were eager to share their own. Accessible Share features would be core to facilitating this exchange, leading to greater user engagement.
While different methods are used for planning travel, Google Maps is the most commonly used tool for navigational purposes.
Users use mapping and location services, like Google Maps, as their primary method for navigation and utilize the Save Location feature to record points of interest. Based on this insight, it can be assumed users will have familiarity with map interfaces and its inherent components, such as locations, pins, compass, and the search bar.
Logistics planning is a challenging aspect of travel. Keeping track of points of interest while on-the-go can be a pain point.
Users struggled with organizing points of interest due to inconvenience and manual processes. The more recommendations a user has, the more difficult it is to keep organized. A systematic tagging feature paired with the ability to create collections will help users categorize and organize their saved places.
While travel is a major use-case, there are other instances in which users seek recommendations as a source of information.
Users value personal recommendations for decision-making purposes. Users felt affirmed when using recommendations from trusted peers for important purchases or commitments. An inclusive design approach will help expand Reco's user base and drive more engagement.
I like getting advice from someone with first-hand experience that I also have a connection with... It's validating knowing the recommendation is coming from a person that might have similar taste, values, and beliefs as me. - A.L., Interview Participant
A clear persona emerges
user needs & motivations
The culmination of my research revealed a clear persona. I gathered user traits, goals, motivations, and needs, and I integrated them to form a primary persona: Emilia Lee, The Savvy Explorer. Throughout the project, I referenced the persona to gut check whether the design decisions I made aligned with user needs.
Prioritize Reco's key features and basic interactions for the MVP
Product roadmap
My collaborator and I agreed to focus on Reco's key features and basic interactions for this iteration of the design. We recognized the importance of getting the basic functionality in place before exploring more complex features. Below is our feature exploration and ideation, including the specific features addressed in this project (highlighted in white). The remaining Priority 1 features are needed for the MVP but will be prioritized in a future iteration due to time constraints.
Plan information architecture to determine Reco's data organization and content structure
Card Sorting study
As a proof of concept, implementing an intuitive and well-organized structure for users to seamlessly flow through the app was crucial. Given the high familiarity users had with Google Maps, I concluded users' mental models would help them navigate the product intuitively, as long as the design didn't deviate from commonly used terminology and UI patterns. I conducted a hybrid card sort study with 13 participants. Below is a summary of the major findings from this study, which validated these assumptions:

11/13 Participants sorted the customized collections title cards into the “My Collections” category.

‍This validates users' understanding of the Collections as a method of grouping places. Since participants successfully differentiated between cards belonging to the “My Collections” and “Map” categories, both are distinct to users.

12/13 Participants sorted  “Pin” into the “Map” category, while 4/13 sorted  “Bookmark” into the same category.

This indicates user mental models have a strong correlation of “Pin” as a map element. As a method of organizing points of interest, "Pin" is likely more intuitive to users.

11/13 Participants correctly sorted the points of interest cards into the “Map” category.

This result supports the assumption users have familiarity with using navigational tools, such as a map interface, to identify points of interest.

Participants had low agreement on the category for “Wish List,” “Want To Go List,” and “Places I’ve Been”.

The most common category these were placed in was “My Collections,” so this content should be nested within this category accordingly to adhere to user mental models.

Sitemap
Predicated on the card sorting results, a basic sitemap was created to visualize the structure of the app. This was the blue print for the app's navigation and outlined essential pages and content which would be accounted for in the design.
Interaction Design
Documentation was made to showcase how users would flow through the app to complete their key tasks. From the perspective of the persona, I identified the specific scenarios and decisions points the user would take to achieve their goals.
User testing reveals usability issues with the first design iteration
Test Parameters
I built a simple prototype with mid-fidelity wireframe screens in Figma, focusing on the key user flows: Add Pin, Create a Collection, and Share Collection. Maze was used to moderate live usability testing with 6 test participants. Below are 4 selected findings and the design iterations they inspired.
Users wanted to perform actions directly on the pins and sought alternate paths to complete certain tasks.
Users had the correct mental model to complete the task of adding pins to a new collection but made slips in the process. They first tried  directly from the pin modal.

The CTA button on the pin modals was iterated on to enable editing. Tapping the Edit Pin button opens a menu with quick actions.
Users highly value the ability to tag and filter as a method to stay organized.
Users emphasized the importance of tagging and filtering. Users wanted to add detailed tags to their pins and collections.
‍
Complex tagging and filtering capabilities was initially deprioritized due to scope. However, because it was such a widely requested feature, a new field for tags was added to the new collections form.
When sharing a collection, users first tapped the meatball menu on the collections cards before navigating to the specific collection.
Due to limitations with the prototype, the meatball menu was not interactive. Given the frequency in which users tapped this element, I added this interaction to future iterations. A menu modal with quick actions now slides in from the bottom of the screen.
Users hesitated before selecting the Collections icon in the navigation bar when prompted to create a grouping of pins.
Users often hesitated before navigating to the Collections screen when prompted. To address this issue, the Collections icon was redesigned to include multiple pins which is more closely associated to the labeling.
Visual design elements are applied to create high-fidelity wireframes
Google Maps Platform
The Google Maps Platform's API would be the provider of the map and location services. While this inevitably had inherent design constraints, I also thought it was an opportunity. Assuming users had pre-established mental models for Google Maps (or related apps), the familiarity would assist users during onboarding. This was validated during user interviews, since all users discussed using Google Maps as a navigational tool.

Since I also use Google Maps, I was familiar with the map interface and its navigational elements. However, I had not previously used the Google Map Platform, nor did I know what style customizations were possible. To stay within scope, I focused my efforts on designing the map interface. I managed the map styling in Google Cloud Console, adjusting the color scheme and map features.
brand identity
Developing a consistent brand identity helps users resonate with the product. Since there weren't pre-existing brand assets to work with, I brainstormed the key brand values with my collaborator. We selected: Trust, Collaboration, Curiosity, and Exploration. We felt strongly these encapsulated what Reco aspired embody. Using these values as a guide, I created a style tile which included logo, color palette, typography, iconography, and UI components; all elements were applied to the final design.
High-Fidelity Wireframes
I created multiple iterations of the high fidelity wireframes, swapping between various color and component styles until landing on a cohesive, simple, and visually pleasing set of final screens, which were used to build the final prototype. Below are highlights of design decisions I considered and their rationale.
view High-fidelity screens in figma →
blue Accent hueS
The color palette's secondary color was a rich True Blue, which was meant to be an accent. After applying to the interface, it was too bold on text compared to the primary hue.
True Blue was applied sparingly to the logo and pin icons but was removed from text.
Tags
Based on findings from usability testing, tags were vital to users struggling with organization. In the initial exploration, the tag labels looked too much like buttons.
Increasing the corner radius made the tag labels more distinct. The color scheme was also updated to create further contrast, so both elements were more distinct.
Collection Cards
In usability testing, users were inclined to tap the meatball menu before the collection. The first version of the design didn't have visible touch targets.
A light blue background added to the meatball menu made the touch target more salient. While subtle, this indicated to users that tapping the collection title would have a different result than the menu.
Map pins
The unfilled pin is meant to indicate the selected place has not been pinned. However, due to the map's color style, the unfilled pin was lost in the background.
Filling the outside area of the pin with Azure, while keeping the center circle unfilled provides more contrast to the pin, making it visible against the map background. The center circle still conveys the intended meaning of unpinned versus pinned.
Wrap up this design cycle and plan for the next
Final Prototype
As the project came to a conclusion, my final deliverable was an interactive, high-fidelity prototype. I added the iterations to the prototype and handed off my wireframes, design files, and the prototype to my collaborator, whose task now was implementation.
View the Final Prototype in figma →
Next steps
While this design cycle has come to an end, I'm looking forward to planning for how the design might be improved for the next iteration. These are my next steps for when the initial build is completed:
  • Conduct another round of usability testing. I want to validate whether the design iterations effectively addressed the usability issues that were identified in the first test.
  • Dedicate a design cycle to developing the tagging and filtering features. This came highly requested by interview and test participants.
  • Explore adding an onboarding flow. This feature would educate users on how to use the app before rolling out the MVP in a live environment.
SUE HUA 2023
Linkedinsuekuenhua@gmail.com