Lin Yong Qian

Project aim: to help people withdraw money and finish payment in the convenience store

Overview

This project is a mobile app we built for a online and offline payment tool that explored the withdraw cash and offline payment functions for users. Our team played around the idea of imaging cash as a trade target based on online payment and NFC technologies. Our design language attempted to reflect the sense of style of the demographic who were more likely to be attracted to such shopping experience.

  • KEYWORDS:
    Mobile UX/UI, iOS App, Persona, Storyboard, Mood board, Design Language, Wireframing, Visual Design, Prototyping
  • Released:
    24 february 2016
  • MY ROLE:
    UX/UI Design Lead, collaborating with 7 other designers
Image

Identify Problem

In China, most people are queuing outside the bank for a very long time to withdraw money, it wastes time for lots of people who are eager to deal with personal things, or some people forgot to take wallet when they are outside to pay money, but there will have to take some time to back home or find an ATM nearby, or when some people are drunk, they need a convenient way to get money as soon as possible. So based on these scenarios, our mobile app to help people get money was born.

Brainstorming

With these findings in mind, we started our second research cycle. The goal of this cycle was to produce a set of potential product concepts informed both by our findings as well as initial rounds of user testing. While exploratory research had identified general breakdowns and opportunities, we needed to put actual product concepts in front of users to gain a better understanding of whether the need was genuine, and whether the solution was sufficient. We started by brainstorming solutions that would address the needs identified in our findings. Next, we researched their features to identify areas of high potential. Finally, we developed product concepts that contained the highest-potential features and evaluated them with quick-cycle user research.

Inspired by our key findings from exploratory research, we generated dozens of potential design solutions.While we initially brainstormed product concepts individually. We found that many more solutions were discoverd in listening to each other present.

Storyboard

We created a simple storyboard to illustrate their ideas of feature for the app.

Wireframing & Iterations

The interface design begins with quick sketches of the key interaction to illustrate user experience. We had several iterations of the paper prototypes within the group. It helped us consolidate the initial conception and communicate within the team One key challenge was how to simplify the user's process of binding cards and allow users to quickly complete payment. Our solution is to allow the user to bind bank card when registering, so that the task can be completed in such an express scenario in convenience stores.

Design & Iterations

We incorporated our design language to our wireframes and created our visual interfaces. We fine-tuned the details according to the iOS Design Guidelines to make sure all margins and clickable areas are appropriate.

Final Design