• Home
• Case Studies
• About

Mobile App | User Testing

Taking Gift Cards Digital

Conducted user research and testing for a new app idea called Card Genie, resulting in a user-tested prototype designed to solve the problems that gift card users face.

• Read More

Who I am

I'm a Product Designer because I have a passion for understanding the problems of everyday people and figuring out how to solve them digitally in a simple and effective way.I'm based in Logansport, Indiana as I search for a design team that I can serve as a part of. My other interests include playing guitar, brewing craft coffee, and trying new foods.If you're interested in learning more about my work, collaborating on a project, or talking about a role that I could fill on your team, then please feel free to send me an email at [email protected] and download my resume.

• Download Resume

© 2024 Will Pancake, All Rights Reserved.

• Instagram
• LinkedIn

• Home
• Case Studies
• About

overview

The client and my role

Carstream is an up-and-coming automotive sales platform that focuses on providing the same services and peace of mind that you get with buying from and selling to a dealer, minus the dealer. The company is currently in the pre-seed stage of development with an initial website and app already built.Scope: Redesigning the browse screens (browse, search, and vehicle details)
Stakeholders: CEO, CTO, Project Manager
Duration: May 22nd 2023 - June 12th 2023 (14 days)

objective

The "why" behind the project

Going into this project, I had one objective in mind on behalf of the end-user:To make the vehicle browsing experience more engagingThe more engaged a user is while browsing for vehicles, the more likely they'll be to actually purchase one.

Research

Using adjacent innovation

When researching how to make the browse screen more engaging, I found myself intrigued with TV streaming services. I looked to apps like MAX, Hulu, and Netflix to see how they managed to organize their vast catalogs of shows and movies into easily digestible lists.All three apps seemed to have two elements in common:
- Lists of movies are placed in horizontally scrollable rows
- Featured movies are larger and include more details

Whiteboarding

Reframing the features

Inspired by the streaming services, I began to put pen to paper on how their innovations could be used in our app.To begin I made a list of the user’s needs for the browse screen based on the old app and current website. My objective wasn’t to create new features but to reframe the existing ones in a more engaging way.After listing the user's needs, I sketched out how the adjacent inspiration could be applied to meet them.

Further Research

Adjusting my approach

Based on the feedback I received, I needed to remove the featured content cards. This presented a new problem because now the screen felt very monotonous since it was just a bunch of rows containing vehicle cards. I needed to adjust my approach and return to the research phase.Enter Airbnb and its use of the tablist component on its explore screen! This approach uses vertically scrolling lists that can be toggled between via a simple swipe or tap.This explore screen is a prime example of the engagement phenomenon that I described at the start of this case: large imagery coupled with positive interactivity.

Whiteboarding

Reusing components

After listing out the users' needs, it became clear that the main ways to engage with this screen were through the search results themselves, and the filters that could be applied.To keep the layout consistent with the new browse screen, I kept all of the same components except for the tab list, which was swapped out for a row containing filter drop-downs.I chose to keep the floating action button that toggles the map view from the old search screen, as it was an effective implementation of the map view feature.

Iteration

Creating new problems

Reusing the same components from the browse screen, I created a layout resembling the search screen I sketched during whiteboarding and updated the map view with modern components.It featured a horizontally scrolling list of filter drop-downs. I figured this solution would work well to preserve space and eliminate an extra screen. However, what I didn't realize was the filter drop-downs created a new set of problems: excess scrolling and repetitive selection methods.After reviewing with my project manager, we determined that the filters deserved their own screen after all (like on the old screen!).

Research

Making filters visual

Now that I was back to square one with the filters, I decided to conduct more research to see how to handle a long list of filters. I decided to return to Airbnb for inspiration.As shown, they ditched the ordinary checkboxes, radio buttons, and sliders and instead opted for more visual versions of each selection method, which solves the repetition problem.Additionally, the entire list is contained in a bottom sheet featuring a fixed footer that has the clear and show buttons, which helps to alleviate the excessive scrolling problem.

Whiteboarding

Keeping it consistent

Once I listed out the users' needs and began to sketch the layout, I realized that the top part of this screen could resemble the preview card, which provides consistency from screen to screen.To reduce the amount of scrolling, I decided to divide the information into 3 tabs that could be toggled between. This provided separation of information while reducing scrolling.I decided it was best to keep the buttons in a fixed footer for easy access, but I wanted to reconsider them toggling a full screen.

© 2024 Will Pancake, All Rights Reserved.

• Instagram
• LinkedIn

• Home
• Case Studies
• About

overview

The client and my role

Carstream is an up-and-coming automotive sales platform that focuses on providing the same services and peace of mind that you get with buying from and selling to a dealer, minus the dealer. The company is currently in the pre-seed stage of development with an initial website and app already built.Scope: The vehicle pickup flow (the steps in between checkout and vehicle pickup)
Stakeholders: CEO, CTO, Project Manager
Duration: July 5th 2023 - July 14th 2023 (8 days)

objective

The "why" behind the project

Going into this project, I had one objective in mind on behalf of the end-user:To provide clarity to the vehicle pickup experienceWith an intricate process like this one, it's paramount the user knows what they're doing and why they're doing it, and it's my job to figure out how to show them.

whiteboarding

Starting with mobile

Since vehicle pickup takes place in person, the orders screen must be optimized for mobile use. To accomplish this I started the redesign with a mobile-first focus.An iPhone 14 has 390px of screen width, but inside the orders accordion where the content in question is there's only 326px of screen width — not much to work with, unfortunately.While listing out the user's needs based on the old screens, it became clear that my biggest challenge in this project was going to be keeping this design as compact as possible while maintaining usability. To do this I needed to take it one section at a time.

Iteration 1

Reusing existing components

The order details section was straightforward because I was able to use a pricing summary card from the checkout redesign and repurpose it here, creating a familiar pattern.I was able to reduce the size of this component by removing unnecessary information like the VIN and only showing the name of the line item and its price.Additionally, It was important that I accounted for what is and isn't shown to each user in this component (buyer is charged with the platform fee, seller isn't).

Iteration 2

Clarifying payment status

One of the most important sections on this page is the payment status, which has the role of showing both the buyer and seller not only where the buyer's money is but also why it is.I took a nod from shipping services like FedEx and UPS by using a linear status bar with all the details and dates at each status point. This ensures that both users know exactly where the money is and when they can expect it to move.Another integral aspect of this component is the tooltips. These tooltips help explain why the money is where it is and direct the user to an FAQ for any further clarification.

Iteration 3

Bringing attention to actions

There are three global actions that a user can take regardless of the step in the process that they're on: chat, view invoice, and get help.On the old orders page, the buttons for those actions got lost in the rest of the screen and needed to stand out more. I redesigned them with a primary fill and complementary icon.To account for the increased screen size on the desktop, I set up the component to stack the buttons vertically on the desktop and horizontally on mobile.

Task Flow 1

Communicating timing

I began by taking some time to establish all of the steps required of each user on a task flow chart. After doing this, it made sense to divide this chart into 2 sections, pre-pickup and pickup.During pre-pickup, the task burden is primarily on the seller and the buyer is waiting until it's their turn to sign the Bill of Sale.After consulting the CEO, I discovered that the buyer's funds must sit in the Carstream Escrow account for 5-7 days before being transferred to the seller. This means the Buyer could be waiting for a week for their turn to sign the BOS after purchasing the vehicle. It's paramount that this is communicated clearly.

Task Flow 2

Connecting the users

With the preparations done, the pickup section of the task flow chart is all about bringing the buyer and seller together to exchange the keys, a (hopefully) much quicker endeavor.The first step is finding a time for pickup that works for both users, one that will require careful consideration to ensure that a time can be found quickly and easily.From there, the remaining steps are completed on-site during the specified pickup time, which is why these screens must be mobile-friendly.

Whiteboarding

Making it dynamic

After establishing all of the steps in the task flow chart, I returned to the whiteboard to ideate how to best display them alongside the rest of the details on this screen.It made sense for there to be a progress bar that showed the users what step they were on and where that step was in the context of the pickup process.Below this progress bar would be a dynamic content card that showed the actions and instructions for each step. This ensured that each step was properly separated, clear, and had the necessary instruction.

Iteration 1

Verifying user identity

According to the task flow that I defined, the first step after a vehicle is purchased is for the seller to verify their identity. This is a step that Carstream requires all users to complete before keys can be exchanged, and the buyer already did it during checkout.Carstream integrates an online identity verification service from Plaid that uses your phone, so this screen needed to prepare the seller for that by telling them what they were about to do and why they needed to do it.For the buyer, this screen needed to communicate that there was nothing that they needed to do other than wait for the seller to complete their steps.

Iteration 2

Connecting the bank

The second step for the seller after verifying their identity is connecting their bank account for the buyer's payment to be sent to. Carstream uses Plaid to securely connect the user's bank account to the platform.Once the bank is connected using Plaid, the seller must select that account to receive payment and continue to the next step.For the buyer, this screen needed to communicate that there was nothing that they needed to do other than wait for the seller to complete their steps.

Iteration 3

Confirming the odometer

The third step for the seller after connecting their bank account is confirming the odometer. This step is crucial because if the final mileage doesn't fall within the range that the seller specified in the listing, then the buyer will be given the option to renegotiate the price or cancel the transaction altogether.After entering the mileage, the seller must provide their signature so that they can be held accountable if the actual odometer doesn't match their statement made here.For the buyer, this screen needed to communicate that there was nothing that they needed to do other than wait for the seller to complete their steps.

Iteration 4

Signing the bill of sale

The fourth step for the seller after confirming the odometer is signing the bill of sale.As described while explaining the task flows, the buyer's payment must sit in escrow with Carstream before the seller can sign the bill of sale, so this screen must communicate that to the seller while they wait to sign it.For the buyer, this screen needed to communicate the same message that the seller received up until the point when it's their turn to sign the bill of sale. At that point, they will be able to sign and move on to the next step.

Iteration 5a

Scheduling pickup

The first part of the final step for both users is scheduling pickup. The scheduling component needed to be designed such that the buyer and seller could easily and quickly find a date and time that works for both of them.I designed the schedule pickup card to allow the user to select a date and time and then send it to the other user as a request. To account for user error, any request can be rescheduled by the sender until the receiver responds to it.When receiving a request, the user can either confirm that day and time or reschedule it and send a new request back to the sender. If a request is rescheduled, it will be sent back and forth until a request from one user is confirmed by the other.

Iteration 5b

Picking up the vehicle

The final step of this process is picking up the vehicle. Once it's the scheduled date and time, the seller's screen will change to allow them to generate and enter a verification code that only the buyer can see. This ensures that each person is who they say they are and no fraud is taking place.Once the code is verified, the seller hands their phone to the buyer to sign the pickup confirmation to hold the buyer accountable for pickup in case anything goes awry.The moment that the buyer's signature is added, a member from the Carstream team will call both users to confirm that pickup has taken place and that everything is done. After that call, pickup is complete and the users can go their separate ways.

© 2024 Will Pancake, All Rights Reserved.

• Instagram
• LinkedIn

• Home
• Case Studies
• About

overview

The client and my role

Card Genie is a business idea inspired by my wife, Emily, who initially introduced me to the problems that she experienced with gift cards and her idea for a mobile app to solve them. It began as an exploratory product design project for this portfolio, but I decided to continue the project for my senior capstone in Ball State's Entrepreneurship Program. To see an update on where Card Genie is now, click the button below to visit the website!Scope: Research, design, and testing of a hi-fi mobile app prototype
Stakeholders: Myself, my wife, and the users that I conducted tests with
Duration: June 2023 - April 2024

• Visit Website

objective

The "why" behind the project

Going into this project, I had one objective in mind on behalf of the end-user:To simplify and enhance the gift card user experienceA well-designed gift card wallet app can lead to more gift cards being used, balances that are easier to track, and less wasted money for the consumers.

User Research

Using traffic analytics

To gain insights into the users of gift cards, I used Semrush to get an in-depth look at the traffic analytics of four of the most popular gift card websites: raise.com, cardcash.com, cardbear.com, and giftcardgranny.com.Using Semrush, I was able to view data on the traffic to each of those websites as well as information about the users creating that traffic. Click on the image gallery to the right to enlarge a handful of the statistics, charts, and graphs that I downloaded from Semrush.

Data analysis 1

Making connections

I analyzed the data that I downloaded from Semrush to connect the dots between the visitors of those four websites and the similarities that they could share. There was overlap in the demographics, socioeconomics, and behaviors of the usersAs shown in the gallery on the right, I was able to calculate some averages about the users based on the data from all four sites. For example, 52%-57% of the users were female, which averaged out to 52.25% of the users being female.

Data Analysis 2

Defining the personas

Based on the averages that I calculated, I created two basic user types. User A represented the majority of users, and User B represented the minority of users.Based on the previous example of 52.25% of the users being female, User A would be a female and User B would be a male. Another example is that 56.25% of the users are 25-45 years old, so User A would be 30 and User B would be 20.I chose to create the user types in this way so that I could directly target the majority of users, without ignoring the other users that aren't represented by the majority statistics.

Ideating

Listing the features

The problems with gift cards are that they're easy to forget at home, have balances that are hard to keep track of, and often go without being fully used. The features of this app should solve those problems in a way that simplifies and enhances the gift card user experience.The features listed are in no particular order, just the results of a brainstorming session on how to solve the problems with gift cards. After coming up with this list, it became clear that certain features are more important than others and should be focused on first.

Whiteboarding

Sketching the layout

The most important features of this app are uploading cards, checking their balances, and viewing their transactions. I sketched a wallet screen that would contain the card information as well as the button to upload a card to the app.Many of the other features in the list are all related to exchanging cards in some way, so I decided to group them all into one screen called Marketplace with each feature having its tab that the user can toggle between.The last feature on the list that I wanted to sketch out was the card uploading screen. I figured there has to be a way that you can scan the barcodes on these cards and upload them automatically, so I sketched out what that could look like.

Moodboard

Finding inspiration

During the ideation process, I was also thinking of what to call this app, and one of the names that I came up with was "Card Genie".This one stuck with me because I felt like it captured the purpose of the app, catered to the user personas, and was distinct from any of the existing competition.After choosing that name, I created a moodboard of images, text, and colors inspired by Genie from Disney's Aladdin movie.

Style Guide

Setting the styles

In the moodboard, I used the color picker to make color gradients from the image of the Genie. I decided to try using the blue as the primary and the gold as the secondary in the color palette.For the typography, I didn't want something as extravagant as the Aladdin font but wanted it to still represent that wispy character of the Genie. I chose Playfair Display for my title text and Lato for my body text.

User testing 1

Causing confusion

Using the prototype, I conducted my first round of user testing. In each test, I handed the prototype to the user and then observed them complete a set of tasks in the app that I would ask them to do.Based on my observations, the users struggled with the round buttons at the top of the wallet screen. For starters, they were uncomfortably small to press, and the users struggled to understand what each one did.Another pain point that I observed was understanding what the red text represented in each card listing on the marketplace screen.

Reiteration 1

Providing clarity

After the first round of user testing, it was clear that I needed to adjust the buttons on the wallet screen and the text on the marketplace screen.I increased the size of the buttons in the wallet screen and removed the transfer button because it's unnecessary when there's a separate marketplace screen. The goal is that the increased size of the buttons makes them more usable and understandable. I reworded the red text and added a buy button to each listing on the marketplace screen.New features added to this iteration include the ability to actually add and remove a card, giving the confusing buttons on the wallet screen a purpose.

User testing 2

Missing helper text

Using the second iteration of the prototype, I conducted my second round of user testing. In each test, I observed the user complete the same tasks as the first round, with the addition of adding and removing a card since that functionality was now present.The users understood what the round buttons did this round, so my change was effective. The discount text was also understood by the users.I received feedback after one of the tests that it would be helpful if there was some text on the remove card modal that reminded the user that removing a card can't be undone.

Reiteration 2

Giving context to modals

After the second round of user testing, I knew that I needed to add some kind of helper text in the remove card modals. If it was written correctly, it should provide the user with the right context to understand what they're doing:"Are you sure you want to remove this card? This action cannot be undone."I added matching helper text to the send card modal, which was a new feature added to this iteration to give functionality to the send tab of the marketplace screen.

User testing 3

Needing status updates

Using the third iteration of the prototype, I conducted my third round of user testing. In each test, I observed the user complete the same tasks as the first and second rounds, with the addition of sending a card to someone in their contacts list.The impact of the helper text in the modals was visible as the users had a better understanding of the action that they were taking in the modals.However, there was no visual indication that a card had been sent once that button was clicked and that caused confusion for the users. I needed to display some sort of message that communicated that the card had been sent successfully.

© 2024 Will Pancake, All Rights Reserved.

• Instagram
• LinkedIn