Hacker Pen

Feature scoping | High-Fidelity annotated wireframes

A feature mockup on a 3D computer model

Overview


HackerPen is a web-based tool built to support software engineers who are preparing for technical interviews. Interviewers and interviewees can perform mock-interviews in real time online, with video-conferencing capabilities and an online codespace. 

What Was My Role?

I was tasked with suggesting and prototyping new features for their next six weeks of development time. In my suggestions I had to keep in mind not only development time of features, but also user journey low points, a Kano analysis of what features users expected and enjoyed, and an awareness of other tools in the market.

What Did I Deliver?

I delivered an in-depth report outlining my suggested features with annotations, timelines, and rationales. I also created User Journey Maps of both the current user experience and the future user experience with my suggested features added.

ROLE

  • UX Researcher

  • UX Designer

  • Consultant

METHODS USED

  • Competitive Audit

  • Stakeholder Interview

  • Affinity Diagram

  • User Journey Map

  • Rapid Prototyping

  • Feature Cards

  • Tech Scoping

  • Dot Voting

  • Kano Analysis

  • Annotated Wireframes


 

TOOLS

  • Figma

  • Miro

  • Excalidraw

  • Google Suite

  • Pen and paper

Team Members

DELIVERABLES

 The Challenge


Now that HackerPen has a growing user base, they would like to expand their offerings to include a marketplace of interviewers, who are able to charge for their services. They asked my team and I to scope out new features for the future expansion of the site.

A screenshot of the HackerPen landing page

HackerPen’s current landing page

 

Organization and App Goals

  • The purpose of HackerPen is to help people and groups seize opportunities that shape their life and environments.

  • The way we fulfill such purpose is to help people get a great job in tech, and help tech companies hire great people.

  • HackerPen is a community-driven tech interview platform that brings candidates and companies together.

 The Process


 

Initial Research

I started with a competitive audit, both of their direct competitors, and with tools of similar function outside their market space.

I then participated in a stakeholder interview, to get a sense of priorities and vision from the stakeholders.

 

Main takeaways:

  • The stakeholders mentioned the importance of flexibility of future features, in case they want to expand their offerings beyond their current market of software engineers and product managers. 

  • Stakeholders wish more users completed the feedback form after interviews.

  • Other successful marketplaces had robust search and filter options for users.

Screenshot of a Google Sheets document with competitive audit

A screenshot of my team’s competitive audit

Initial notes from the stakeholder interview, structured into an affinity diagram and user journey map

 

User Journey Map

 

I created a user journey map next, to put myself in the shoes of the users and understand their high and low points while using this website.

Main Takeaways

  • The core feature of the site, the mock technical interview, was the strongest part of the experience and needed little changing.

  • The biggest areas for growth were in the interviewer onboarding process, the expansion of the marketplace, and the post-interview feedback, which stakeholders said had low follow-through from users and listed as a priority.

User Journey Map of the current user experience

Rapid Prototyping, Tech Estimation, and Dot Voting

Rapid prototyping followed, with feature cards by me and my team being created for a tech estimation by one of the developers.

HackerPen uses the Basecamp methodology of “shape-ups,” six-week sprints in which projects are defined as either “Small” (1-2 days), “Medium” (one week), or “Large” (four weeks).

With these estimations in mind, we chose ten features to put in front of users using the dot voting method.

Rapid prototyping of new features

 
Five feature sketches with short explanations below each one.

Feature cards with explanations

 

A screenshot from the developer tech estimation and dot voting

Kano Analysis

 

These ten features were shown to users through a Kano analysis questionnaire. Users were shown each feature, one at a time, and asked three questions: “How would you feel if this feature were present,” “how would you feel if this feature were absent,” and “how important do you rate this feature on a scale of 1-7?”

Answers were averaged and placed in a Kano analysis chart, to determine which features were “Performance,” Must-be,” “Attractive,” “Reverse,” Indifferent,” or “Questionable.”

The Kano chart.

A feature card with Kano analysis underneath

A sample of the Kano analysis of one of the ten features. The purple rectangle indicates the average user response. This feature, a post-interview rating card, was considered Attractive or Performance (meaning it is worthwhile to invest resources into).

A screenshot of the full Kano analysis for all ten features. Features placed higher are considered more important by users.

Annotated Wireframes

Based on this plethora of information and data from my analyses, stakeholders, and users, I began high-fidelity wireframes of suggested features. I constrained my features to fit within one “shape-up.”

These were compiled into a report and sent to the company for review. The features I chose were:

  • Homepage Tweaks (small): adding a call-to-action for interviewers, who currently didn’t have one, and adding an “About” link on the header.

  • About Page (medium): a more detailed “About” page, separating the user journey for interviewees and interviewers.

  • Application Wizard (2 medium): a wizard-style form for users who wish to become interviewers and charge for their service.

  • Filtered Search and Auto-match (medium + small): allows interviewees to search for the best interviewers to fit their needs.

  • Feedback Form (medium): immediate pop-up upon completion of an interview, asking for feedback about the experience and the interviewer. Sliders and a space for comment allow for both quantitative and qualitative feedback data.

I also included one extra feature for future consideration: Auto-Mentorship. This feature allows interviewees who have landed a job and maintained good ratings on the site to automatically join the interviewers, after a period of one month. This extends the user journey of the interviewee into the user journey of the interviewer, helping with user retention.

With these features in place, I updated my user journey map to show the ways these features would improve (and extend!) the users’ journeys.

 
 

Excerpts of my report with annotated wireframes

 

An updated user journey map, with new interactions outlined in red.

 Conclusion


HackerPen’s extension as a service that offers a marketplace will require careful thought and planning, in order to stay within time constraints and budgets, and offer a satisfying user experience. With my suggested features they can improve the low parts of the user journey and expand their user base and user satisfaction.