HackerPen

Overview

Background

HackerPen is a web-based platform built to support Software Developers with technical mock interview sessions. It began with a vision from two people to help others prepare for the technical industry.

Problem

To advance this platform, HackerPen is reaching to create a searchable marketplace for interviewees to find interviewers by expanding their search criteria to include an interviewer’s credentials/qualifications, cost per interview, and experience/skills. Other goals include incorporating a pay system to incentivize interviewers, a referral and feedback process, and a more fleshed-out scheduling journey in order to provide users with quality interviews and experience.

Task

Working in a group of 4 UX Designers, our goal to support HackerPen begins with evaluating pain points and opportunity areas and then redesign certain features for new proposal concepts.

We will achieve this goal by analyzing the current model of the application and research through a competitive audit, journey map, and rapid prototyping to create key features for HackerPen’s marketing goals.

Synopsis

HackerPen Logo

  • HackerPen

  • Andrew, Sami, Sara, Tad

  • UX Designer/Researcher

    • Research through a Competitive Audit.

    • Create a Journey Map of the user’s experience in HackerPen.

    • Hold stakeholder meetings to gain information on business and design goals.

    • Create feature concepts to analyze in a Kano Survey.

    • Design Annotated Wireframes of the final key features.

    • Competitive Audit

    • Journey Mapping

    • Kano Analysis/Survey

    • Annotated Wireframes

    • Technical Scoping

  • Figma, Google Docs, Miro, Excalidraw

The Journey

Click to scroll down the page and follow my UX journey

1) Competitive Audit

Take me there

2) Journey Map

Take me there

3) Feature Concepts

Take me there

4) Kano Analysis

Take me there

5) Annotated Wire-frames

Take me there

6) Feature Proposal and Concept

Take me there

Competitive Audit

Evaluating the Competition

To kickstart the project, a Competitive Audit was used to attain a mental model of HackerPen by comparing its current features with its competitors. Our goal was to find features that are either similar, different, or beneficial for HackerPen moving forward with our design and research.

Tool: Google Doc

View Findings
 

Analysis Criteria

We started with some criteria to analyze the competitors as listed below.

  • Price values

  • User Credentials/Qualifications (resume, experience, ratings, etc.)

  • User Experience/Skills (qualifications asked during their profile setup)

  • Ratings/Reviews/Feedback

  • Scheduling Process

  • Search Functions

Stakeholder Meeting

Once the competitive audit was completed, our team held a meeting with the client to garner more information about the application’s pain points and opportunity areas. This meeting revealed future concepts such as a referral and payment system. It also addressed several concerns with the search filtering when scheduling interview and other hurdles.

Journey Map

Riding a Rollercoaster

Using the results of the Competitive Audit and the stakeholder meeting, I mapped the user’s journey. The Journey Map entails several touch-points the user will go through, how the user thinks and feels, pain points, and areas of opportunity concerning their experience.

Tools: Figma

View Journey Map
 

Areas of Opportunity

While there are high-points in the sign-up and interview touch-points, there are pain points in the user journey to pay attention towards.

Pain Points

  • No Payment System

  • Lack of description

  • Lack of Profile Credentials

  • No Video Recording about the Interview

  • Poor Feedback Process

  • No Referral Feature

  • No Troubleshooting options

  • Lack of Filtering Options for Searching Interviewers

 

The lack of these features causes the curve to point downwards near the end of the journey. Thus, these are also key areas where HackerPen can focus on to market for a better user experience.

Feature Concepts

Drawing New Solutions

Using Exalidraw, I drew 5 wireframes that feature the opportunity areas found in the Journey Map and Competitive Audit.

Tool: Exalidraw, Zoom, FigJam

View Feature Concepts
 

Tech Scopes

I drew five low-mid fidelity feature concepts that wireframe key areas of interest for HackerPen. In addition to the feature concepts made by my three teammates, there were a total of seventy five features to vote on (in addition to the rest of our classmates at Prime).

We followed-up with the developer on Zoom and verified the tech scopes (the time needed to implement) for each wireframe. The estimates for the tech scopes are as follows: small (1-2 days), medium (1 week), and large (6 weeks).

Dot Voting

Afterwards, the feature concepts were pasted on a collaborative whiteboard in FigJam and voted on using an allotted number of dots given to each person. We distributed one dot per wireframe that best matches the category it was assigned under.

There were nine categories that the wireframes were organized by:

  • Credentials/Qualifications

  • Reviews/Feedback

  • Payments

  • Search/Filter

  • Networking

  • Scheduling

  • Profile

  • Video Interview

  • Misc.

 

As a result, we approved 10 wireframes to move forward with surveying and prototyping. While none of my wireframes made the board, there were a few close calls such as the Feedback and Ready for Interview features. One of my take-aways from this voting process is that the best concept features are written in detail. Knowing how to showcase a feature by writing how it works and its future ideal can explain more about it than the drawing alone.

Kano Analysis

What the users have to say

The 10 voted features were placed into a Kano Survey for feedback. This survey was sent to the users of HackerPen with questions about the value the features would offer. Based on the results, our team scoped which features we will prioritize in the design phase.

Tools: Figma

View Kano Analysis
 

Prioritizing Features

We used a Kano Analysis Chart to scope the results of the survey. The chart organizes user feedback based on how they feel if the feature is present or absent. Each of the 10 features are evaluated with separate charts, and on each chart, the users from the survey are represented as a dot placed in corresponding cells.

Each cell in the chart is colored and initialized based on 6 categories:

  • Performance features are the most straightforward to position. They are the ones where customers like having them and dislike not having. This extreme reaction translates the linear “more is better” relation between these two dimensions.

  • Must-be features are the remaining cases when a customer dislikes not having them. Customers go from tolerating to expecting to have the feature

  • Attractive features are found when a customer likes having a feature that is not expected. This is another way of saying that what we’re proposing is both new and attractive.

  • Reverse answers positioned along two axes where reactions are either to like not having the feature or to dislike having it. You can see which category they’re the reversal of by flipping the Functional / Dysfunctional values. You can then know if it is a Reverse Performance, Attractive or Must-be feature.

  • We then have Indifferent features. These occur for any “I’m neutral” or “I can tolerate it” answer, for either the Functional or Dysfunctional questions. That is, they occupy the middle cells of the table (discounting any of the previously described categories).

  • Questionable answers (contradictory response pairs); they form a diagonal through the evaluation table, except for the middle cell.

Template of the Kano Analysis Chart

The more dots that lean towards the Performance cell, the more we prioritize that feature. Thus, I focused on three features in particular: About page, Feedback page, and User Profile page. HackerPen users wish to have these features and they all take less than 6 weeks to implement (maximum tech scope).

Annotated Wire-frames

Incorporating the features

Keeping in mind the 6 week scope given by the client for development, I chose 3 features that will help HackerPen meet their user and business goals. These are About Page, Interviewer Bio and Book and Interview, and Post Interview Rating Card.

Tools: Figma

View Wire-frames
 

About Page

The only way a user will be able to know more about HackerPen is by going into their Blogs or joining their Discord, and both options take too long for the user to navigate. The redesign will feature a clickable timeline that showcases an in-depth user journey as well as basic information about the company.

User Profile Page

The only way to check an interviewer’s qualifications is through a small profile card, with very little credential information. This bio page will feature more background information about an interviewer while also offering the option to view their schedule to sign up for an interview.

Feedback Page

In the redesign, the interviewee will be able to leave feedback for the interviewer, and these will affect the ratings on the interviewer’s bio page. They are also able to schedule a follow-up interview.

Feature Concept Proposal

Proposing our changes

Here is a summary of the design process. You can view the presentation in the link.

Tools: Figma

View Presentation
 

Conclusion

HackerPen wishes to implement more meaningful and useful features for their platform to market for their user base and provide support for technical interviews. These recommendations and design concepts will help create those connections and provide better quality experience to further meet HackerPen’s goal.

What’s Next?

  • Implement more annotated design features

  • Journey map the aftereffects of the feature concepts