About Cherry Credits
Cherry Credits is a Global Micropayment Solutions Provider, offering the world's first Unified Global Virtual Credits (UGVC). In addition, Cherry also publishes and operates web and mobile games in the SEA region, namely Philippines, Thailand, Malaysia, Singapore and Vietnam.
Cherry Credits consisted of two online portals:
- Main website: The public facing website (cherrycredits.com)
- Cherry Exchange: The personal electronic wallet which allows for top-up, purchase and redemption of digital content and virtual credits.
Project Summary
- Research, planning, visual design and prototyping were done from scratch.
- Complete website overhaul and makeover based on user input and data.
- Prototyping for ease of inter-department communication and execution.
The Objective
To revamp Cherry Credits websites integrating the latest UX and UI research and technologies so as to improve sales and user acquisition and retention.
My Role
Aside from my primary role as a front-end developer, I also worked with Lead Designer and Head Creative Content Producer on product design - User Experience (UX) and User Interface (UI) of this project.
My main aim was to learn and identify user needs before even starting on any form of work. This was a new concept to the management and we convinced them to do it.
Main Tasks
- Customers Insights
- Gather data about existing users and learning about competitors
- Building the Project Vision
- Gathering stakeholders requirements and aligning it with company goals
- Planning and scope definition
- Go through existing flows and implementations; then suggest improvements and optimisations.
- User interface & Experience
- Create and iterate on concepts, wireframes and prototypes with a focus on user-centred design thinking and optimal usability.
- Coding of front end architecture
- Primary coder for the project
- Interface with designer and developers
- Ensure everything works the way it was envisioned.
Design Process
The first step of the design process started with dialogues and interviews involving the stakeholders. We believed this to be crucial to get everyone aligned with the company's vision, direction and goals. Thereafter we focused our research on user behaviour as well as our competitors.
After analysing these insights, we worked as a team to plan and conceptualise the solution, focusing on the user journey, user flow and wireframe. From this we went into production mode, integrating design principles such as contrast hierarchy and feedback, brand attributes, voice and tone; and user interactions.
Kick Off
Stakeholder Interviews
CEO, COO, VP
The stakeholders, in this case, were our own Head of Departments. Though they have a common goal to make the new website better, each of them has a specific interest in regards to their role.
- CEO:
- Interested in sales and profits
- COO:
- Interested in user experience
- VP Business Development:
- Interested in merchant/partner acquisition and retention
Pain Points
-
The site does not look secure
- Broken Links
- Outdated look: cannot attract millennials who are the main customers
- Non-unified look
- Too many font sizes
- Small size fonts make it illegible
- Too many ‘one-offs’ components
- Not compatible with modern browsers
- Non-mobile responsive
- Slow loading (assets were not optimised)
- Confusing. New users are unsure how to do a transaction
- Not user-friendly. Unable to seamlessly find relevant games information
- Top-up methods were not catered to individual users (Not personalised)
- Users were not able to suggest games and top-up methods
The Challenge
Defining the Goals
High-Level Goals:
- Create an integrated design system & language; to address all user types visiting the website.
- Merge the two online portals into a one-stop solution for users.
Secondary Goals:
- Increase traffic (both existing and new users and merchants)
- Revamp and improve UX journey and the UI (help users reach their goal faster)
-
Ensure promotions and news reach the users
- Find a way to attract users to check the site regularly
- Find alternative ways for merchants to push their sales.
- Make everything responsive
Key Metrics
Our number one key metric was to convert public users into paying customers. We wanted to improve this by at least 5%.
- Main Key Metric (Measures the main goal)
- Convert public users into paying customers
- Secondary Key Metric (To achieve Main Key Metric)
-
- Shorten the number of clicks to complete a transaction
- Increase the overall satisfaction users get from the website
Discovery
To gain the best possible insights, we had to target both current and potential users. Stakeholders may have their own goals and requirements but we needed to align them all with existing data and research findings of users' opinions, expectations and needs.
Data
We referenced data from Google Analytics since we had it in place:
- Device Category:
- Desktop - 85%
- Mobile - 13%
- Tablet - 0.85%
- Most visitors come from Philippines > Indonesia > Malaysia > Singapore > Russia
- Most of the traffic went to a particular game page
- Most users landed on the homepage followed by that page
- 75% of social media came from Facebook. Expanding brand awareness to Instagram could be beneficial.
Competitors
We did a general analysis of competitors in a similar industry to compare and see if we can improve further.
Spot repeating patterns
- Big Hero banner set in an automatic rotating carousel
- Prominent Search
- Links to best selling products/service highlighted
- Signup + Login + Language/region located top right of screens
- Payment Channels/Partners featured near the bottom before footer
| Steam | MOL | Offgamers | Cherry Credits | |
| Login / Sign up | top right | top right |
|
|
| Language / Country | top right | top right |
|
top right |
| Main Banner |
|
|
|
|
| Secondary Banner |
|
|
|
Not present |
| Navigation | top and left | top and bottom | top and bottom | drop down menu (hidden), right middle and bottom |
| Support | top | top and bottom | top side left, top right '?‘ and bottom | middle right under connect and exchange, bottom |
| News / Trending / What's Hot |
|
|
after main carousel banners | middle bottom |
| Promotions |
|
|
|
|
| Social Media |
|
|
|
|
Users
Identifying existing base plus potential users
Cherry credits users are mostly aged between 21 and 35, with an overlapping secondary set between 26 to 30. Interestingly the tertiary bracket consists of a younger generation between 13 to 20 years old.
Analytics also reveal they are mainly male gamers.
A large portion of the users is from developing countries. Many do not have direct access to credit cards and thus chose to purchase credits through other methods instead.
- Age Groups:
- Mostly aged between 21 to 25
- Secondary bracket: 26 to 30
- Tertiary: 13 to 20
- 82% Male
- Philippines > Malaysia > Vietnam > Indonesia > Singapore > Brazil
User Interviews
User interviews are a core user experience method. We talked with 4 users (2 existing and 2 potential customers) and sent out a survey to 4 more (a mix of existing and potential customers).
The results brought enough data and inputs to generate concepts and hypothesis.
Interviewed Audience
The interview sample took into account men and women aged from 20 to 36, inserted in the economically active population of the city of Manila, Philippines, and with different gaming habits.
The interview took less than 15 minutes and included topics to get to the core of what users were trying to do and what their problems were.
Example:
- What is your current favourite game?
- How often do you purchase game credits?
- What prompts you to purchase credits?
- What kinds of incentives would make you spend more?
Many of the interviewees were confused about the steps of purchasing game credits.
“Not sure how to top-up
“Why this game can top-up directly on the website and some must go to another website?
Target Users
After referencing the data from GA and getting insights from the Marketing department, we decided on our target users.
- Generation Y
- Millennials
- Teenagers
Personas
Based on information about our target audience, we created 3 personas, inclusive of their user journey.
Surveys
Get the survey form from Waiyee and highlight results and findingsPlanning
User Journey
The feedback gathered helped us in making an affinity diagram with everything we collected.
Customer Insights
The result was seven point-of-view problem statements that we decided to design for.
- A new user needs more information about Cherry Credits because they need proof of credibility.
- Existing user wants to login to their account and do transactions. They want a straight-forward fuss-free solution.
- All users want to browse games, top-up methods and on-going promotions/events at any time.
- Potential paying users need a way to get in touch with Cherry Credits in order to execute a transaction.
- All paying users need to stay up to date with their transactions information. (because they paid for it)
- Business users want to know how Cherry Credits can complement their business
- All users want to read an FAQ to be assured
Using this list we came up with a site map suited for every journey.
Onboarding
Cherry Credits previous home page was confusing. It needed to present more information about the business. Users were bombarded with banners and game images. The lack of information caused confusion and people were unsure what Cherry Credits is about and what they can do on the website.
To add to the previous confusion, Cherry Credits had another portal called Cherry Exchange; where it is completely closed behind a login form. All account related activities such as updating password, topping up balance and ePIN/game redemption were done behind the gardened wall.
Returning users had no problem with this since they were already familiar with the steps. New users who unfortunately landed here, however, were totally confused as to what to do next other than signing up.
We found out the new user bounce rate is highest for this page as users are unwilling to sign up for something they are unable to preview.
Merging of both portals
The new homepage had to have the functionality of both previous portals. We wanted new users to understand what Cherry Credits provides. More importantly, we had to make sure returning visitors can login and proceed with their transactions immediately since they make up the majority of our paying customers. In short, we had to make sure the homepage caters to all users effectively, including the stakeholders.
We spent a lot of time reiterating on the homepage because the stakeholders had their own personal opinions on what the new homepage should look like.
We divided the new home page into several sections and designed it so that every section could satisfy the needs of one of our target groups:
- For new visitors (the green flow), we provided a tagline to summarise what is Cherry Credits and provided information of how Cherry Credits works and some custom featured game banners to entice them to the service.
- For returning visitors (the red flow), who will most likely skip the home page or use it as a waypoint, the navigation pointed a way out to browsing games and top-up methods. They can also just search for their favourite games or top-up methods in the prominent search bar. This search bar can also be accessed on every page of the new website in the top header.
- We left a smaller part at the end of the page (the blue flow) for potential business partners, listing some of our prominent content and distribution partners, a tagline that summarises Cherry Credits' value for businesses and a CTA that goes into a brand new corporate page.
The goal of the on-boarding process was to capture the customer’s attention and seamlessly lead them to their eventual respective goals.
Browsing Designs
Cherry Credits provide two primary services for users:
- Buy specific game credits
- Top-Up credits in their Cherry Account
Browsing games and top-up methods are where new users spend most of their time on the website. For returning users, they will usually search for specific games and top-up methods or bookmark the specific page in their own browsers.
Browsing Games
Since we kept the homepage clean, we can offer a more streamlined view of all the games available in Cherry Credits.
Aligning with Marketing goals, the 3 most popular games will be featured prominently. The rest of the games catalogue is displayed in a grid and users can filter by the category type.
Browsing Top-Up Methods
The initial idea for displaying top-up methods was to follow the games listing to keep the site uniform. Stakeholders, however, felt that users might be confused about the different types of top-up methods. They wanted something different that can help users make that decision much easier.
We felt this was plausible since most returning users would skip this section altogether. They already know their preferred method and are more likely to use the search bar to get to it fast.
Idea interventions by the management
Sometimes clients might want to have a say in the project based on personal reasoning. We believe in listening to them and finding out more on the final objectives. Not everything clients say are nonsense 😉We came up with a much simpler screen that helps in deciding a top-up method easier. Instead of listing out all top-up methods, we present users with the top-up options first:
Prepaid cards and e-pins were the most used methods so users can instantly do their top-ups on this page.
- A credit card section was included to promote credit cards usage, to address Marketing and Business Development teams' goals. This option was singled out and placed first on top.
- A new section was created to let users suggest their favourite top-up method if it currently does not exist in Cherry Credits.
- A ‘view all’ section that lets users browse all other top-up methods.
Logged-In State
Now that most of the pages are publicly accessible, the challenge is to make it a seamless experience for users to browse and continue with account sensitive actions.
We decided to let users access the site freely until they needed to make an action requiring an account. This includes the following actions:
- Games - ePIN Redemption
- Top-Up to their Cherry Account
- login
- Sign Up
The Sitewide Side Panel
For smooth and seamless user experience, we created a side panel that will slide in from the right side of the page.
- This panel will prompt users to login.
- If they do not have an account they can signup via the same panel.
- If they forgot their password they can reset their password.
This panel will trigger at certain points of the user journey.
The side panel was a hit with Stakeholders and users.
- It fulfils the Stakeholders' objective of a straightforward, clean and sleek registration/login function to address user acquisition and retention efforts.
- It fulfils the existing users' goal of a quick and seamless login to complete their transactions
- It prompts new users to sign up for an account
Special Behaviour on home page
We wanted to show the login panel on the homepage. This will make it visually similar to the previous Cherry Exchange, to provoke a sense of familiarity to existing users. However, it felt like the side panel was taking too much attention and space. We would have to sacrifice the right side of the page and squeeze the homepage content to the left. So we came up with a special behaviour for the side panel on the home page.
- On load, the side panel will trigger and show the login panel.
- When the user scrolls down, the side panel will slide away.
- If the user scrolls back up, we will show the side panel again and maintain the panel view.
Single Product View
For the single product view, we wanted it to look the same for both games and products.
Preparing for Visual Design
After the critical user journeys were all figured out and wire-framed, we were ready to start visual design.
Even though mobile has overtaken desktop usage globally, Cherry Credits data shows that a majority of their audience is still doing their transactions on desktops, rather than mobile devices. User interviews further prove that they will browse the website on their phones before completing transactions on a computer.
We came up with the following reasons:
- Although the previous websites were responsive to a certain extent, they were not user-friendly and users were not confident of transacting on their phones.
- Desktop gamers are more inclined to do transactions on their computers.
- Most mobile phone users in developing countries are using older devices. Since our websites were not optimised, page loading was slow. They would rather use the computer and get it done faster.
So, we decided to design for desktop-first and work down to the smaller resolutions from it in code.
Visual Design
We had to maintain the existing corporate identity but were allowed to make adjustments to look more current, updated and relevant to the current trend.
Following trends can be subjective and is probably not the best methods to define designs. However, since most of the audience are gamers, supplementing our design with current trends may work to our advantage.
Moodboard
The main visual features we went after were simplicity, bold typography and clean icons. We had pretty good custom illustrations which we thought could match the simpler and uncluttered new interface. We wanted to portray that Cherry Credits is a fun company yet serious about users' security and transactions.
Typography
Arial has been the mainstay of the websites as it is very legible and safe. However, we decided to change up the website typeface to give the revamped site a fresher look and feel.
Initially, we chose the well balanced Nunito Sans as a good alternative to the plain Arial.
The second iteration was Gotham which was very well received by the Stakeholders. This typeface gives a masculine, new and fresh feel to the site. However, extensive usage of this font made the whole page rather heavy and pretentious.
After much experimenting, we decided to go with Montserrat. We felt that it captures the spirit of Gotham, but feels more relaxed, simple yet exclusive. It definitely has a lot more character than Arial.
Colours
Main Colours
Cherry Credits primary colour for branding has always been Milano Red and we maintained it. Since it is from the red hue, we chose another colour to indicate error information and messages.
Shades of Black
Icons
Initial Mockups
Components System
Prototyping
We used Invision for rapid prototyping for a major part of the website. Invision is great for showing quick concepts and it creates a believable prototype for our Stakeholders and test users. Designers can easily put across their ideas without handling code directly. Specific interactive processes can also be shown to Developers to access technicality issues before moving forward.
For our case, the commenting system on individual screens helped us collaborate better. Even Stakeholders are able to comment and check in daily to have a feel of the progress.
After the initial Invision prototypes were agreed upon by Stakeholders, we started transitioning into prototyping with code.
Tools and process
We used a mixture of Gulp and Codekit as our build process. This greatly speeds up our work. All our codes are hand coded with HTML5, SCSS and jQuery.
Components and templates
Even though we officially started coding after the prototypes were agreed upon, we had already started building the skeleton layouts and major components via atomic CSS. We love using the atomic CSS methodologies because it optimises our CSS files and forces us to think about reusability. It is also a very fast way to test out a layout and prototype with code.
Prototyping in real code makes it easy to demonstrate the more complex interactions needed and identify any problems with various browsers simultaneously.
Handover to Developers
Once the HTML files were ready, they were passed on to the Developers to build the functional back-end logic. Most of the time, the final integration needs to be touched up to align with the HTML prototypes.
Validation
All projects should not just be a one-time delivery. It is important to validate project success by reviewing it. Ideally, we will be considering usability tests, A/B testings, and other in-depth surveys with the user to further optimise and enhance the website.
More data will be needed to see if the goals and key metrics have been met.
Update
The response has been great so far. Traffic to the website has increased by roughly 40%. This could be just superficial numbers due to the fact that the site has just been relaunched and users are just checking out what's new. A longer period of data set will be needed to determine where and what we can improve on.
Takeaways
This was a very long project in the making and here are some of the takeaways that we learnt.
- Data is king. It always helps to have more data to refer to and validate our findings.
- Involving Developers early on in the project helps to prevent technology barriers. They are also able to better advise the feasibility of complex interactions.
- Don't assume the obvious. We may find it natural for a particular flow or interaction since we are the project owners. But it may not be obvious for real users. Most of the time, writing good microcontent to guide the users is always beneficial.
- Document your design.
- Don't focus on unique visual designs.
Thanks
A big thanks to the people I worked with on this project. It has truly made me more aware of the different processes involved in user research. Thinking about the user journey and experience has made building the user interface much easier and natural; while also validating the project's objectives.
Stakeholders for being open-minded and willing to let us try something new.
The amazing Developers who had a hard time with our designs and overcoming the technical barrier in back-end development.
The Creative Team for being awesome.
In particular, I like to thank Waiyee Leong (Senior Product Designer) and Melissa Wong (Content Lead) for this amazing process and insightful journey.