top of page

CHERRY CREDITS CONSUMERS WEBSITE

Cherry Credits is a company that offers Unified Global Virtual Credits and publishes online games in Southeast Asia. They have two online portals, the main website for public use, and Cherry Exchange, a personal electronic wallet for top-ups, purchases, and redemptions of digital content and virtual credits.

​

Cherry Credits consisted of two online portals:

  1. Main website: The public-facing website (cherrycredits.com)

  2. Cherry Exchange: The personal electronic wallet which allows for top-up, purchase and redemption of digital content and virtual credits.

THE CHALLENGE

The main goals of the project are to create an integrated design system and language that caters to all user types, merge the two online portals into a one-stop solution, improve UX journey and UI, increase traffic for users and merchants, ensure promotions and news reach users, attract users to check the site regularly, find alternative ways for merchants to push sales, and make everything responsive.

THE PROBLEM

Here's a list of the problems identified in the case study:

  • The website does not look secure.

  • There are broken links on the website.

  • The website has an outdated look that cannot attract millennials who are the main customers.

  • The website has a non-unified look.

  • There are too many font sizes on the website.

  • The small font size makes the website illegible.

  • There are too many 'one-off' components on the website.

  • The website is not compatible with modern browsers.

  • The website is not mobile-responsive.

  • The website is slow to load because assets were not optimised.

  • The website is confusing, and new users are unsure how to do a transaction.

  • The website is not user-friendly, and users are unable to seamlessly find relevant game information.

  • Top-up methods were not catered to individual users (not personalised).

  • Users were not able to suggest games and top-up methods.

HIGH LEVEL TIMELINE

The team was given 8 months to redesign, code and launch the website.

MAKE OF THE TEAM

The project involved a copywriter, a frontend developer, and a UX/UI designer.

KEY METRICS

The main key metric of the project was to convert public users into paying customers, with a goal of improving this by at least 5%.

 

To achieve this, there were two secondary key metrics:

to shorten the number of clicks to complete a transaction, and to increase the overall satisfaction users get from the website.

MY ROLE

As a UX/UI Designer at Cherry Credits, I was responsible for revamping the company's websites to improve sales and user retention.

My main tasks included conducting research to understand stakeholder and user needs, analyzing data and insights from competitive research, qualitative interviews, and usability studies, and ideating solutions based on customer insights.

​

I worked closely with the copywriter and frontend developer to create a complete website overhaul, focusing on visual design and prototyping for ease of inter-department communication and execution. I also conducted internal usability testing to ensure a user-friendly interface and experience.

 

Through my efforts, I was able to improve the website's conversion rate from public users to paying customers by at least 5%, shorten the number of clicks to complete a transaction, and increase overall user satisfaction.

UNDERSTANDING THE USER

Identifying existing base plus potential users

Cherry Credits' users are predominantly male gamers aged between 21 and 35, with the most significant user base in the 21 to 25 age bracket, followed by the 26 to 30 bracket, and a tertiary group between 13 to 20 years old. The majority of users come from developing countries, where credit card access is limited, and alternative methods for purchasing credits are preferred. The top countries with the largest user base are the Philippines, Malaysia, Vietnam, Indonesia, Singapore, and Brazil

User Interview

To understand our users better, we conducted interviews with 4 people (2 existing and 2 potential customers) and sent a survey to 4 more. We wanted to know what our users are trying to achieve and what their problems are.

​

The interviews lasted less than 30-45 minutes and covered topics such as their favourite games, how often they buy game credits, what motivates them to make purchases, and what incentives would encourage them to spend more.

 

After analyzing the data from these interviews and getting insights from the Marketing department, we identified our target users as Generation Y, millennials, and teenagers.

 

Based on this information, we created 3 personas that represented our target users' needs and user journeys.

persona1.png

Persona 1

Registered user with Cherry Credits Account and use payment services.

persona2.png

Persona 2

Public user, non-registered, ready to pay, play games and wants to join events.

persona3.png

THE INSIGHTS

User Journey

The feedback gathered helped us in making an affinity diagram with everything we collected.

sitemap.png

The Insights

The team identified seven main problems that users were facing and came up with statements to address them.
 

  1. New users need more information to trust Cherry Credits.

  2. Existing users want a simple and easy way to log in and complete transactions.

  3. All users want to easily browse games, payment methods, and promotions.

  4. Potential paying users need a way to contact Cherry Credits to make transactions.

  5. All paying users want to keep track of their transaction information.

  6. Business users want to know how Cherry Credits can benefit their business.

  7. All users want access to a FAQ section for reassurance.
     

To address these problems, the team created a site map that accommodates all user journeys.

Onboarding

The old Cherry Credits homepage was confusing and lacked important information about the business. Users were overwhelmed with banners and game images, which caused confusion and made it difficult to understand what the website was about and what users could do on it.

Persona 3

Public user, non-registered, promo-chaser, which still deciding which payment to use, NO loyalty, has many other payment accounts.

BREAKING DOWN THE PROCESS 

Design Process

The design process began with conversations and interviews with the stakeholders to ensure everyone was on the same page with the company's vision and goals.

 

Then, we conducted research on user behaviour and analyzed our competitors. Based on those insights, we planned and created the user journey, user flow, and wireframe with the team.

 

Next, we implemented design principles such as contrast hierarchy, feedback, brand attributes, voice and tone, and user interactions into the production phase.

Design_Process.jpg

Stakeholder Interviews

CEO, COO, VP

competitors.png

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

Competitors

We did a general analysis of competitors in a similar industry to compare and see if we can improve further.

​

Spot repeating patterns

  1. Big Hero banner set in an automatic rotating carousel

  2. Prominent Search

  3. Links to best-selling products/services highlighted

  4. Signup + Login + Language/region located at the top right of screens

  5. Payment Channels/Partners are featured near the bottom before the footer

COMPETITOR ANALYSIS COMPARISON

Login

STEAM

top right

MOL

top right

OffGamers

- top right

- social login

Old Cherry Credits

- top right

- social login

Language / Country

STEAM

top right

MOL

top right

OffGamers

- top right

- countries

- currency selection

Old Cherry Credits

top right

Main Banner

STEAM

- middle top after navigation buttons

- widescreen

- single

MOL

- middle top after navigation buttons

- widescreen

- carousel

OffGamers

- middle top after navigation buttons

- widescreen

- carousel

Old Cherry Credits

- middle top – small

- carousel

Secondary Banner

STEAM

- middle after still banner

- promoting discount/offers

- 10x carousel banners

MOL

- middle after main carousel banner

- promoting promo/free stuff & social media

- 4 x still banners

OffGamers

- middle after main carousel banner

- promoting news/ discounts + extra promotions button

- still but a user can rotate the banners (10 banners)

Old Cherry Credits

NIL

Navigation

STEAM

top and left

MOL

top and bottom

OffGamers

top and bottom

Old Cherry Credits

Not present

Support

STEAM

top

MOL

top and bottom

OffGamers

top side left, top right '?‘ and bottom

Old Cherry Credits

middle right under connect and exchange, bottom

News / 
Trending / 
What's Hot

STEAM

- left side text navigation

- middle almost bottom

- secondary banners

MOL

- main carousel banners

- after secondary banners

OffGamers

after main carousel banners

Old Cherry Credits

middle bottom

Promotions

STEAM

- main still banner

- after secondary carousel banners

MOL

- main carousel banner

- secondary still banner

- latest news

OffGamers

- main carousel banner

- secondary banner with CTA

Old Cherry Credits

- main carousel banner

- latest news

Social Media

STEAM

middle bottom

- Facebook

- Twitter

MOL

right bottom

- Facebook

- Youtube

- LinkedIn

OffGamers

right bottom

- LinkedIn

- Google+

- Twitter

- Facebook

- Weibo

Old Cherry Credits

left bottom

- Facebook

- Youtube

- Twitter

- Instagram

HEURISTIC EVALUATION

HeuristicEvaluation.jpg
cherryexchange.jpg

Cherry Credits - previous main website

This is the old design of the Cherry Credits main website.

Cherry Credits - previous exchange website

This is the old design of the Cherry Credits exchange website whereby the user needs to login to purchase the CC.

Cherry Credits had an additional portal called Cherry Exchange, which was only accessible after logging in. This portal was used for all account-related activities, including updating passwords, topping up balances, and redeeming ePINs and game credits. However, new users who landed on this page were confused because they were unable to preview the services without first signing up. As a result, the bounce rate for new users was high on this page.

Merging of Both Portals

The team needed to combine two portals, Cherry Credits and Cherry Exchange, into a new homepage that catered to both new and returning users. They had to ensure that the new homepage conveyed what Cherry Credits was about and provided easy access to account-related activities. However, the stakeholders had differing opinions on how the new homepage should look, which led to multiple iterations.

wireframes.png

Wireframes

Initial wireframes for the homepage

onboarding-flow.png

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:

​

  1. 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.

  2. 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.

  3. 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:

  1. Buy specific game credits

  2. 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.

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.

​

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.

THESE WERE SOME MAJOR LEARNINGS OR POINTS WE WANTED TO CALL OUT

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.

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.

LESSONS LEARNED

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.

bottom of page