Hachi “How it works” Redesign

One-day design sprint I did for one of my internship submission

It’s just one day left to your final exams. You have not got any internship for the upcoming vacation yet. There is an internship test assignment that you have to submit. This is your last chance to get one. And you have to prepare for the exams too. What now? Stressed?

Well, so was me. This project came to me as one of the last internship assignment submissions and also, my last hope to get an internship. As per my usual instinct goes, I prioritized this assignment over my exams. The task, though not so simple, took only 12 hrs for me to finally submit the design after all the research, exploration, sketching, designing and documenting the whole process side by side.

The primary reason I’m sharing this design process is to show how a stressful situation is not a roadblock to create a good quality (at least in my opinion) work in a very tight timeline.

The task

The task was to go through the current design for “How it works” (https://teams.gohachi.com/#howitworks — #1 — #3 steps, and the 4 images below it), and then re-design it the way I thought it should have been done. The target audience was enterprises in US.


Hachi is a data-driven, one-click referral hiring solution that helps employers, hiring managers and recruiters find the most talented candidates within their team’s professional and social networks. They have intelligently automated the employee referral process, making it one-click for employees to refer. Thus for the new onboarding users to use the product, it’s very important to explain the process in a clear and crisp manner.


Section to be redesigned

The existing section for “How it works” needed a clean and robust look. So, I decided to dedicate a whole new page to it, given its importance. I wanted to break down the stereotypical image of the recruitment process being cumbersome and tiring, and present it in an interactive way.


In order to add interactiveness to the page, I decided to use a mascot. Most of the big businesses use mascots to personify their brand. The mascots resonate with customers, inspiring them to engage in conversation and share content. Mascots such as Flo from Progressive, the GEICO Gecko, and Tony the Tiger have brought significant social media success to their parent brands.

Stages of mascot designing

Initial Sketches

As it was a one-day design sprint, I started by sketching rough wireframes on paper. Initially, I explained each steps with the help of a mascot but having used the mascot 4–5 times in a page made the whole design childish. Thus to balance the warmth and seriousness on the page, I decreased the number of mascots in the page and replaced them with minimal UI illustrations depicting every step of the process. I then moved on to designing mockups on Adobe Illustrator.


I decided one typeface for the website and consecutive font-weights for visual hierarchy. I chose orange and green colors to reflect youngness and warmth of the page. According to color theory, the orange and green colors represent enthusiasm, creativity, determination, attraction, success, encouragement, and stimulation (Reference: Google).All these traits are apt for a company which makes hiring top talents easy.

Final Design

Summing it up

The folks at Hachi really liked my submission and they offered me an internship. Although due to family constraints, I couldn’t accept the internship offer but I really enjoyed the design sprint. And fortunately, I did not fail in my final exams too.

That was all about this project. If you have any other project, you think, we can work together on, feel free to contact me at yadavnikhil012@gmail.com