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.
10 points heuristic UI evaluation
The goal was to get an overview of the system. identify UI issues, and define what to focus on in further research.
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.
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.
Mid-fi prototype made in Figma. Try it out here.
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.
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
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
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.