Kinder World

UX case study

About Kinder World:

Kinder World supports charitable organisations by raising funds, creating awareness and increasing their impact. It also helps donors to find trustworthy organisations.

Role: UX Designer
Duration: 3 months
Categories: UX Research, Information Architecture, Prototyping
Tools: Sketch, Zeplin, Keynote, trello


Problem:

1. No clear path for Kinder World's users (Donors and Organisations) to join Kinder World.
2. There are multiple titles on the homepage header that are misunderstood by its users.


Process:

User research -> Ideate -> Prototype -> Test -> Design


Research:

Explored and deep dived sign up and login pages, observed user journeys in similar industry and in companies that has multiple users (B2B & B2C).


Competitior analysis

competitors_kinder


Design:

After sorting through requirements and research data, I went through several iterations of design, moving back and forth between sketches and low-fidelity wireframes before moving to higher fidelity mockups and prototyping.

User flow
Mountains
Header restructuring


Usability test:

I conducted a usability test to understand the gaps in the navigation design for user sign up and login journey. I tested two different designs of navigation (A&B) with 5 users chosen from different backgrounds.


Design A: that leads to login/sign up options

DesignA
options
Observations:
  • All users were able to complete their tasks easily.
  • Two users got distracted by the titles on the nav bar which don't look like story names.
  • Few users would like to see a motivational video about Kinder World on the homepage.

Design B: with only login option on home page

DesignB
Observations:
  • Only few users were able to complete their tasks easily, rest users took more time to complete it.
  • A user clicked on ‘Donation tools’ title on the top-nav bar to check donation history which was incorrect.
  • Few users suggested to see some motivational content to join Kinder World on the homepage before creating an account.

After analysing the two user testing observations I decided to go with Design A

Kinder World homepage current design:
EarlierDesign

Kinder World homepage proposed design:
ProposedDesign
Login_Highfi

Design Inspiration:

Uber, GlobalGiving, Deliveroo, Booking.com


Design UI:

Kinder already has the design system in place, so it was easy for me to create hi-fidelity prototype.

Prototype


Key takeaways:

  • In the process, I made couple of designs and showed it to my team and learned that at the end of the day it is you who have to decide which design to go for and to be able to articulate clearly why you chose that decision.
  • Conduct several usability tests with low fidelity prototypes, before jumping into creating high-fidelity ones. This saves time and allow you to identify issues.
  • Try not to rush the process too much and be more patient, try out a few different design options per screen / section, and keep testing them.
  • I also believe that the scope of the project really matters before starting any project. Here, it helped me to create designs based on the agreed scope that is designing sign up and login experience for Kinder's users'.

    • View other projects