Take home technical alignment test
November 2021
UX Designer, UI Designer
About Getsmarter
GetSmarter is an online learning platform that provides professionals with a
betterlearning experience and equips them to thrive in the future of work. GetSmarter offersonline short courses from leading universities across the globe.

The Assignment
I was tasked to conceptualise a version of their online campus dashboard. This is a learningportal their students use to access and engage with their course material. The task needs to focus on a design for the general dashboard.

The Problem

Getsmarter's online campus learning portal is inaccessible and doesn't serve as much motivation for its students to take their courses with ease. They are looking to
re-design it keeping in mind that they would like there to be an activity feed as well
as social forums for students to interact on.

The Process

To start off with I had to cultivate empathy and a sense of who I am designing for. In order to do this I extracted and developed a protopersona based on the information provided to me. Thereafter I drew up the user flow that the student follows when interacting with the existing website of Getsmarter. These steps lead me to extract specific goals that I can aim for that is unique to the target audience that will enhance their experience with the online campus dashboard.

After establishing goals I started drawing up low fidelity wireframes. When I have decided on a direction for the layout and flow I start designing a higher fedility wireframe. At this stage I will make changes as and iterate where I see room for improvement. The final step is the prototype and final UI designs.


Proto Persona

Getsmarter has provided me with the following information about their target audience:

Our audience is working professionals looking to make strategic career advancements.They are interested in our courses that would help them get a step up in their currentrole and are interested in the quality and flexibility GetSmarter has to offer.

I decided to create a proto persona based on the above description that Getsmarter has provided me with in their brief. I have added more detail in order to be able to define a goal as much as  possible. I believe this is important if I am going to place myself in their shoes in order to guage what sort of unique needs the dashboard would need to meet.

Key Insights:
Some pain points that she might experience:

Analysing the existing product

I decided to analyse the existing dashboard in order to envision what sort of painpoints the user might be facing and what elements might already be working in the design. I also drew out the existing userflow of the site to see where the main points are and how the information is structured. This will inform my user story on the next step.

Key Insights:
Some pain points that she might experience:

Understanding the user

After analysing the website and envisioning what the user might be experiencing and bsed on the proto persona I created I wrote up a few priorities and pain points.

Sarah’s priorities are:
Sarah’s pain points:

Market Research

I decided to first look at existing online campus that are readily available online, such as EdX, Coursera, Futurel earn and Udacity. It’s not neccessary to reinvent the wheel if someone else already designed something that works. With this in mind I analysed these dashboards and took note of what I thought worked well on them and what I can redesign to work on Getsmarter’s dashboard.

Some insights I have extracted from these:

Coursera has a section that allows the user to customise their learning profile
They display progress and weekly goals that are customisable. EdX's section for important dates could be a hellpful element that brings attention to students for when they need to hand in assignments. Udacity has a simple and minimalistic layout that makes information digestible and not overwhelming to the student. All of them has a ‘resume where you left off' section. This is handy as maybe the student logged on knowing they just want to continue the course. This could be a primary CTA.


Design Goals

Based on the assumptions, information provided to me and limited insights, I was able to define a few specific design goals I would like to focus on for this use case.



After all my goals have been established and I have some ideas of what I need to incorporate into the design, along with the deliverables communicated to me, I start to sketch some rough wireframes on paper. Below you can see how I started to first write out all the existing elements on the pages and navigation items along with the deliverable requirements.  Originally I started designing for mobile, but soon realized I was going into app territory and since the existing product is a website I wanted to keep this format, so I decided to design the desktop website rather.

Drawing up low fidelity scamps help me oragnise and reiterate changes in the beginning phases of the design. I can see what will and wont work early on. These were drawn with pen and paper. After establishing the general layouts of these screens I went onto Figma and made some higher fidelity mockups.


The Final UI

Going Forward...

This was an interesting case study and I learned a lot in terms of empathizing with my user and how to design a dashboard for user.

Overall this was a fun and insightful excercise for me and I have learned a lot, especially when it comes empathising with my user.