Hypocampus

Bachelor thesis

Concept development of a mobile application for doctors and medical students: Design for Hypocampus with a focus on usability and learning

Scope - 16 weeks
Team - 2 people
Role - UX / UI Designer
Tools - Figma

Background

Hypocampus is Sweden´s leading digital study platform for medical students with the vision to raise the knowledge level of the medical profession. The platform includes fact-based literature with associated questions, curricula and practice exams. As a need for a mobile application has been expressed by their users our role was to explore how the website design and content could be represented in an app, as well as investigating if and how the learning and usage would differentiate between the two platforms.

Process

Interviews

Seven semi-structured interviews were conducted to gather information about how the users experience the current website, how their usage differs between desktop and mobile, which factors affect their learning and what they wish for in an app.

Thematic analysis

To find common themes quotes from the interviews were collected, posted on a board, and sorted into groups. Each group was given a caption summarising the theme of the group. We got most input about areas and occasions of use where the users for instance mentioned that they use Hypocampus mobile version for shorter periods and mostly for answering questions and quick repetition.  

The analysis resulted in a specification of requirements including already existing functions, desired functions, as well as requirements to achieve high usability.

Ideation

With the specification of requirements as a base we started the ideation using brainwriting and brainstorming. Areas that arose and was explored further were making the platform personalized, adding a home page, new functions, navigation, layout, and visualizing the progress.

Wireframing and Prototyping

Further the ideas were visualised using wireframes. Different alternatives of layouts, components, and functions were explored and combined to find new solutions as well as evaluated if they met the requirements.

To allow quick access to the most used functions we added a homepage where the user can easily continue where they last left off, search for specific areas, and watch their progress.

A navigation bar was added at the bottom of the screen to allow quick navigation between the homepage, the library, study plans, practice tests, and profile.

Components were compressed and widened to fit the screen more efficiently than before and hence reduce scrolling.

Design system

For the concept to be coherent with the website the same colours, fonts, symbols, and images were used.

Final Design

Home page

Hamburger menu has been changed to a bottom menu for quicker navigation.

Instead of being directed to the library when entering the website we have added a homepage where the user can continue where they last left off, read the case of the week, and get an overview of their progress and goals.

Original
Redesign

Library

The books are placed in alphabetical order instead of random to make it more logical for the user.

The components have been made smaller and more space efficient to reduce scrolling and provide a better overview.

Original
Redesign

Chapter

Unnecessary information has been removed.

Buttons have been made bigger with a better contrast to the background and changed labels to be more notable and easier to understand for the user.

Original
Redesign

Questions

Instead of having to go back to the library to read the associated chapter the user can switch between read and quiz mode at the top of the page.

To get a better overview of how the user is doing we have added the dotted progress line with green and red for every answered question.

Three dots above the text box have been added to make the user more aware that three answers are required.

Original
Redesign

Practice exams

A scroll menu was added at the top where the user can select what exams they want to be shown instead of having to scroll through all the exams.

The component for each exam was redesigned to be coherent with the rest of the app and reduce scrolling.

Original
Redesign

Evaluation

To answer the question whether our concept would increase the satisfaction and efficiency user tests with seven medical students were conducted. During the test the users got a number of tasks they were to complete in both the prototype and the original version. After each task the users were asked associated questions, and to finish off they answered a form about their over all experience consisting of semantic differential scales.

Layout and navigation

It was found that all participants thought it was more efficient and easier to find what they were looking for in the prototype due to the navigation bar, comprised and reordered library, and new sectioning. The size and layout of the buttons was another factor that was mentioned facilitated the navigation.

Aesthetics

Additionally the participants were asked how they perceived the aesthetics of the prototype versus the mobile version and whether this would affect their usage frequency. All participants found the prototype more aesthetically pleasing but there were split views of whether their usage would increase due to it or not.

Usage

All participants considered the prototype to be more personalized and expressed that the profile page now have a bigger purpose and gives a better insight about their progress than before. The new function of adding goals was appreciated by some of the participants who said it would increase their motivation and allow them to structure their studies while some said they would not use this function due to fear of not being able to complete their goals. There was also split opinions on whether positive feedback would motivate the user or not. Some thought it would enhance their experience and increase their motivation while others didn't think it would affect their usage.  

When asked if an app would increase their usage six out of seven answered yes. The primary factor was that it would be more accessible and easier to use than the current mobile version.

Want to dig deeper into this project?
Read the full paper

Learnings

Through this bachelor thesis in collaboration with the company Hypocampus, I gained experience in meeting their requirements and expectations, while also applying the knowledge I acquired during my education. As I had limited experience with the medical profession and medical students, it was crucial to work closely with the users to ensure their voices were heard.

© 2024 Lovisa Tholén  All rights reserved