Three designs at Hypocampus
Hypocampus is a SaaS platform within edtech that offer users reading material online mixed with tailored question that should help them achieve their ambitions. The focus is on medical students in Sweden and France, but is also offered in many high schools and companies that educate their staff. The goal is to help people learn more in less time.
#1
Redesign Navigation
of online book content
The goal was to produce a responsive design, standardize all elements, improve layout, readability and contrast according to WCAG. Further we worked based on a mobile-first approach because the website is used on many different devices and the original solution did not meet WCAG on any device, especially not mobile.
The biggest problems with the original design from a UX perspective according to our user tests were navigation mistakes and too much cognitive load when scanning the content.
I started with low res sketches, had workshops with stakeholders and developed high res designs based on this. Then tested on real users and iterated from there. Future iterations were done after I developed an internal design system, which made the process much faster and smoother. After more iterations and user testing, we arrived at a final design.
Thanks to the new design we reduced the number of wrong clicks the users made on their first time using the platform, which was great! Making the content searchable was also really appreciated by users.
Final design
Original design
First iteration we tested on real users
#2
Redesign Dashboard
Our platform launched a dashboard on our French site a few years back but changes to other parts of the platform had rendered it less useful. A redesign was needed, and also some colour!
The goals we set where:
Help users make good decision on what to study next, and inform them of key features that are easy to miss.
Make the design responsive to make the experience on different devices better.
Give the users a way quickly jump back into the content.
The initial design was deemed too summarised after heuristic evaluation. It didn’t offer the users to deep dive into the data if they wanted to. So we instead made some refinements.
After the final design was implemented the users said they were more aware of what they should study and also more aware of changes to the platform because of the updated news section. This was just a “nice to have” update from our stand point, but it’s that it got some impact. The key features got used more which was an important metric.
Final design
Original design
First iteration
#3
Redesign of the Reading experience
Since the users spend most of their time reading on the platform we wanted to make that experience as smooth as possible. We wanted to help the user focus on the content but have the powerful tools available without stealing too much attention. We made data driven decisions when removing or moving features, and always adhered to WCAG during the whole process. This was an easy design to test in Figma with real users so we used that opportunity. The improvements might seem small at first glance, but there is a lot packed in there. The users said that the design felt fresher and appreciated the possibility to change font styling and size, as well as the width of the reading column.
Final design
Final design Settings open
Original design