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

Achievements

  • UX strategy
  • Improved UI
  • 60% faster design process
  • Faster and more efficient development
iphone mockup
iphone mockup

We’ve been developing our product for the last one year but never ever conducted any user research or usability tests. As we’re getting our first customers, we need to know how the users perceive and use our product, what to improve and how to do it efficiently. Can you help us?

Nuri Bayram, CEO Skilltransfers

Context

Skilltransfers is a SaaS start-up company that offers an internal learning management system to businesses and an e-learning environment to individuals serving as a platform to publish content and manage students.

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

  • Complete UX strategy
  • assess current UI
  • carry out improvements
  • help close the gap between design and development

6 Steps Plan

  1. Understand the Business and Product
  2. Understand the Users
  3. Assess User Interaction
  4. Draft and Test Solutions
  5. Streamline the Design Process
  6. Implement Solutions

1. 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 out rather creative workshops which I gladly facilitated.

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

Tools: Miro, gSheet, whiteboard, Trello.

2. Understand the Users

I remote-interviewed two customers, read studies on 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.

Learnings: Looking back, I wish I could interview more users and conduct a survey.

Research brought three important insights💡… 1. Creating e-learning content is frustrating, demands skills and tools; 2. Promoting the content (e.g. courses) is perceived time consuming; 3. Branding is very important to users (teachers). These insights helped shape the business model (especially key activities and value proposition), and set a clear course for the customer journey.

...,

3. Assess User Interaction

I carried out a UX heuristic assessment 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 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.

Results: Evaluation Results (presented to the team), Preliminary Solutions.

Tools: Hotjar, Google Analytics, Google Presentation, Facebook Creative Hub, Trello.

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

Nuri Bayram, CEO Skilltransfers

UI Assessment in Pictures

10 points heuristic UI evaluation

benchmark table heuristic evaluation hand written
The goal was to get an overview of the system. identify UI issues, and define what to focus on in further research.

Facebook campaign

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

Data gathering

presentation slide data UI assessmentData on the measured user interaction. This data serves as success/fail metrics.

Evaluation and recommendations

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

4. Draft and Test Solutions

After setting up priorities on what has to be changed first, I proceeded with wireframing solutions. Next, I communicated the final draft with the developers, then converted it into a click-through prototype and remote-tested with 5 users.

Results: Mid-Fi Wireframes, Click-Through Prototype.

Tools: Pen and Paper, Figma.

iphone mockup with mid-fi wireframesMid-fi prototype made in Figma. Try it out here.

I had a tendency to overhaul the design and come up with something new. But that would skyrocket the costs and undermine the team morale 😩. I had to respect the progress the team made so far, and the budget. The key was to propose realistic changes that bring high value, which I did 💪️.

...,

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 even 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: Versioning, Design Tokens, Components, Pixel Perfect Designs, Designing 60% Faster.

Tools: Figma, Miro.

6. Implement Solutions

I broke up the implementation plan into five sprints. Together with the visual designer, we went on creating hi-fi screens for various breakpoints.

Results: Roadmap Break Down into Sprints, Hi-Fi designs.

Tools: Figma, Trello, 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.

...,

Catalogue page. The visitor is better informed about the service, feels welcome and willing to engage more. Customer’s brand is taken into account.

Design before

Design after – desktop

iphone mockup

Design after – mobile

Introduced a separate page for course details – better for the SEO, and promotion. Improved interaction with lessons (skills).

Design before

Design after – desktop

iphone mockup

Design after – mobile

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.

Jan is a great UX and business thinker. He chooses projects he is passionate about and then thinks of structured ways of working that benefit the whole development process. Jan wants to be excellent at what he does and he has an intrinsic motivation. He will also try to find the best ways to add value to the team as well as to the customer. He came up with ideas on how to measure users behaviour for our app and how to report on those. Besides a good UX/UI, Im sure he would also be a good product owner.

Nuri Bayram, CEO Skilltransfers

I enjoyed a lot working with the Skilltransfers team! We found ways how to work together efficiently and with fun. Mission accomplished! 💪 🕺

...,