Ga naar inhoud (Druk enter)

Sammy de Keijne

Freelance Digital Projectmanager & Designer

  • Home
  • Projecten
  • Over Sammy
  • Blog
    • Digital Projectmanagement
    • Digital Strategie
    • Digital Design
  • Contact
UX Design

TU Delft Online Learning platform

Rol: UX Designer, UX Researcher (Freelance)

TU Delft (Technical University) has an Online Learning platform with over a 150 online courses and 3 million learners from all over the world. They offer a wide range of topics on engineering and more. I was asked to functionally and visually redesign the course page template for better usability and visitor engagement to ultimately educate more and more people over time.

As the Online Learning platform already existed, the team had already gained valuable insights in user behavior. They concluded the need for some new handy functionalities like the ability to save courses to a favorites list, but above all, they needed the template to be more flexible to manage and to be more engaging to visitors.

[…] Wanted to thank you personally again for the dedication and serious manner with which you took on this project, and of course, for a great design! We are very happy with it and can’t wait to implement it.

Daniel Agmon, Digital Marketeer at TU Delft

End result

Click to enhance :).

Old design

New design

Keywords: conversion optimization, e-commerce, responsive design, Figma, usability testing, content migration, design system, UX design, UI Design, Digital Design.

Process

For me, the process for a UX Design project almost always exist of the following parts:

  • Kickoff
  • Research
  • User Centered Design Strategy session(s)
  • Sketches / Wireframes
  • Design System
  • Clickable prototyping
  • Usability tests
  • Deliver final clickable prototype

Kickoff

Miro board with a backlog of all briefing elements translated to user stories and DOD’s during the kickoff.

Often I see people dive into a project without really knowing the true goals and meaning for the end user. The kickoff is not only an introduction for all team members, it is also a moment to translate the team’s insights and needs & wants into a backlog (based on Scrum principles) of priorities and a basic planning. Using Miro (tool) as a online whiteboard, we were able to really dive deep into each wish and translate it into a user story and a definition of done (DOD).

Research

Miro board with important findings of Google Analytics, a competitor design analysis and earlier reports on usability.

In this step, I review findings from Hotjar, Google Analytics, Search Console and other resources. It’s also important to review earlier research, surveys or other documents that might help to make a good first design.

User Centered Design strategy session

Miro board with persona’s, a priorities brainstorm and in-depth structures of the current website.

User Centered Design (UCD) is a principle which let you put the user first in all design decisions. In a session with key team members we are taking a good look at the target group and the design concept to make sure the user is served best.

In this specific project persona’s didn’t exist yet. So first, we explored what type of user we are dealing with and what segments we can define. This alone can be a project on its own, but with a team that knows it’s customer well, it shouldn’t be to complex.

With these insights, the structure and abstract concept of the new design is drawn out so we can begin to visualise what element is most important and what elements are missing. In this project, it was also a must to map all components to make sure content migration was easier for the developers.

Sketch

Miro board with first wireframe sketches of the new course template and real world examples to show more detail.

Finally I begin to sketch wireframes which visualise the functional design of the new template: where should elements be placed, what functionality should they have, how prominent should they be etc. Throughout the entire process I also check with the team to ensure (technical) feasibility.

Prepare Design system

Figma (design tool) document with styling and components

The Online Learning platform already had its own specific visual design, so it was important to not change everything for the course page alone. I remade the font styling, colors and basic elements like buttons in my document so everything remained the same throughout all design versions. This does not only make the design look consistent, it is also important for a developer not to make a ton of exceptions in the CSS stylesheet for this particular page.

Clickable prototyping

The designs are made and translated into a prototype. One for mobile and one for desktop.

Usability tests

Although testing the concept and design with real users can be a significant investment, I always recommend doing multiple (usability) tests during the design process. This way we verify whether our assumptions are correct and whether the design actually contributes to the set goals. With this, we increase the chances of success.

TU Delft acknowledged the importance, and (within budget) we invited real users within their target group to join and test the prototype via Zoom.

A few important assumptions were invalidated. Without the signals users gave during these tests, I dare to say that the TU Delft not would have gained a small percentage of revenue in comparison to the old design. And of course, the tests are always a good way to settle arguments within a team…

Results

The design is currently still being developed. Results are expected by the end of 2021. Visit online-learning.tudelft.nl to explore the current design :).

Gerelateerde projecten

Rotterdampas

Rotterdampas (IN10)

5 juli 2020
Euroclear branded racegame

A branded racegame

27 juni 2020
UX Design - EenvoudigInkopen.nl

Eenvoudig Inkopen

26 juni 2020

Over Sammy

Werk met me samen als Digital Projectmanager, Scrum Master, Product Owner en/of UX Designer. Mijn kracht ligt bij het concretiseren van ideeën naar (digitale) producties door een sterke strategie en het verbinden van mensen. Leuk je te ontmoeten!

Lees meer

Populaire artikelen

  • Designer-PM's zijn de 'next unicorns'
    Digital Projectmanagement

    Designer-PM hybrids zijn de ‘next unicorns’

  • Digital Projectmanagement

    Hoe kies je een goede website developer?

Contact

Wil je kennismaken of mijn tarieven weten?

✉️  hello@sammydekeijne.nl
☎️  +31 (0)6 36 306 776

Of stuur een bericht via LinkedIn.

© Copyright2023 Sammy de Keijne. Perfecte portfolio | Ontwikkeld doorRara Theme.Aangedreven door WordPress.