.png)
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.
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:
Getting these questions answered helped us to define the scope of the project, set expectations, and determine the deliverables.
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.
I started sketching out some ideas to get an idea of the form and function and layout some initial concepts quickly.
One of my teammates took the sketches I made and began developing them into lofi wireframes. I then expanded on these adding the card details screen and add new card screens.
A member of the team developed a style guide and a logo for the app inspired by apps like airbnb and apple wallet.
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.
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.
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. I wanted to keep the categories, so we pushed it down to the bottom and made it accessible by pulling the tab up.
I also created a visual language to identify the different types of cards. 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.
.png)
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, I landed on a solution that we all agreed was simple while still allowing the user to get more detail if needed.
.png)
We landed on a design that the client was very impressed with. We documented the designs and interactions and sent the client the completed files.
"Team.... this is just amazing... I can't truly express how cool the whole thing looks to me... No more changes, none... this is the one!"