Case studies / Writing gamification platform
Illustration

Writing gamification platform

Redesign
B2C
Duration 6 months

Engaging web application for writers seeking motivation to write every day

Illustration

Project Roadmap

1
UX Research
Competitor Research
Information Architecture
User Survey
User Interviews
User Flow
2
UX Prototyping
Brainstorming
Wireframing
Prototyping
User Testing
3
UI design
Moodboarding
Visual Design
UI Kit

Getting to know the System

Many writers strive to write every day, but struggle to get it done. To help them find motivation, our client invented a game for writing.

The game has a large community of writers who have been using the system every day for several years. However, the system also had some usability issues which descreased the retention of new users. That’s why the client reached out to our agency to improve the user experience and help them attract more users.

Project Challenges

Level up the usability
Level up the usability
Make the system intuitive and easy to use
Fusion of experiences
Fusion of experiences
Find the right balance between convenient writing and fun gaming
Diverse community
Diverse community
Make the system convenient even for seasoned users
Immersive illustrations
Immersive illustrations
Build UI in synergy with existing illustrations

UX Research

We combined quantitative and qualitative research methods to gain different insights into the current user experience. Then we structured the gained knowledge into simple diagrams to use them for the research-driven design decisions

Services
Stakeholder Interview
Our first goal was to understand the project, so we set up an initial call where we discussed all the project details and defined our first steps
Services
Competitors Research
We analyzed the product competitors to get familiar with common patterns, and define which decisions can be reused and which should be avoided
Services
User Survey and User Interviews
We created a survey to learn about users’ priorities and needs. Then we talked to some of them to truly understand their experience

Information Architecture

We created diagrams of all the data present in the system and its hierarchy. This helped us build the right components and group the information in a meaningful way

Product Map

User Flow

After we talked to the users of the platform, we gained insight into their behaviour. Based on this knowledge, we built a diargam of all tasks and actions in the system. We used it to build an engaging solution for users and help them achieve their goals effectively.

Product Map

UX Prototyping

After we gathered all the necessary information on the research stage, we started creating wireframes of the new system layout. We were building an interactive prototype module-by-module with the client to gather feedback from the actual users

Onboarding

One of the main client’s business goals was to retain more customers. During the research stage, we discovered that the new users get lost in the system and don’t know how to get started. That’s why we created an interactive onboarding to show users what they can do in the system.

Onboarding

Dashboard

The issue of the existing platform was a lack of a starting page. New users got confused and didn’t know where to start. To solve this issue, we created a customizable dashboard which includes shortcuts to the main website modules. This helps increase user engagement with different parts of the system.
As a result
Writing

An important thing about the system is that it’s not just a game but also a writing tool.

However, the previous design had some usability issues, so the users preferred using other writing software and copy-pasting words to defeat monsters and win rewards.

To improve the user experience, we found a more flexible way to organize files and made the process of writing more convenient.

Writing

UI Design

After each module had been approved, we defined a visual language and structured it into a design system. UX and UI designers were working in parallel to provide the client with a solid function-oriented interface, while keeping a high level of quality

Illustration

Our Design System Structure

Our Design System is a collection of shared patterns. This System allows the team to build quality consistent interface of the application now and with new future modules to come.

UI Design
Basics
UI Design
Elements
UI Design
Components

Basics

Basics are the simplest entities – colors, typography system, buttons, icons. We opted for a dark theme for better immersion and clear personalised call to actions.

Basics

Elements

With the set foundation, we developed a balanced unity between a professional tool for writing and a game. Clickable cards became invitations to unique worlds, and CTAs consistent and minified links.

Elements

Components

With a range of elements inside the application, our team has developed a predictable interface surving as a container for different kind of information

Components

As a result

As a result
As a result
As a result
As a result As a result

Happy client
is our routine

Our client
The results so far have been fantastic! We shared a preview of our work with our community and even drastic changes got ratings of 9/10 and higher. Because the redesign hasn't been launched yet we don't have more concrete results, but one of our major goals of the redesign was to have a complete design system we could keep at the end of our work together. Angle2's team are extremely organized and the system they are creating will benefit us internally greatly.
Eduardo Loria CEO
Consistent design
Consistent design
We have created a Design System from which product now will grow and help writers be more efficient
Fusion of experiences
Fusion of experiences
We have created a very comprehensive product that combines elements of a professional tool and a game
Happy community
Happy community
Redesign of the system made the large community excited and supportive for an upcoming changes

Our perfect team

https://angle2.agency/wp-content/uploads/OK.png

Olha Kirdiaieva

UX Designer

https://angle2.agency/wp-content/uploads/AS.png

Antonina Shalaieva

UX Designer

https://angle2.agency/wp-content/uploads/3-5.jpg

Eugene Yaroshenko

UI Designer

https://angle2.agency/wp-content/uploads/OB.png

Oleksandr Belkin

Project Manager

We're
all ears

Fill out the form to start the conversation — we’ll get right back to you

    Amazing!
    Thank you so much!
    See you soon
    We value your privacy
    We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies. Read More
    Accept all cookies