Group 237.png
ezgif.com-video-to-gif-3.gif

A Social

Finance App 

Meemo is a secure, AI-powered social finance app where your digital wallet meets your everyday life with automatic rewards. 

Background

About Meemo
14.jpg

Meemo is a layer on top of your financial life, created to delight users with automatic AI powered rewards, modern peer-to-peer sharing, and personalized insights based on your transaction and purchasing history.

Meemo inherently empowers everyone to have positive experiences with their money and with one another. If you’re a surfer who loves sushi, a programmer who goes hiking, a yoga teacher who leads a vegan lifestyle, or anything in between - there’s a meemo for you!

Being at Meemo

Meemo is the birthplace of my passion for UX design. I joined the team when it was formerly known as Fingo, back in November 2019. It was a small, agile, and awesome team headquartered in San Francisco, CA. I was welcomed into a team of 3-4 designers and 15+ powerhouse Software Engineers and some awesome Product Managers. 

Our website ⇣

Product Designer

My role as a
6.png

✸ Work in a very agile small startup environment with a team of 3 designers.

✸ Understand and solve complex problems to give our users a sense of peace and provide delightful experiences

✸ Design simple, easy-to-use flows and experiences that delight our users

✸ Partner with PMs, engineers, and copywriters across the company to oversee user experience for products and features from conception to launch

✸ Develop deep empathy for our customers and translate both qualitative insights and quantitative data into creative ideas and informed design decisions

✸ Prototype and test interactions. Iterate based on findings and feedbacks.

✸ Cultivate a creative design process that is built on inclusion and strong cross-functional collaboration.

✸ Provide and seek feedback from other designers to always push the bar for quality

✸Contribute to high-level strategic decisions with the product team

  

Selected Projects

2020 | V1

Group 237.png
ezgif.com-video-to-gif-5.gif

Connections

Connections allows users to link their bank accounts and other services so they can view their financial histories from selected institutions.

What I did:

Created the entry point from Profile, designed the Connection landing page's UI and UX all the way to the user flow that allows users to link their bank accounts through Plaid. 

Timeline: 2 weeks

Date: September 2020

Status: Shipped

PROCESSS

Iterating on all

possible solutions

Connections Process

My process is always about exploring many different flows and solutions. I iterate at least 4-(infinity) to make sure the design solves the problem we're having and that users will have a delightful experience when connecting their accounts.

After going through multiple design iteration, I then confide with my design team to ask for feedbacks and other suggestions. Getting feedbacks and critiques is an important part of my process because it lets my team in on the loop on my process and I get to communicate with them the problems I'm solving so we can all solve it together.

Group 237.png
ezgif.com-video-to-gif-3.gif

WEEEKLY REVIEW

Weekly Review is my first ever feature I've worked on at Meemo. This feature is a compilation of users' transactions and highlights from their past week. Each screen features the top transactions and other interesting patterns and insights we analyzed from users' data. The experience is in an Instagram/Snapchat format which allows users to browse through each content in a more digestible manner and in an experience they're familiar with.

What I did:

Worked on the UI/UX from end to end (research, ux, ui, illustrations, and all the way to a shippable state, and created marketing assets for feature releases)

Timeline: 1 year (ongoing)

Date: January 2020

Status: Shipped

Additional Features: TBD

Screen Shot 2021-03-15 at 11.16.12 PM.pn

PROCESSS

DESIGNING AROUND DATA

When designing the Weekly Review, I was faced

with many challenges around data. The main goal of the feature is to present user's transactions throughout their week/month in a visually compelling way and in the most digestible way possible...like an instagram story or snapchat.

As we started creating the screens to shape the general narrative and experience of the feature, we  saw areas in which the user's might not find interesting. We tried many iterations and different data trends to present to the team in hopes of finding the best "top ____" to show. 

After having an initial set of screens to develop, the main challenge came to be on how to present it in a way that doesn't seem like our existing UI.  I had to think outside the box in order to produce something that is dynamic, fun, and clear while still designing under the brand guidelines.

I started with laying every information and cases possible to create rules and guidelines around the amount of data we can present in each screen. Sometimes there was an overflow from user's who spend more money and then there was a scarcity of data from the one's who are a bit idle financially.  

Designing for different kind of users was a big challenge that we had to work together to find solutions. I worked very closely with our data science and engineering team to solve these problems and together we were able to produce an experience that is delightful and screenshot-worthy.

Group 237.png
ezgif.com-video-to-gif-6.gif

WALKTHROUGH

Walkthrough allows users to explore the app and guide them into navigating certain features before using the app. I configured the UX so it shows users where to access their transactions, activate versus mode, how to send a meemo, how to see the meemos they sent and received and how to access the money map.

What I did:

Worked on the UX from the UI elements a designer from my team created. 

Timeline: 1 week

Date: August 2020

Status: Shipped

Additional Features: New walkthrough for new home screen and new screen designs

PROCESSS

DESIGNING FROM A DIFFERENT PERSPECTIVE

A designer from the team designed the walkthrough and created some of the components to let the users know our key features. However, in this problem, we needed to design a solution and help users navigate through our app after onboarding. I then took a different approach and used some of their assets to produce a version in which each pop-up highlights the features while directing the users on where to go/click. This helped new users to be familiar with the different areas in our app in which the can explore more about their finances and other secret features.

Frame 1685.png
MY VERSION
DESIGNER B
Group 237.png
ezgif.com-video-to-gif-2.gif

MONEY MAP

Money map allows users to break down their transaction history into 3 main categories: Income, Expenses, and Transfers. From there, the feature breaks down each layers by categories, merchants, and all the way to the individual transactions made within that layer. 

What I did:

I did the main landing page that shows the 3 main categories and added details to the layers to show users how many transactions, categories, and merchants are within that layer. I also refined the UX in order to link the whole experience back to our search results by way of creating an entry point for the merchants in the final breakdown stage.

Timeline: 1 month

Date: December 2020

Status: Shipped

Additional Features: TBD

Frame 74.png

PROCESSS

COLLABORATION

MM 12

MM 12

MM 10

MM 11

MM 9

MM 8

MM 7

MM 6

MM 5

For Money Map,our engineer, another designer, and I collaborated together to elevate the UI and UX of this product. In the beginning, we did a lot of iterations on how to frame the breakdowns of transactions and figure out how to group the information in each screen. Designer B then framed it in colorful sections (see MM: 12-13) and I added details of information that lets users see how many transactions, merchants, and categories are within that screen.

After many more iterations we got ready for presenting it to the team and stakeholders and I then designed the landing screen that shows the 3 main categories: Income, Expenses, & Transfers which aligns with the rest of the design of the other screens. We also added our transaction cards to help users navigate their way to our search page.

I also designed the pop up, icon, walkthrough, empty screens, and other cases to make it shippable. 

My main goal in any project is to work on it end to end so it can be a product that ships and delights our stakeholders and ultimately, our users. 

What I'm working on

2021

On the last months of 2020, I worked on many areas of the app to prepare for our V2.

I improved the experience of key features starting from sending, custom meemo, connections, and all the way to the home screen and all the other experiences that need a refresh.

Since meemo has grown in the past 1.5 years since we started, we have to make room for our growth and new features. The design team of 4 (2020) made a tremendous effort since last year to build a design system that is scalable, cohesive, and more versatile. This year, we are working together more collaboratively with our developers to refresh each screen and elevate the entire experience. We also added more efforts on our UX research to guide our decisions in making these new designs.

My role allows me to have a heavy hand on the entire UX, from audit to the total re-design of each screen. Supported by another designer who helps me create screens with the proper components in order to bridge the gap between design and engineering, we're working swiftly together to give Meemo the fresh look it deserves in order to highlight the new product and features we've created last year.

Group 237.png
ezgif.com-gif-maker.gif
Frame 1686.png

Reflections

& Lessons

You can never have too much iterations. ✨ Iterate ad infinitum!

Design system is essential to move projects faster for greater consistency and usabiity. 🙃

Always update your team about the new tweaks and projects you've been working on, otherwise they might think you've just been watching anime.

You don't always have to re-invent the wheel in everything. Know what already works, if something doesn't work, then that's when you look for other ways or perspectives where it can work.

If you're not using your daily apps and observing the UI & UX, are you really a UI/UX designer? 🥴

Don't spend too much time on perfecting a high fidelity mockup, present multiple wireframes, iterate fast, solve problems better.

Name your projects, own it, stunt your skills, let people know what you did in that feature! Ownership means accountability and proper credit 💪🏼 

Do not do Soft UI please. Save yourself the trouble of applying 3 variations of drop shadows, 2 types of layer blur, and 5 color palette for one component. 😭

If your engineer hasn't responded to you about the project updates, file a bug on GitHub and tag them, that'll usually get their attention. 😗

Remember when they said to name your layers on Photoshop? Well, it's more crucial to name your screens and components on Figma. 😘

Iterating on user flows can be mentally taxing, make sure to take breaks and have snacks nearby. 😅

Take it easy on yourself. 

Take breaks.

A rested brain is helpful in generation the creative juice that will give the best roi for your creative process. ❤️