Product Design

AmbitionX

Case Study

AmbitionX

Work
Product Design
Worked as the sole designer while collaborating with a UX lead. I also worked cross-functionally with a project manager and a team of engineers. This project lasted from Feb 2021 - Apr 21.
AmbitionX Leaderboard

InvestIN is an education focused company that offers students an immersive experience of their dream career through simulations, seminars, Q&As with industry leaders and personalised career coaching. InvestIN approached my team to design an ed-tech platform for their students called AmbitionX.

The Process

Initial Scoping

Following the kick-off of the project, I was given a defined scope from the developer team, which defined the functionality from the client. While the scope was well documented, we wanted to dig deeper with the stakeholders to find out more about the intentions and needs of AmbitionX.

We worked on a UX Workshop where we can discuss our initial research and delve deeper with the client. In preparation for the workshop I fleshed out an Information Architecture Diagram based on the scope to get a better understanding of the platform before the call and to also showcase with the client. We also drew up persona assumptions based on the scope and discussed this further with the stakeholders during the workshop.

Information Architecture

Slides from UX Workshop

The Goals

Following the workshop we realigned and decided on the goals for the project:

  • Create a platform for students to view and track their learning journey.
  • Encourage students to book onto new and similar programs.
  • Communicate to students when there is an exam or further reading for the program.
  • Ensure the platform is suitable for children aged 12-19.

Stakeholder Management

During the early stage of the project we decided to change the strategy of stakeholder management to weekly design stand ups. This allowed us to create the designs, get feedback faster and make amends within weekly sprints. Along with this we introduced the stakeholders to the wireframe design process by explaining the importance and benefit and creating a visual language for the frames that they found easy to understand.

Wireframes

Designing for Children

I conducted research into the principles to apply when designing for children and came across the Designing for Children's Rights Guide of which I aimed to follow the following principles:

  • Everyone can use.
  • Give me room to explore and support my growth
  • I have purpose so make my influence matter
  • Offer me something safe and keep me protected
  • Use communication I can relate to

Gamification & Driving Habit

Early on in the process we recognised the need to include gamification aspects to platform in order to drive learning habits for the students. Adding gamification aspects to the platform would act as a way to challenge users and help them track their progress by assigning XP points.

In order to achieve this I relied on learnings from Nir Eyal's book, Hooked, to guide the creation of a habit-forming feature.

Hooked Model for the Platform

With Eyal’s book in mind, the trigger is both internal and external. Internally, students feel the need to be join or complete a programme (either by parental influence or career motivation). Externally, the platform sends a push / email notification informing the student that their programme about to start, exam needs completing or further reading has been published. Alternatively the external trigger is a notification that informs students of new programme suggestions on the platform. Acting on that trigger, users open the AmbitionX Platform and engage with the programme or platform. Upon the completion of a programme, the student experiences variable rewards as they will gain Experience Points (XP) making them feel accomplished. Finally, the more that the student stays consistent with programmes, the more they invest in their personal career growth.

The Solution

When stakeholder ideas affect the UX...

After the successful completion of the wireframe stage we moved into the visual identity of the design stage, the stakeholder requested for a dark Netflix style background for thee platform. This immediately set off alarm bells for myself and the team; due to the nature of the education platform we felt that a dark background did not match the context of the site and would present possible readability issues.

In order to get the best for the users we suggested a UX Design Workshop with the stakeholders in order to present the case and with reasons why we are moving away the dark background suggestion. In the workshop we discussed the complexity and cognitive load as well as how dark backgrounds should be used in certain contexts and how in the case of AmbitionX it affects usability and readability.

Slides from the Design Workshop

We were able to come to a middle-ground where we utilised purple elements of the stakeholders design guide to complete the design of the platform. Below I go over some of the main pages for the platform.

Dashboard

The dashboard acted at the anchor for the site, students are able to see an overview of their progress, view upcoming programmes, explore programme recommendations and navigate to other pages in the platform from the dashboard.

On the top of every page we have an Activity snapshot, the snapshot informs the students on their overall XP level, their top career level and their top competency level. The snapshot also aims to encourage the students to complete more tasks in order to get to the next level. Notifications and a direct CTA to 'my programmes' also lives within thr global activity snapshot.

Dashboard Screens

Progress Page

The aim of the progress page is to allow the students to view their journey within the platform and also to motivate them to continue the learning journey. By using data visualisation methods to create visual graphs it aims to help students to recognise growth quicker. Going down the page students can see an overall snapshot, an interactive XP progress graph, spider diagrams to showcase their most popular career and competency levels, regions to show progress in individual career and competency levels and a region to showcase progression history.

Progress Page

Leaderboard Page

Students can compare their overall, career and competency ranking against other members of the platform. We decided to include a leaderboard opt out feature to ensure that students have the option to remain anonymous if they wanted to.

Leaderboard Pages

My Programmes Page

This page is dedicated to showing the student which programmes they have signed up for. They are able to see upcoming, in progress and previous programmes. Programme cards show key information about the programme, session times, XP possibilities, pre or post session resources as well as informing the student of any exams associated with the programme.

My Programmes

Exam Pages

Some programmes may come with multiple choice exams that students need to take in order to complete the programme. For the exam page section I designed an exam information page, exam question page (that sits in one viewport) and an exam results page.

Exam Pages

Onboarding Pages

Onboarding pages were designed to help new students onboard to the platform and choose careers that interest them which would be used to inform the recommendations algorithm.

Onboarding Pages

No Points Pages

I had to consider the design of pages for the use case of when students have just finished onboarding and don't have any populated data within the platform. To accommodate for this I proposed designs that feature background blurs to showcase that the region will look different when populated and to encourage the student to join a programme to find out what the full view looks like. I also added tooltips across multiple pages to help students who may have questions.

No Points Pages

Learnings

This was the first time spearheading the Design on a project and I am grateful to the UX Lead for his mentorship and giving me the space to make decisions and grow as a designer on this project. The client was very happy with the implementation of the UX focused project method that he sent it many positive feedback comments to the company about the work we were doing. I even won employee of the month as a result!

My main takeaway from this project is to adapt the way you communicate with stakeholders and members of the team. Everyone responds to things differently so by tailoring your communication to best suit that the results of the project become more positive.

Other Projects