HackerPen

Extending an Existing Design

 
 

 Client:

HackerPen is a web-based tool built to support software engineers who are preparing for technical interviews. It was created by two software engineers who saw an opportunity to help better prepare people for securing new jobs in tech. The HackerPen web tool is primarily built to facilitate mock technical interviews for both interviewees and interviewers. HackerPen’s co-founders are focused on growing their user base, growing engagement, and exploring potential product-market fit across other industries. HackerPen is a community-driven tech interview platform that brings candidates and companies together.

Team Mission:

Our mission is to come alongside and offer professional consultation to HackerPen as a team of UX designers by creating feature concepts for digital implementation. These concepts will ensure that HackerPen will continue to grow as a business and meet the needs of the their users as well as the business goals they have in place.

Plan:

Sit down with stakeholders at HackerPen to better understand the vision behind this project. Rapidly create as many feature concepts as possible. Choose several of the features and have them be technologically scoped by web developers. Put the feature concepts through a Kano Analysis survey and then design high-fidelity annotated wireframes that fit within the scoping deadline given to us by our client.

My Role:

UX Researcher, UX Designer

Methods:

Team:

Jared Burseth, Kevin Peterson, Mar E Townsend

Tools:

  • Pen and paper

  • Zoom

  • Google Sheets

  • Excalidraw

  • Figma

Deliverables:

Creating the best possible designs for HackerPen and their users.

Do this by understanding the client’s wishes for the future, empathizing as users ourselves, and creating intentional and meaningful designs.

HackerPen Goals:

  • Help better prepare people for securing new jobs in tech.

  • Help people and groups seize opportunities that shape their life and environments.

  • Help tech companies hire great people.

Initial Steps

Competitive Analysis

There were many steps that went into the final wireframe proposals. The first of these was a competitive analysis. Attaining a mental model of HackerPen was the goal behind this process. This analysis involved comparing HackerPen to its competitors and identifying features that were similar, different, or ones that might be beneficial to HackerPen moving forward as an entity.  

Above is a screenshot of the Competitive Analysis that my team and I conducted.

 
 

Going off the goals given us by the client, my team came up with several categories to compare HackerPen to its competitors. These categories involved HackerPen competitors and similar websites which were then put into a shared google spreadsheet and organized accordingly. Some of the comparisons:

  • Does the website offer courses?

  • Does the website charge for services?

  • Does the website have videos?

  • Does the website have a filtered search option?

Stakeholder Meeting and Journey Mapping

Once the competitive analysis was complete, the team had a meeting with one of the stakeholders at HackerPen. This interview was very informative and gave us insight into how HackerPen operates. It also revealed what problem spaces they are currently dealing with and readdressed the desire to implement new features based off our initial client briefing. The next step was to map out what the current users of HackerPen experience as they search for, find, and navigate through the space. The map started from the very first thought a user would have, wanting to be interviewed or hoping to conduct interviews and then looking for sites that provide such criteria. The journey map also reveals the emotional state of the users and highlights pain points throughout their experience. This was a great tool for empathizing with users by putting myself in their shoes and mapping it out.

Current Journey Map: What users are experiencing before the proposed features are added to the HackerPen space.

  • Touchpoints

  • Sentiment

  • Goals of both the interviewer and interviewee

  • What both user groups are feeling and thinking

  • Pain points experienced during the journey

Low point of user journey:

  • Interviewers not being able to get paid

  • Interviewees not being able to filter interviewers

High Point of user journey:

  • Interviewer being able to give back to the tech community

  • Interviewee gaining skills to use in real interviews

The current journey map reflects the direct touch-points users go through from start to finish. It is a visual representation of the customer journey within the HackerPen space.

Rapid Prototyping

Feature Sketches

After mapping out what users go through, examining the notes taken during the stakeholder meeting, and re-reading the client debrief, I came up with five low-fidelity feature concept sketches. The sketches visually represent a few of the changes HackerPen wants to implement as they continue to attract users to their website. The rest of the team also came up with their own individual sketches. In total, there were approximately seventy five low-fidelity sketches which would eventually be put into a collaborative whiteboard and voted on collaboratively. Before the voting commenced, we sat down with a web developer to help give us tech scopes for the sketches. Estimates or tech scopes were called shape-ups and there were three categories: small (1-2 days), medium (1 week), and large (4 weeks).

Here are the sketches that I drew along with a brief description of their intention. View them individually by clicking below.

Customer Delight vs. Implementation Investment

Kano Analysis

Once all of the feature concept sketches were scoped, they were placed into Figma and the entire team of fifteen came together to start to vote on the features that we thought would best serve our client. Each team member was given ten dots. Out of the seventy five concepts, ten were chosen. The concepts that had the most dots around them at the end of the timed voting session were the ones that would be placed into a kano analysis. A survey was then sent out to users of HackerPen. This survey included the features chosen along with questions as to the usefulness or value that the users found in them. When the surveys came back, the original team of four got together and went over the surveys. This analysis helped us prioritize which features to focus on during the design phase.

This is the Kano scale that my team and I used to analyze the user survey contents.

A screenshot of the Figma board with a few of the chosen features. The elevated ones represent user favor. View each one individually by clicking below.

HackerPen Wireframes

 

Annotated Wireframes

Moving onto digitization. After compiling the research and feedback from both the HackerPen stakeholders and user surveys, I switched gears and started creating annotated wireframes. The scope given by the client was six weeks. With this in mind, I decided to add several features which would help HackerPen meet their respective user and business goals. These features include:

  • Interviewer Marketplace

  • Interviewer bio/schedule

  • Scheduling an interviewer (made it easier for the interviewee to schedule far in advance in case of busy schedule)

  • Payment page

  • Rating the interviewer (this would help interviewers establish credibility and land them more interviewees)

  • Profile setting add-ons

  • Bonus: “Get Paid” button on the landing page

Once the new features were created, a future journey map was placed on top of the old one. This updated journey map helped draw attention to the positive effects these features would have on users if implemented. All of the research and design was then put into a feature proposal presentation and sent to the client.

 

The future journey map is a prediction of what users will feel, think, and experience after changes are made to accommodate their specific needs or desires.

 

Future Journey Map: Future state of the user journey once the new features are added. (Highlighted sentiment areas to signify the change)

  • Touchpoints

  • Sentiment (highlighted differences for both users)

  • Goals

  • Feelings and thoughts

  • New Features

Noticeable Differences:

  • The interviewer had the most positive change because of the added features that support them.

  • Both user groups had a better experience overall.

Feature Proposal Presentation