UX secret sauce: shaping an employee centered web platform

This is the first blog post in a series that shares insights into the UX Design process and all the research that goes into our client projects. Behind every single stunning and blazing fast User Interface we create is a vast amount of research, courtesy of our UX Design team of experts. Today we spill some of our UX secret sauce of what went into the web platform we helped Helixers create.

About Helixers

Helixers is a small company located in Brabant, The Netherlands. Their team consists of passionate people who care about the well-being and growth of every employee. Helixers helps employees grow to increase motivation, dedication and lower staff turnover. 

Introduction

Starting with the research classics like persona’s and job stories– and eventually going deeper into the ecosystem, content core, user flows and sitemap of the product, our research for Helixers covered all bases to design a platform that inspires happiness and growth for employees within their company. 

Even though they started out with Excel and pen and paper, an upgrade was needed to grow the service to the next level. The service they offer to their clients is a well thought out process based on the works of a psychologist and the cofounder of the company, so it was our mission to successfully transform this to a digital platform. We helped them achieve this by re-thinking the entire flow of the platform. From receiving an email to get started, all the way to meeting the coach for the first time and working towards the first (of many) goals. 

Target Audience

Most (if not all) design decisions find their origins in the research phase of a project. The most important insight always revolves around the user. It sounds simple, but users are a key part of any product and experience, yet they are often forgotten or fade out to the background. Though there’s a lot of questions we need to answer about them first before we can design a service that’s fit for them. Think of questions like who are they, what are their goals and needs, and what is something they would avoid at all costs? For Helixers, the main problem users encountered had to do with setting up SMART (Specific, Measurable, Achievable, Relevant and Timed) goals. It was unclear how to set them up, which colleagues at the company could possibly help them achieve the milestones connected to the goals, and how to keep track of the progress they made.

Challenge

With the ultimate goal being to promote a life-long learning, the challenge for Helixers was to step up and get ahead of employee dissatisfaction, instead of trying to resolve it afterwards. This message needed to shine through the whole platform.

Deliverables

To fully equip our UX research toolbelt, we love to work in Whimsical. It’s a place where all UX research comes together, ready to share with clients as well as others on the Yummygum team. As for Helixers, we showcased our Ecosystem Analysis, the user flow, jobstories and sitemap directly from there during our weekly meetings. They could easily share thoughts on our findings so far, which we could directly reimplement right there and then in Whimsical.

User Journey

The User Journey for Helixers was quite extensive, with clear moments of before, during and after using the software. Not only do users dip in and out of the software, they meet a few people along the way too. Such as their boss, (in)direct colleagues and professional coaches from the Helixers team. Because of this set-up, our User Journey map ended up being different than the classic User Journey map, and was focussed more on the (inner)flow of the whole experience.

Information architecture

There are three main actions a user can take, depending on their specific needs in the growth process. Those actions have corresponding pages being: 

• The action plan page. A place where they can view current goals, check their progress and look at any pending tasks they might have to complete.

• The communication page. A place where they can track any meetings with their coach or colleagues that have taken place or are coming up. With enough room to leave notes, add in tasks related to the meeting and more. 

• The test module. This page contains the personality test the user does at the beginning of their growth journey, and also growth related tests such as where their interests lie and what they could do with that. It’s easy to take a quick glance at the results, allowing users to compare their answers to their current mindset.

Wireframes

An extensive User Journey also calls for extensive wireframes. We created many flows for Helixers, but a highlight screen has to be the action plan overview. It was quite the challenge to implement all the needed actions, copywriting and people relevant to the users’ SMART goals. We designed it so that the main goals of the user are at the top of the page, followed by actions that need to be taken on their end, neatly bundled together in a clear table view.

How research translates to design

As mentioned earlier, no stone was left unturned when researching what we could do to help Helixers facilitate companies and their employees with personal and career growth. But the amount of information that needed to be shown to a user was quite frankly, a lot. Our visual design squad continued with our wireframes and used these to design pixel perfect and easy to navigate screens.

View the endresult

Speaking of visual design, it’s way better to show than tell. Take a look at the Helixers case study, where we describe our branding process as well as the designs for the software itself.

It was a pleasure to work with the client, who understood a lot of the UX patterns we designed. UX Design and Psychology aren’t that far apart and make a great difference when applied correctly.

We’re proud of the amazing end result of the product, as well as the research and design done by our UX Squad. We hope that this will improve the overall employee growth and happiness for years to come.

At Yummygum, we love working on HR & Management tools and getting into the nitty gritty details that come along with it.