SunnyPoint Project
1. Introduction
Sunnypoint was the original project since I first joined ActiveMedia company in June 2016 as an UI/UX designer.
What follows is a case study detailing my process and output.
User earns 1 point per 1 checkin time
User uses their current points to pay the bill
2. Overview
Sunnypoint is a point card system for mobile and tablet. Through this system, not only users can save point to purchase gift items for special life moments such as birthdays, weddings, anniversaries etc. Stores can also raise customer attraction rate.
Role:
UX Design
Interaction Design
Company:
Active Media, 2018
Website:
3. Process and Approach
Problem Statement
In an industrial country like Japan, busy people tend to have meal at convenience stores near their companies instead of hanging out with friends to enjoy lunchs or dinners. Realize a golden opportunity for stores to increase significantly their customer attraction rate, we introduce our new service called SunnyPoint for them.
User research
My project manager assistant and me started out the project by conducting an initial user research to find out how the target users usually buy meals. Moreover, we listed all the possible questions in buying action of Japanese officers and send them to our headquarter in Tokyo, Japan. At there, our staffs will collect customer answers and send back to us via email.
Affinity Mapping
My team analyzed the results of the survey and used affinity mapping to group related observations. This helped me uncover the pain points users encounter as they shop for gifts. With this in place, I had a better understanding about the needs of the target audience.
User pain points
The pain points uncovered are as follows:
- Users have difficulty finding nearest stores
- Users are concerned about the safety of their payment information online
- Waiting in line was a concern for users
- Coupon and discount are also mentioned in user wanted list
User flow
My team analyzed the results of the survey and used affinity mapping to group related observations. This helped me uncover the pain points users encounter as they shop for gifts. With this in place, I had a better understanding about the needs of the target audience.
Persona
Using the results of the survey, I created two personas that embody the traits of the target audience.
Persona 1
Persona 2
User Journey Mapping
After complete persona, we pinpointed main user activities, tasks, and user stories for both checkout users and staff role.
4. Design Explorations
Brainstorming and Ideation
When the user research part was done, I gathered all the necessary information and began to sketch. It helps get ideas out of my head and onto paper. Then, I discussed with my teammates and received some feedback for further plan.
High fidelity wireframe
Based on our user journey map and user stories, I created wireframes to express changes to the architecture of certain pages, and any additional elements we would need to create for the service to exist. The new elements were primarily the payment flow, a feature introduction mechanism, and gating our paid features within the app.
Visual design
After complete wireframe task, inputing font color and image to the application is the next mission . It must followed Active media theme, which are formal, bright, included two main colors are orange (#FF9A00) and green (#6DC900)
Mobile application was the first tagert because we already got an older version, just need a major update.
Onetap mode is a brand new function on our tablet, so this is still on a trial version for all stores.
Purchase mode already had an older version and this time it received a major update in UI.
This is two new function we developed recently, by checkout at our stores, users may received some gifts by spinning lottery wheel. Moreover, when checkout at their birthday, a congratulation popup will appear to share their happiness.
Those features are smalle but it target to user’s emotion. They need a surprise besides usual checkout actions.
Interaction design
Once we had landed on content, I came up with a few different mechanisms to deliver our product story. We had a lot of information, so figuring out the most compelling way to present it without overwhelming the user was the challenge. The metrics we used to make our decision were:
1. Users can find the information they are looking for
2. Users understand the offering
3. Users know how to purchase the service
The first mechanic was horizontal scrolling cards. Then, PIN button animation looks like floating button of google
The second mechanic was searching nearest store in a brand based on user’s current location
The third was a combination of vertical scrolling coupon tab and using coupon
The animation on One tap mode was simple, user input PIN from there mobile and tablet will show their current points and the progress to claim gift
Lottery function is appeared randomly in order to make a surprise for user
Prototype and user testing
I made these mockup into a prototype which you can find here:
>>> https://marvelapp.com/3jf1f8d/screen/45216498 <<<
Usability tests with this prototype uncovered a number of issues. The placement of past orders as a section on the cart screen made it difficult for users to locate their order history. Also, the progress bar on the tracking screen posed challenges for some users. I fixed these issues and proceeded with the visual design.
5. Reflection
Regarding Design Process
I learned the benefits of research methods beyond traditional interviews and questionnaires that can reveal insight people may otherwise not think of, or even be comfortable sharing.
Besides, design process plays a critical role. Sketches, wireframes, visual and interaction were four key points to create a good design project. Furthermore, they help you present your status to team and manager
Regarding Collaboration
Communication is key feature regarding to working with other departments. First, using abstract software is great to control design version. Next, I used zeplin plugin to output design for development team. Finally, I even created documents to present design work to QC team.
For me, these softwares help me get through busy days and really boost up my work flow.