UX Case study: Hackages learning platform

Introduction

Community holds a very important place among developers. With open source communities, coding enthusiasts learned to share knowledge and techniques around their favorite programming languages.

Hackages started in 2015 as a learning community of developers, by sharing knowledge and teaching young engineers about the newest trends in the software development industry.

6 years later, Hackages grew from a small community to a tech consultancy, by expanding their education services to companies.

During the global pandemic, Hackages decided to expand their services to the online world, by building Hackages learning platform.

The primary goal of Hackages learning platform is to provide a Free and accessible learning experience for developers, while promoting B2B services to companies.

Team

In order to take on this challenge, I was given the task to design and build the Hackages learning platform.

Because growing the platform was not a design only issue, The team was composed of marketing manager(growth Hacker), sales expert video editor and more.

I took the role of the product designer, and I was tasked of building the platform and continuously improve the platform based of testing and data analysis.

Strategy

Goals: After my first meeting with senior management, It became clear to me that the primary business goal of the platform is to promote the companies B2B services to companies through developers who use the free learning materials.

The most important part here was to attract developers to use the platform by making the learning process as intuitive and accessible as possible.

Audience: The next step I took is to understand the audience by studying findings from marketing teams and doing initial user research by interviewing software engineers.

Personas: After I had a clear picture in mind about the target audience,I modeled them as personas. (personas are representation or personification of the target audience, so that making sense of data becomes easier, and to create a sense of empathy towards these fictional characters).

Customers like Louis look up the brand of Hackages and consider it a community of high value individuals. He believes that being a part of this community will help him learn from these talented people and gain more expertise.

Our goal is to provide a simple and tailored learning experience based on the technological skills and interests of our persona

Customers like Chris are looking for a trusted collaborator to help them solve their technical problems. Viewed as highly experienced team, Hackages is seen as perfect candidate to solves their problems.

Our goal is to explain to Chris as clearly as possible the services of Hackages and provide a clear call-to-action.

Plan

After the data we have collected about the users and the company. It became clear that using an iterative approach of reseach-design-test was ideal. Not only to start testing early, but also to be as creative as possible and have the freedom to try all sorts of ideas.

I choose a time interval of 1-2 months for each design sprint, that's because I would find enough time to implement my design and have about two weeks at the end to just collect data, do testing and just understand the impact of each little change I made.

Design Sprint (V1) Initial design

For the first design sprint, I started by adding the main structure of the platform by laying down the learning pages and B2B pages.

I also set up Google Analytics/ Google Tag Manager to start collecting quantitative data to study in the later steps.

V1- Navigation

V1- Wireframe

V1- Design

V1- Findings

My initial goals with testing is to understand how well the design is successful at conveying what the platform is about, and how easy it is for users to find the learning content they're looking for.

• After the first testing session, it quickly became clear the not enough users get what the platform is about, this was also clear after looking at the bounce rate which was 56%.
• V1 was successful at taking people to learning pages, but did poorly at giving them an idea about what to expect.

Design Sprint (V2) - Focus optimizing landing page

The DS2 is where I try to apply my finding from DS1, So, the challenge conversions of landing page by explaining more what the platform is about to new visitors.

V2- Navigation

V2- Wireframe

V2- Design

V2- Findings

• Analytics results show 13% decrease in bounces. (the less bounce rate the better).
• Users get a clear idea about Hackages as they navigate to the learning pages.
• Although learning pages was going smoothly, I found out our B2B pages are not getting as much traffic, which required us to rethink the navigation scheme and the landing page to give our B2B visitors a clear CTA that allow them to look at the consulting services of Hackages.
• Testing and feedback from users showed two major usability issues with our learning pages, most users couldn't navigate from one learning page to another, and most find it hard to read the blog because of small text and wide container.

Design Sprint (V3) - Focus learning pages (Video & blog)

After spending enough time in understanding users and their experience while using the platform, we had two main goals with V3.

First goal was to give clear navigation for B2B users and separate it from our learning pages.

The second goal was to improve session duration for our learning pages by making small adjustments to these pages.

V3- Navigation

V3- Wireframing

V3- High fidelity design

V3- Findings

• Increase in pages/session from 1.2 to 2.88
• Increase in session duration from 45 sec to 2 min 40 sec

Feedback and testing results

• Low conversion rates (low sign-ups for paid courses)
• B2B pages visitors are overwhelmed by multiple pages (need to simplify Hackages for businesses part)

Design Sprint (V4) - Focus on B2B pages

We were successful in improving the learning experience and the site navigation by making sure every user can get to his destination as easily as possible.

However, I noticed that we get a lot of feedback from users that B2B pages are vague and don't  offer a clear call to action or explanation of what the company offers as services.

DS4 design in progress...