TOKKEN

Managing Data, The Smart Way

V2 of TOKKEN

V2 of TOKKEN

The Background

TOKKEN is a web-based data management system belonging to a Finnish startup. The team felt that the current look and feel of the product won't help us achieve our goal of selling the service to more clients and a great user experience was crucial for achieving this milestone.

The Overview:

As the sole designer in the TOKKEN team, I was expected to manage multiple stakeholders and unify our vision to carry out a UX overhaul.

My role: UX design - UX research - UI design - User testing

My team: Frontend and backend developers - Engineers - Project managers

Country: Finland

Constraints And Challenges:

  1. Our team spans 5 nationalities across 3 different continents. Adjusting to and managing different work cultures, schedules, and time zones was a challenging task, and succeeding in it brought joy to the whole team.

  2. We had limited resources for user research and user testing.

  3. We only had 2 months to work on the new version so preserving as much of the existing code as possible was a requirement.

The Problem:

The current version of TOKKEN does not reflect its aim to compete in the global market as a competent, usable digital product so a redesign is needed that improves the usability of TOKKEN while preserving as much of the existing code as possible.

How We Measure Our Success:

Acquiring at least 2 new clients was how we can measure the success of the redesign of TOKKEN.

The Process

The first step was to align the stakeholders with the project goals. We agreed on the importance of setting expectations very early on to avoid design debt.

TOKKEN

Research And Discovery

Stakeholders Interview:

I started the discovery stage by interviewing the stakeholders to gain a better understanding of the business goals and user aspirations and pain points.

Key business goals:

  1. Create an intuitive experience that reduces the need for demos where users can sign up without needing to speak with a sales representative.

  2. Craft an experience that looks professional and follows what users of such Services expect the platform to look and feel

  3. Design a platform that caters to the more advanced user persona, but can also be used by the less technically-oriented users i.e. Project managers

An analysis of the 5 major players in the market

An analysis of the 5 major players in the market

Competitors Analysis:

In order to get a feel of comparable products and what the users of such platforms expect to see, a competitors analysis of 5 major players in the market was conducted.

We agreed that our competitive advantage would be a great user experience and an intuitive interface since most of these products had usability issues.

We used an impact effort matrix to decide on next steps

We used an impact effort matrix to decide on next steps

User Interviews, UX Audit, and Design Workshop:

I was in a unique position where the users of the product were also its developers. This posed an opportunity disguised as a threat. It was a chance to build rapport with the development team, including them in every design decision so that later on, resistance to change is minimized through mutual trust.

Firstly, I carried out a thorough UX audit of the existing product to decide on key areas that need attention from a UX perspective.

Then, We held a design workshop with the users/developers using Miro to discuss pain points and needs in light of the resources available to us and the UX audit.

Eva & Peter, User personas

Eva & Peter, User personas

Personas:

Persona A | Eva: The technical user. A developer who is adept in coding and uses the advanced features of the platform. Their main goal is to manage the data of their company with efficiency with as little custom coding as possible.

Persona B | Peter: The manager persona. A project manager that does very little to no coding that needs to have an overview of the status of the data managed by the platform through the operational dashboard.

Persona C | John: The marketing persona A decision-maker that chooses a suitable, professional data management system for their company to use based on the features as well as the look and feel of the product.

Design
TOKKEN

A Zoning Diagram:

A simple zoning diagram sets the stage for successful wireframes as well as allows for a concrete hierarchy of information.

Lo-Fi Wireframes

Using Balsamiq, wireframes are a great way to focus on the information architecture and validate concepts quickly.

Early User Testing:

We tested the most important flow in our user journey. Testing was remotely carried out on 5 users (Technical user persona).

The objective: Validating the usability of the side drawer interaction with a technical user persona. This persona writes custom code so it is crucial to observe the way they interact with the side drawer when coding.

Key insight: One of the key insights that the testing revealed was that the users didn't find the side drawer usable when it came to using it to input custom code. It was narrow and not very intuitive to use so another iteration was created that enhanced the width of the drawer as well as the hierarchy of the tabs in it.

A part of TOKKEN's stylesheet

A part of TOKKEN's stylesheet

Branding & Stylesheet:

A simple, elegant style that lets the dashboard breathe and allows the data to show and be read clearly was an absolute must to develop. 1 typeface and 2 colors were chosen to accentuate the design and let the data shine.

UI Design And Final Product

TOKKEN

Showing System Status

We did user research with system admins and came up with this view to intuitively show a holistic overview of every system status at a glance. The big, primary blocks of color serve 2 functions: they allow the admin to know which system has errors at a glance, let them gauge the error severity quickly.

Before and After

V2 of TOKKEN

V2 of TOKKEN

Impact and What We Learned:

The redesign was a success! The service was pitched and successfully sold to 3 extra clients thus far. We plan to continue improving it to compete on a global scale.

Key learnings:

  • Involving stakeholders and getting buy-in at every stage is crucial in determining the success of the project.

  • Threats and opportunities come hand in hand.

  • A product can be technically incredible, can do A LOT, but without a great user interface, people probably won't invest in it. Looks matter!