Unleash

HR Conference page UX Case Study

PROJECT OVERVIEW

In December 2017 we started a project with UNLEASH (previously HR Tech World), a Budapest based company organising some of the greatest HR technology conferences in the world (Las Vegas, London, Amsterdam, etc).

Unleash

THE TEAM

Our design team consisted of three people: a researcher and two designers. Bence, the researcher, was responsible for the user interviews and usability tests, while designers focused more on prototyping, UI and interaction design, collaborating closely with Adam, a web designer from the client's internal design team.

To make the collaboration easier, we spent most of our time together - either at the UNLEASH or at the UX studio office. We mainly used Slack and Skype to communicate with each other when we weren't at the same building.

THE SCOPE

During the 4 months project we redesigned the UNLEASH website and created a backend system (portal) where event sponsors and speakers can upload their content, edit and publish their own pages. The portal also includes an admin panel to manage events and approval requests.

While working with UNLEASH we were focusing on their vision: "be more than just a company that organises conferences". They wanted to become the number one source when it comes to reading, exchanging information, participating, meeting people and finding solutions related to HR technology and the future of work.

WEBSITE REDESIGN
1.
DISCOVERING
2.
PROTOTYPING
3.
TESTING & ITERATING
4.
DESIGNING UI

1. DISCOVERY PHASE

At the very beginning of the project we had a two day long kickoff workshop. It helped us understand the client's vision, we gathered information about the company, their customers and the HR industry. We created the UNLEASH brand persona, conducted a detailed competitor analysis and mapped several user journeys to identify user pain points.

Besides, we had several interviews with speakers, sponsors and other stakeholders of the company to understand how they were using the old website and what their challenges and needs were regarding the new one.

 

 

SKETCHING

After organising the bits of information we gathered in the discovery phase, we continued the design process with figuring out the site's main structure and sketching low fidelity wireframes on paper. This was the way we iterated through many design options and came up with solutions very quickly.

INFORMATION ARCHITECTURE

We had to design a website with two focus points: we had to make sure our users find all the information they need about the upcoming events, but also highlight the content section (up-to-date articles and informative talks) - without making things complicated or frustrating. During the brainstorming sessions we realised that we needed to pay attention to the navigation (nav bar and footer), make sure our users always know where they are and how they can find what they want (complex search engine).

Unleash
Unleash

2. PROTOTYPING

We created the mobile and desktop prototypes in Axure RP to test with real users and get feedback.

First, we created a version where the results were shown by default, but people didn't understand if they could still participate or that was a closed poll.

After a few iterations, It turned out that it still wasn't clear if the answers were actually clickable elements – so, we added small labels saying "VOTE" and also animated the results.

This way people understood the concept of polls and loved the user generated content on the page.

3. TESTING

During this phase we continuously tested the prototypes with users and collected valuable feedback. Based on the feedback, we improved the prototypes and then tested again.

After 4 weeks of iteration we had a pretty good idea of how the website should work (e.g. the poll on the home page) to help people achieve their goals.

Although our researcher Bence was the one leading the user tests, most of the time, the whole participated, helping him take notes and paying attention to everything the users said.

12
User tests
4
Iterations
150
Screens

4. UI DESIGN

After deciding on the look & feel we started working on the final UI pages. We had to create each page for mobile, tablet and desktop. We used Figma as our main design tool, since it was the easiest way for 2 designers to work together on the same thing at the same time. Figma is the Google Docs of the design tools: it makes real-time collaboration easier than ever.

One of our biggest challenge here was to keep things consistent, so we set up a design system in order to have a unified set of rules and UI elements. With the system we could make sure there were no inconsistencies in the design.

Unleash

ANIMATIONS

We have created animations to help developers understand what concept we had in mind. It also helped the rest of the team to take a sneak peek into how the live website will look like.

Below you can see an animation of the highlighted articles from the new home page.

BACKEND DESIGN

UNLEASH PORTAL

Once we had finished designing the website, we started working on the backend interface, which we later called UNLEASH portal. Why did we design a unique content management system?

UNLEASH employees spent a lot of time calling sponsors and speakers to get all the required information and assets - such as logos, company descriptions, speaker bios, social media links, etc. - in time, so they can keep the UNLEASH website up-to-date. Since the old way was both time-consuming and uncomfortable, we decided to create a unique online interface where sponsors and speakers can basically create their own pages on the UNLEASH website with admins reviewing and approving the content.

Unleash

PERMISSIONS

We faced the challenge of figuring out what the admins should review, how they can approve things and what happens if they decline publishing a page. We had many brainstorming sessions, and finally we came up with a solution that worked very well during the user tests, too. (Since we already had most UI elements from the website design, we created a high-fidelity InVision prototype and tested it with 4 users.)  

Unleash

BACKEND UI

As soon as we finalised the backend prototype and the main pages in Figma, we started designing the rest pages, popups and micro interactions.

We created a separate UI kit and some animations as a part of the backend specification.

Here you can see the different states of the admin headers and some portal screens.

Unleash
TAKEAWAYS

COLLABORATION

One of our biggest challenges was the collaboration, especially at the very beginning of the project. We worked closely with a web designer from the client's team, we had to make sure he understands why and how we are doing research, prototypes and testing. Besides, he needed some time to learn how to use Axure, Figma, Principle and other design tools. 

We were lucky to collaborate with UNLEASH developers. What's more, we could plan the project together sprint by sprint. Despite of having some technical issues with Figma (can't handle big images, slows down when having lots of artboards, can't handle components across pages, exporting to Zeplin doesn't work), everything went smoothly: they did a great job and were always helpful.

Communication is the most important thing when it comes to working with other people. Having regular meetings and common workshops helped us achieve our goals faster.


SCOPE CHANGE

Another challenge was to adapt to the changes. The backend system design wasn't planned originally. We were supposed to create a mobile app in the second part of the project. We had just started working on the mobile app, when the business goals changed and it got out of the scope. That's when the team came up with the idea of designing a backend system instead.

We needed to take a step back, and plan the second part of the project again. We had another kickoff session focusing on the issues the UNLEASH portal was supposed to address. 

"They adapted well to rapidly changing requirements."
Tomas Bottyan – Technical Director at UNLEASH