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


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?
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
- Understand the Business and Product
- Understand the Users
- Assess User Interaction
- Draft and Test Solutions
- Streamline the Design Process
- 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.
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.
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.
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.