memo_header

me-mo

It's difficult for individuals to remember and document all the places they've gone to and want to visit, or revisit, in the future. Our app, me-mo, allows individuals to easily look back at relevant information of these destinations through personal categorization.

My Role 👩🏻‍💻 + 👩🏻‍🎨

I worked on a team with one other UX designer and a developer, and helped with the user interaction and user flow of the app. I was also responsible for visual design and branding, setting the tone of the user's experience.

Tools: Sketch, InVision, Lookback

Skills: storyboarding, wireframing, prototyping, user testing

Team: Melissa Ngu, Ed Ngai

Needfinding

Needfinding

Needfinding

Needfinding

Needfinding

My wonderful teammate, Melissa, went through a series of needfinding exercises that involved creating an itinerary for a friend visiting their hometown.

She found that many people struggled to find the name of a place they could not remember, even after using multiple search platforms. From these breakdowns, we deduced that: 

  1. Users need an easier way to keep track of locations they've been to or want to go in the future.

  2. Users need a better categorization system so that they can easily group and find these locations.

Rapid Prototyping

Rapid Prototyping

We then started to prototype ideas for what the different screens and functions the app might serve. We came up with two different prototypes:

prototyp1_transparent

PROTOTYPE #1:

Our first prototype was simpler in concept with fewer screens involved. Users could pin locations, or create their own location, and add them to personalized lists they've created.

PROTOTYPE #2:

Our second prototype provided more function as it gave users access to more information. They would be able to search for nearby businesses and locations, as well as create their own location and add them to their own lists.

prototype1

Once we got a better idea of what direction we wanted to go, we asked our peers to conduct a heuristic evaluation on our prototype. From there, we iterated on our design and built a higher-fidelity mockup:

skeleton

Visual Design & Branding

Visual Design & Branding

I worked on creating the illustration seen on the login screen and logo. Since me-mo is meant to be for more personal use, I wanted users to feel welcome when immediately opening the app with a scene of a location familiar to them.

Overall, my team and I wanted to keep the visual branding but friendly by utilizing line illustrations and pops of bright colors.

style

Style guide put together by my teammate, Melissa, for consistency as we worked on creating high fidelity wireframes.

User Testing & Redesign

User Testing & Redesign

User Testing & Redesign

User Testing & Redesign

User Testing & Redesign

We used Lookback for user testing so we could capture the reactions of our users while keeping track of what they were doing on the app. The main breakdowns occurred when users tried to add a new location: 

 

  1. Users could not find the location or list items they had just created.

  2. The button to add a new location was obscured at the bottom of the page, forcing users to scroll all the way down.

  3. Users lacked feedback and confirmation after adding a new location.

We chose to address these issues in our redesign, which involved including a confirmation overlay, and increasing font size and color contrast for legibility. 

We chose to address these issues in our redesign, which involved including a confirmation overlay, and increasing font size and color contrast for legibility. 

me-mo screens

Thanks for reading!

treehouse

 

Take a look at my other projects:

Projects

me-moUX & Visual Design

CookbookUX Research & Design

Illustration & BrandingIllustration & Animation