New main website

YEAR

2023

ROLE

UX/UI-Designer

Company

BRIS

Keywords

UI-design, User testing, User Research, High Fidelity Prototype

About THE PROJECT

Children's Rights in Society, BRIS, is a Swedish national organization in Sweden aiming to aid children and youth under the age of 18. The children can send messages to or chat with adults working at BRIS 24/7, or call a hotline about issues such as domestic violence and the death of a beloved hamster.

Challenges:
  • The current website had not been built on any user research, hence the knowledge of how kids use the web was very limited.
  • Kids are not adults, meaning they have different ways of using mobile devices, computers and apps.
  • There existed no designsystem or guidelines.
  • Apart from the results from my own initial testing, there had been no previous testning.

For starters, I needed to understand and benchmark the current website. This was done by testing with children and having a set of tasks, testing different flows and functions of the website. Before each task they were asked how difficult they thought the task to be on a scale 1-5. After the task was completed, they were asked how difficult it actually was on a scale 1-5. This is called an expectation measure and it allowed me and my team to pinpoint tasks and flows that were expected to be easy but was difficult in reality.

See the image below which depicts the results from the expectation measure test. The left diagram describes different tasks (numbers in circle) on the initial website, and the diagram to the right features the same tasks conducted on the final interactive prototype of the new website. The results show that tasks that was previously expected, i.e. task 4, to be easy but was difficult, are now as easy as expected.

Expectation Measure

The image below features a few early sketches, insights and a sitemap.

Insights, sitemap and sketches

Based on the insights, a new prototype was created in Figma. This prototype was as previously mentioned tested with expectation measure but also with a System Usability Scale, both with fantastic results. See the image below which features some frames from the prototype both in mobile and desktop as well as an picture from the user testning.

Frames from the interactive prototype

Responsive landing page on desktop
A picture featuring me conducting a user test

Key takeaways:
  • I discovered the value in conducting benchmarking on the initial design and comparing the same tests on the final prototype. When presenting to executives this is key in order to convey the impact of the design and how their product actually improves.
  • That children and youth browse website very different from and sometimes contradicting the adult usage.
  • When testning with children and youth other preparations are neccesary. They lose attention quickly so the test has to be fairly short but still fun and engaging while still making sure that they leave with a positive feeling.

Video showcasing the makeover of bris.se on mobile.

Next PROJECT