01

The Problem

The stakeholders opted to rebrand the company prior to launch due to dissatisfaction with the current prototype. The prototype required the updated brands aesthetic to be of higher fidelity. Additionally, to design new features for the website to complement the rebranding effort. They also wanted a designer who can help speed up development, through the creation of front end components for the new website.

My Design Process

Previous to my arrival the stakeholders hired someone to design and prototype the website on Adobe XD. The stakeholders decided to rebrand after they did a competitive audit. They wanted the prototype to follow the new rebrand, they also needed more screens to flesh out important flows for the user and for the developers.

• Understand the Users: To understand who and what i'm designing for I need to know the audience and the business's product.
• Understand Product Features: The Stakeholders have a pretty clear list of features to implement, asking about features I am unfamiliar with.
• Build New Prototype: Build new prototype with a new understanding of the users and the owner's vision, learning from the previous prototype.
• Usability Test New Prototype: Then perform more usability testing on the newly created prototype, to catch user needs before development.

Target Audience

Before I begin anything, I need to know the target audience for this product. The stakeholders provided insight into the target audience for this product.

• Novice Software Engineers: From university to bootcamp graduates and career changers, those entering this workforce for the first time.
• Experienced Software Engineers: Veterans in the field but are looking for another position, and have to brush up on interviewing skills.

This means it will be mostly a desktop application because not many program from their phone, everything will still be responsive except the coding screens.

02

Stakeholder Interviews

Now that I know who the company is trying to appeal to. The next step was understanding what the company is trying to accomplish, their perspective and their business goals. This meeting allowed me to shape the design process, define success metrics, and ultimately meet their expectations.

Success Metrics

I defined three metrics to measure success on this project. One to test usability on my design. Two when the product goes live to see how much people are buying the course and the satisfaction of those using the course.

• Task Success Rate: Determine how intuitive the website features will be by performing usability tests.
• Conversion Rate: When the product is live determine how many people are buying a subscription to the product.
• User Satisfaction Score(SUS): Ask users through a quick survey after a month of the product going live and specifically to those who purchase the course there satisfaction of the product and its interface.

03

Understanding Features - Old Prototype

I was giving access to the old prototype and at this point the company name was Algo Academy. The prototype was surprisingly bare bones with no real written concent or photos, it was more of a low-fidelity mockup. But it did give an overview of some of the key features, along with talking to the stakeholders about the features I got a pretty good idea of what their vision and structure of the site they are trying to create.

04

Prototype

Knowing the features required I rebuilt the prototype from the ground up in Figma. This time adding content for images and text, matching the brands new identity. The owners told me that they would be implementing judge.io into the project so the code screen had to look a specific way.

Here are some notable features that were added or improved upon, during this new design.

• New Homepage: A homepage showing comparisons, features, CTA's, testimonials, F.A.Q etc.
• Accordion for Course Content: Made the course have an accordion format for adding future content and showing what the user currently needs.
• Updated Coding View: Added more tabs for hints and templates along with a settings for things like dark mode.
• Separate Account Information: Separated important account information into sub-pages instead of just one page for less clutter and enabling a billing screen.
• New Copy: Wrote new content for the prototype aimed at promoting the course and navigating the user.

05

More Feature Requirements

They were satisfied with the other pages, but they wanted more features with the homepage.

• Less flat hero: Aesthetically the hero was too flat, they want more depth.
• Email Signup: Free sign up course for users to test out the material before purchase.
• Ability to show video: Add a spot for a video explanation of what techinterviews is.
• Visual Comparison: Wanted to show users a comparison between the offerings the competitors have vs techinterviews'.
• Back to Top Button: Since the pages are long, I figured a back to top button would be appreciated by users.

Altering the new homepage based off these requests. This is was the final prototype before being handed off to development.

Unfortunately the last step in my design plan was cut due to time constraints. I wasn't able to convince them to perform usability testing on the prototype before development. So it was time to move onto development.

06

Development & Success Metrics

Development

Several modern web development frameworks, libraries, and languages were implemented in this project, including ReactJS, Bootstrap, Node.js, TypeScript. I mainly took charge of the front-end work (HTML, CSS, JavaScript, TypeScript) and used GitHub to work with back-end developers. It was efficient to be both the designer and developer of the project because I had full control of the of the components which ensured consistency. Involving in front-end and design work, allow me to think from both perspectives and consider more about the feasibility of the design.

Success Metrics

Returning to the success metrics, task success rate was never tested, but the other two data sets were gathered a month after launching.

• Task Success Rate: Unfortunately, This never happened due to time cuts.
• Conversion Rate: 3.11% conversion rate, 354 made the purchase out of 11,043 visitors to the site, reflecting the marketing efforts and site's ability to persuade.
• User Satisfaction Score(SUS): The average score was 82. Administered to a sample of 107 users, where users were asked to rate their agreement with a series of statements related to website usability and satisfaction on a scale of 1 to 5. Validating the user centric design.

07

Next Steps

• Perform user testing on the live site, asking about any features the users might need and how they feel about the current features. We want people to use the product and fixing issues on launch will keep people around for longer.
• Request that developers address the issue with the save state of the course accordion content, as it fails to remember which sections the user had opened or closed upon reloading.

08

Reflection

That was my time with techinterviews.io, it was a fun one! It felt good and was very insightful to collaborate so closely with stakeholders. Take a look at the live site below.