Client: Skilltransfers
My role: UX/UI Designer, User Researcher
Period: Oct 2020 – Jan 2021

Key Achievements

Increased user engagement
Made design process and development 60% faster
Solid UX Strategy

Context

Skilltransfers is an e-learning platform. Customers can subscribe to a learning content and learn online. The platform has been developed for almost one year, however, when set online, visitors hardly finished the customer journey. Nobody subscribed.

I was hired as UX/UI Designer with the following tasks:

Find out, why users don’t subscribe
Design and implement improvements
Devise UX strategy
Optimize design and development operations

Initial Setup

Team: 2 back-end developers, 2 front-end developers, 1 visual designer, 1 scrum master, 1 project owner

Technology: AWS, React JS, GraphQL

Design Tools: Figma, Material-UI

6 Steps Plan

Assess current website and identify the problem
Understand the Business and Product
Understand the Users
Devise Solutions
Streamline the Design Process
Implement Solutions

1. Assess current website and identify the problems

I carried out a UX heuristic evaluation which revealed some major UI issues. To verify, I decided to install usability testing tools (Hotjar and Google Analytics) and ran a short Facebook campaign to attract users. As a result, I received concrete data (user behavior recordings, heatmaps, traffic stats) that verified the issues and made the team see that changes are necessary. At this point, I defined metrics to measure the progress – in this case, the engagement duration and conversion goals like sign-up, booking made, subscription bought.

Identified Problems:

Unclear interface: Users did not understand how to interact with the content and left frustrated.
Unclear value proposition: Users did not engage with the website to find out more information about the product.
Poor optimization for mobile devices: Users on mobile devices couldn’t view the content properly.

10 points heuristic UI evaluation

The goal was to get an overview of the whole system, identify UI issues, and define what to focus on in further research. Read more about heuristic evaluation.

Facebook campaign

I designed and ran a FB campaign to attract visitors and measure the interaction and usability with Hotjar and Google Analytics.

Data gathering

Data on the measured user interaction. This data serves as success/fail metrics.

Evaluation and recommendations

Three main findings (among others) that I further cross-checked in two interviews, and that formed base for the proposed changes.

Example of an issue found during usability test

User tries to get a video preview of learning content but does not understand how.

Watching recordings from Hotjar showing how users struggle with the product was a true eye-opener 😳 for the whole team.

Nuri Bayram, CEO Skilltransfers

To suggest proper solutions to the problems that I identified in step 1, I first needed to better understand the business, product, and users.

2. Understand the Business and Product

I organized several sessions with the CEO and the visual designer. We tackled the business model, sales channels, customer segments and current customer journeys. Most of the above were not yet set or needed a revision, hence the sessions turned into co-creation workshops which I gladly facilitated.

Results: Customer Segments, Business Model, Brand Comparison, Competitive Analysis.

Tools: Miro, gSheet, whiteboard, Trello.

3. Understand the Users (User Research)

I remote-interviewed existing customers and potential users, read studies on the current state of e-learning, blended learning, and personal development market, and sought statistics regarding our target customers. Every step was continuously communicated with the team.

Results: Target Profiles, Competitive Analysis, Jobs to be Done, User Personas.

Tools: Google Meetup, Miro.

Because of the tight budget and timeframe, I couldn’t perform as much qualitative and quantitative research as I would have wanted. On the other hand, I gained most of the valuable data from existing studies and statistics in e-learning sector.

Key Insights

Learners (Students)

Prefer contact with the teacher.
Need to be kept motivated and accountable.
Want to discuss learning content with other students.

...,

Publishers (Teachers)

Creating e-learning content is frustrating, it demands skills and tools.
Promoting/marketing the learning content is time-consuming, and demands skills.
Branding is very important. Teachers want to have full control over the styling, e.g. logo, brand colors etc.

...,

4. Devise Solutions

In the first round, I focused on the interface for learners (students). For this part, I designed a new user flow, communicated it with the developers, then made a click-through prototype and verified it (remote-tested) with 5 users.

Results: User Flows, Information Architecture, Mid-Fi Wireframes, Click-Through Prototype.

Tools: Figma

Mid-fi prototype made in Figma. Try it out here.

It was a challenge to design solutions within the budget, timeframe, and most importantly the back-end architecture that has been in place already. The key was to propose realistic changes that bring high value for the user and the business. I first focused on the experience of a learner (student).

5. Streamline Design Process

Before, the design process lacked components-based approach. Hand off involved guess-work from the developers resulting in undocumented overrides and inconsistencies. Together with the visual designer, we implemented a solid DS in Figma that mirrors the React Material-UI components used by developers. Result is a pixel-perfect, components-based approach with versioning, documentation and design tokens in place.

I went one step further and implemented “real data”, i.e. specially formatted text layers being filled automatically with data from JSON objects coming straight from product database. That way, designers switch between language mutations (English, Dutch) on a finger snap, right in Figma.

Results: Design system that made the operations 60% faster.

Tools: Figma

6. Implement Solutions

I broke up the implementation plan into five sprints. Together with the visual designer, we created pixel-perfect designs for various devices. In addition, I have devised hand-off operations to ensure the developers understand exactly what they have to implement.

Results: Sprints Roadmap, Hi-Fi designs.

Tools: Figma, Notion, Miro.

Setting up the design system took longer than expected which rendered the developers idle 😴. Not efficient. If I could start all over, I’d communicate more with the developers in order to better define tasks they can work on up front.

...,

Before

After

Before

After

Next Steps

Preliminary user testing already showed an increased engagement. Whether the solutions are successful will only be proved in another round of testing after all features planned for this set of sprints get implemented. Test parameters and key performance indicators were already set in step 1.

The next milestone to reach is the experience enhancement for the publishers (teachers).

Impact

UX Strategy

Creative sessions that I facilitated brought clarity in the business model, customer profiles and overall strategy, for the whole team.

Consistent Design

The new design system ensures consistency across all views which I hope will result in increased trust and engagement.

Design Process 60% Faster

The newly implemented components-based approach makes creating designs 60% faster as the measuring before/after shown.

Hand Off Efficient and Fast

Developers now have a clearly documented Figma components which mirror the React components they use. That makes writing the code much faster. Introduced design tokens ensure consistency and comprehensible overrides.

I am amazed at how much we managed to achieve within just 4 months. I have enjoyed the most ideating solutions and user testing. It’s been a great journey and I look forward to the next ride!