Project Type

UX research, UI design

Project Length

3 months

Tools Used

Pen, paper, Figma, InVision

Why create this app:
Transit card users struggle to keep track of their expenses and balances

Many people throughout Japan use an IC card on a daily basis, including myself. IC cards allow people to pay public transportation with a simple tap of a prepaid card on a scanner. At their core, they sound like an amazing daily convenience. However, one of the greatest problems with the system is that there is no modern application or online service to recharge each IC card on the network.

With the IC Charge app, I want to fill this gap in the market with an app that can handle balance checking and recharging for multiple cards, commuter passes, and family accounts. I conducted user surveys, market research, and drafted visual designs for the application. This application is a concept only and the design was unsolicited.

Some, but not all of the options Japan has for prepaid transit cards and their corresponding regions of validity.
Understanding what users will benefit from:
Through survey-conducted research, I could understand my audience.

Although I am a part of my target demographic, I still conducted research in order to be sure that I was keeping in mind the needs of people other than myself. Therefore, I created a survey and administered it to people who were both currently living in Japan and users of public transportation. Through these surveys, I learned about the key features that people would want and what their biggest inconveniences were.

For example, I learned that many people would not be interested in smart watch integration, so it's probably best that I don't make that a priority. However, they are very interested in using it to check stations and find out if certain cards are accepted near them.

What resources are currently available:
I conducted an analysis of two competing applications

I found two apps that had a similar purpose in the Japanese application market. The first is the Suica Mobile App and the other is SmartEX, a bullet train ticket reservation app. By studying the current market competition, I realized that there really is a need for a more wide-spread applicable transit card app that can handle both daily transportation as well as longer-trips, leading to bullet train ticket integration.

Mobile Suica

SmartEX

How I began brainstorming:
I created user flow sketches and wireframes to brainstorm ideas

In the mockups below, I mapped out what I expected the user flow to be, and organized which screens I would need to design. I imagined that a user would want to use the app quickly and easily on-the-go, which helped lead to the final product. I also planned out the necessary components for the task bar and brainstormed additional features.

How I created the prototypes:
I designed iterations of the project while testing it's usability

Using Figma, I was able to collaborate with potential users remotely and get very quick feedback on the positives and negatives of my design's user experience. These collaborations made a significant impact on the final product design.

Admittedly, the hardest thing that I struggled with in this project was the organization and design of the bottom tool bar. It's something that many of us use on a regular basis but rarely actually think about. Because I wanted to get this right, I relied heavily on feedback from others to be sure that things felt natural and intuitive.

The Solution Created

As an insider in my target demographic, I really did understand the needs and concerns of my users. They'll probably be rushing to catch the morning train on their commute and their main concern will be to swiftly recharge their card as they run up to the platforms.

The sliders on the main screen were a result of input from potential users. It's quick to use but safe enough to not worry about accidental charging. These amounts were copied from the card recharge machines at stations, so they are familiar to users. You slide, press the lightning bolt to charge, and then confirm the payment. It's simple, yet secure.

What I learned

As this was my first foray into the product design world, I had so much to learn through this project. I especially came to realize how crucial and how valuable my empathy can be throughout the design process. Being able to anticipate the feelings and thoughts of others is so important and I really benefitted from developing this skill.

What I plan to do next

In the future, with this project, I would like to be able to conduct some larger scale in-person user-testing. My sample set for the project was small and mostly remote, so that was flaw in the testing phase.

Also, I would like to continue to improve my UI design skills and return to the project to create more screens, such as the confirmation screen, and improve the visual hierarchy of the main screen.


I’m currently available for work!
If you'd like to get in contact with me, please use the form here
or send me an email at kristen@kgranieri.com.
Hope to talk to ya soon!