Codey
UX designer

LuyHold Mobile App

A digital wallet for all those extra cards

Image alt tag

Overview

LuyHold is a digital wallet meant to organize and provide easy access to various cards such as member cards, loyalty cards, coupons, documents, and more. Each card can be accessed and scanned by a vendor according to its purpose.

Deliverables

  • Logo/Branding

  • Style Guide

  • Research

  • User flows

  • Sketches

  • LoFi Wireframes

  • HiFI Prototype

*Bolded items are deliverables I directly completed or contributed to.

Details

Client: LuyHold Founder: Arian Lopez

Time: 4 Weeks (May-June)

Role: UX/UI Designer

Tools: Figma, Jira, Adobe Suite

Project Initiation

The client's concept started out really vague, so it was hard to start imagining how this app would work and what it would look like. The idea needed to be focused and refined for us to begin designing the product.

We met with the client to understand the product and ask some refining questions. Some of the questions were:

  • What is the specific problem we are trying to solve that has led to this concept?

  • Can you describe two to three potential use cases? 

  • What features/components need to be included in the MVP?

  • What design or development parameters do we need to consider?

Getting these questions answered helped us to define the scope of the project, set expectations, and determine the deliverables.

User Flows

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product. This was also a great activity to help us see if we were understanding the client correctly. After a couple of revisions, we landed on three main flows that we would design for.

Exploring how a space can organize all the extra cards filling up your wallet
Sketches & Wireframes

Sketches

I started sketching out some ideas to get an idea of the form and function and layout some initial concepts quickly.

Exploring how a space can organize all the extra cards filling up your wallet

LoFi Wireframes

One of my teammates took the sketches I made and began developing them into lofi wireframes. I then expanded on these adding a few more screens to ensure we were presenting a complete experience.

Exploring how a space can organize all the extra cards filling up your wallet
Branding & Style

Logo, Style

Our client's main inspiration came from the Airbnb and Apple Wallet applications. A member of the team made sure to keep simplicity in mind when designing the logo for luyhold and defining the colors and styles for the app

Exploring how a space can organize all the extra cards filling up your wallet
Iterate & Refine

Initial HiFi Wireframes

With the lofi frames and style guide approved. We began applying the styles to get our initial high-fidelity wireframes. This was just the start. It took several iterations with the client to get to what he was envisioning.

Exploring how a space can organize all the extra cards filling up your wallet

Rapid Prototyping

Our initial screens were a great start, but there were still some very important UX and UI questions we needed to answer. We spent some time iterating within the team as well as with the client to get us to our final wireframes.

Clip of me modifying the prototype while on a video call with the client

Clip of me modifying the prototype while on a video call with the client

Homepage refinements

The initial design of the homepage featured a favorites section as well as a categorized section. The client preferred to do away with the favorites and just make all cards accessible by scrolling through. We wanted to keep the categories, so we pushed it down to the bottom and made it accessible by pulling the tab up.

We also gave the details of the individual cards that inform the user of what they are. We weren't able to design for all possibilities, so I created card forms for ID cards, coupons/loyalty cards, and documents, then created one more for all other uses.

Process of iterating on the homepage design. The last two screens are the final design.

Process of iterating on the homepage design. The last two screens are the final design.

Modifying the Card Scan & Access Flow

The client wanted to minimize the card scan experience as much as possible. We wanted to ensure that getting to the scan portion of the card was quickest experience, but still allow for the card details such as, expiration, activity, and more was easy to discover and access. After a few iterations, we got to a solution we could all agree on.

Iterations of the card scan experience. The last two are the final designs.

Iterations of the card scan experience. The last two are the final designs.

Dark Mode

One last thing the client wanted to explore was dark mode. We were able to invert the colors and create a dark experience giving the users the option to toggle between light and dark.

Exploring how a space can organize all the extra cards filling up your wallet
Final Results