Job Assessment
As part of an assessment for a Junior UX Designer position, I was asked to work on 3 different tasks focusing on hope3g.com, a charity website that provides tablets for young children to learn essential skills through the use of AR.
Task 1 - Design the Main Page Wireframes
The 1st task of the assessment was about building wireframes and information architecture for the website homepage.
​
Whilst the existing page is cheerful and appealing, it is also quite long and requires the user to scroll for a long time. It feels also a little bit outdated and the content speaks more to children than to parents and professionals who can actually purchase the tablet.
​
The wireframes I built are succinct and straight to the point. The repetition of the CTAs grab the attention of the user and the content aims for a more adult public.
​
I've also added the main video at the top of the page so the user can quickly interact with it.
​
The main navigation was also updated. It feels less crowded and incentives the user to schedule a demo/buy the tablet thanks to the prominent CTAs.
​
Click here or on the image to access the page in Figma.
.png)
Task 2 - Improve User Journey and Interaction Design
​
For this 2nd task, I had to choose one of the pages under the "explore" tab, list its pain points and suggest solutions.
​
I focused on the media centre page.
​
Here is a list of the main user paint points I found:
​
-
There is no hero text explaining what the page is about, nor any context introducing the videos.
-
The page is too long to scroll.
-
At first glance, it seems all the videos are the same. You need to click on them to actually see they're different.
​
Here are the solutions I implemented into the wireframes:
​
-
I added content to the hero section to explain what the page is about as well as a CTA (also present at the bottom of the page) to incentive users to contact HOPE. Context has also been added to each video.
-
The page has been shortened thanks to video carousels which present HOPE's team members and the charities the company support.
-
Since each video has an introduction and a thumbnail, it is more obvious they are different from each other.
​
All those changes should greatly improve the user experience and the interactions with the page.
​
Click here or on the image to access the page in Figma.
​
Task 3 - Visual Design Mockup
​
For the 3rd and last task of the assessment, I had to prepare visual mock-ups for the "About Hope Art" and "Buy now" pages.
About Hope Art
On this page, the user can find information about Hope Art and the AR tablet.
​
There is a lot of content that I thought would fit better under an accordion. That way, the user is not overwhelmed with information and they can choose to read the topic they're interested in.
​
With regards to the visual, I chose to keep the dark blue background which is a key colour for the company. I added some hints of orange and yellow that respect the codes of accessibility and fit well with the background colour. For the text under the accordion, I've used the Lato font in white which is a bit round, fun and easy to read.
​
Some of the website images have also been reused. Each accordion item displays the assets relevant to the topic.
​
Lastly, I made sure to add the "schedule demo" and "buy now" CTAs to incentive the user to interact with them.
​
Click here or on the image to access the page in Figma.
​
​
​
​
​
Buy now
In order to purchase the tablet, the user first needs to create their account. After confirming their email address, they are redirected to another page where they need to input once again their name and email address, then their home address and payment details.
​
I found the purchase flow could be made easier and faster.
​
In my mock-up, the user only needs to fill out one form. Their account gets created at the same time they purchase the tablet.
​
The other elements follow the structure of the initial page since they work well.
​
For the colours, I chose some hints of purple and blue like the orbs.
​
Click here or on the image to access the page in Figma.
.png)
_edited.jpg)
