Case • Job Assignment

HireWise

Overview

During my search for my next opportunity as a designer, the digital agency Addmore reached out to me. They were interested in my work and wanted to see what I had up my sleeve.

To assess my skills, they provided me with an assignment: creating a landing page for a forward-thinking HR tech company that helps businesses optimize their hiring process by making wise decisions with the help of AI.

Feel free to visit Addmore's website by clicking here.

Categories

Web design
Branding
Design systems
Prototyping
Interaction design
HireWise logo

Challenge

HireWise aims to offer a robust AI platform that streamlines the recruitment process and quickly identifies the best candidates for positions. Through their innovative AI platform, HireWise provides a range of solutions designed to meet the unique needs of businesses of all sizes.

Their AI-based platform offers powerful data analytics and insights, enabling businesses to make informed decisions about their hiring processes. Whether for a small start-up or a large corporation, HireWise provides the tools and expertise companies need to make wise hiring decisions and build high-performing teams.

In order to promote their new platform, HireWise is in need of a new landing page. The purpose of the landing page is to promote HireWise's AI-powered hiring platform to companies seeking to improve their hiring process and make perfect hiring decisions.

Deliverables

• Create a high-quality landing page to launch the new AI-based platform.

• The assignment should not take more than 8 hours of work.

• Design the landing page to be clean, modern, and futuristic, with a focus on simplicity and clarity.

• Ensure the landing page prominently features HireWise's key messaging and highlights the benefits of the AI-powered platform.

• Include a clear call-to-action on the landing page, encouraging visitors to sign up for a free demo or contact HireWise.

• Optimize the landing page for mobile devices.

My design process of the project

Exploration

After dissecting the provided briefing, I began my work by seeking inspiration. To better grasp HireWise's desired look and feel, I explored other companies in the hiring industry that provide AI-based platforms.

Considering the time constraint of only 8 hours for this assignment, the inspiration and competitor analysis phase took approximately 1 hour.

Collection of inspiration from competitor analysis

Let me tell you a story

When examining various sales landing pages, a pattern becomes evident: the most crucial information is placed at the top, details about the product are in the middle, and the trust factor is emphasized at the end. This structure serves a purpose – to engage the visitor quickly and persuade them to make a purchase.

Applying this knowledge to the assignment, I used sitemaps to narrate the product story in the most engaging way. Sitemaps provide insight into how the website will flow without relying on visuals or branding. They serve as an initial representation to the client, illustrating how to convey the story without any visuals.

As depicted in the image below, I created several sitemaps to attempt to tell the story in the most engaging manner. I broke down the provided briefing into different sections and iterated until achieving the final result.

Overview of my different versions for the sitemap

Putting the frame into wireframe

As you can see, I skipped the typical low-fidelity wireframing (the sketches you draw on a piece of paper) to save time in the assignment. That's why I began directly with high-fidelity wireframing. I utilized a wireframe toolkit on Figma to expedite the process, which proves beneficial when working within a time limit.

Why start a wireframe from scratch if someone else has already done the groundwork? Using a high-fidelity wireframe toolkit provides a quicker and more comprehensive overview of the landing page without incorporating any visuals.

Different versions of my wireframes

Designing the system

After the wireframing, I could finally delve into my favorite part of designing—setting up the design system. I created the project's look and feel by defining various elements within a design system. This included different styles for colors, buttons, components, typography, and status colors.

Utilizing a design system significantly reduces the time spent implementing the brand on the wireframes. To incorporate animation and interaction into the final prototype, I designed some components.

You can edit the values or content of a component when you interact with it. However, the most powerful aspect of components is that when you edit the main component, every copy of that component changes simultaneously.

Design sytem for the landing page

After the design system was up and running, it was time for the final step—applying the styles to the wireframes. This didn't take much time; practically, it was just clicking and applying. As a bonus, I added some interaction and animation to the prototype.

While this wasn't a required deliverable, I still had some time left. Going the extra mile demonstrates ambition and a genuine enjoyment of the work as a designer.

Mockup of he final result of the landing page

What have I learned

I must say that I enjoyed working on this assignment; it was also a good refresher on working on a web design project. I'm glad I had been given the opportunity to do it.

The most challenging part of this project was suppressing my pixel-perfect obsession. I wanted to prove myself and ensure the site was perfect in every detail.

There were moments where I lost some time due to this inclination. However, by working within a time budget and managing it effectively, I stayed on schedule and accepted imperfections in certain areas.