Usability Test on Product Hunt for iPhone
Redesigning the product discovery experience
Couple months ago, Ryan Hoover published (Still) Building in Public. The article showcases active attempts by Product Hunt (“PH”) to bring together a community in its growth process, making users feel more inclusive and a part of the product. I decided to contribute to PH’s ‘building in public’ efforts as it expands to a wider range of users and products.
PH is a great product that I use every day to discover new, interesting products in the tech space. Its website, with the new update, provides a smooth product discovery experience. However, quick usability tests reveal that its iPhone app has several pain points that hinder users from fully enjoying PH.
Objective
Identify and address pain points to improve the way users discover new product information on the iPhone app.
Design Process
User
Prior to conducting usability tests, I developed a provisional persona to better understand the target users of PH’s iPhone app. This process helped me get into the mindset of the users, thinking in terms of their contexts, needs, and goals.
Meet Jack!
Test Parameters
- What: Product Hunt iOS mobile app (specifically, iPhone 6)
- Who: Five iPhone users who are tech-inclined
- Where: The Mill SF (a coffee shop popular among tech enthusiasts)
- When: October 17, 2015 Saturday afternoon
- How: Guerrilla usability testing
Usability Test Scenarios
- Search: Imagine you enjoy using Instagram daily and have tried other photo apps. You now want to find new photo filter apps. Can you show me how you would do that?
- Collection: Imagine you found 5 photo apps you want to try on PH. You want to keep track of them to try later after work. Can you show me how you would do that?
- Follow: Imagine a tech guru you admire is active on PH and posts products or comments 3-4 times a week. You want to keep track of his or her activities. Can you show me how you would do that?
- Share: Imagine you discovered an awesome game app on PH and you want to have your best friend try it. Can you show me how you would do that?
Pain Point Synthesis
After conducting usability tests, I analyzed and synthesized the test results.
First, I listed all the pain points of each user. All users work at tech companies.
Second, I grouped the pain points by their similarity, akin to affinity mapping. Four buckets of pain points emerged. Then, I sorted them in the order of highest frequency. The tasks associated with Collections gave users the most trouble, followed by Follow/Activity, Details, and Search.
Lastly, keeping in mind the needs and goals of the persona, Jack, as well as PH’s company mission for a better product discovery experience, I mapped the four pain point buckets by their importance to users and the company.
The mapping revealed that Details plays the most pivotal role in shaping users’ product discovery experience. Thus, I decided to tackle Details for this case study.
Key Insights on Details
All 5 users could not find sufficient Details about a product of their choice.
“Because I understand the upvoting process of PH, I’d go with the most upvoted product.
But, once I get into the product, what I’m missing here is the robust description of what it exactly does.
I think this (media) is getting close like the screenshots of what you eventually will get, but I just don’t think I’m getting the whole picture yet.
I’m not ready to ‘get it’. I’m not ready to make a commitment.” — User 4
Problem 1 — Interface Flow & Copywriting
Problem 2 — Empty State & Feedback
Ideation
The next step in my design process was ideating and visualizing possible solutions for the pain points.
Design Stories
The purpose of design stories is to imagine what users can do with the redesigned app and then break it down into digestible tasks to be done.
This helped identify features necessary to alleviate the pain points.
Task Flow
The proposed flow places the Media (description) section as the main content on a product description screen while making the Comments section a related action.
I put Get It as the end point because getting a product indicates that users are truly discovering the product by trying it out, resulting in more informed opinions.
The First Iteration
UI Sketches
I started wireframing by rearranging the current screen elements and then attempted to be more creative with how the content would be presented.
As a next step, I created high-fidelity screens.
Initial Redesign Decisions
1. Photo previews instead of maker profiles on the product list
2. Product description screen before the Comments section in the user flow
3. Clarifying copywriting and arrangement of actionable elements
- The Get It button is clarified into Website and App Store buttons, which stay visible at all times.
- All icons have been replaced with text buttons so that users have clear expectations of where each button would lead them to.
- The Menu button has been created on the top right corner to reduce visual clutter of icons.
Initial Interactive Prototype
Test & Iterate!
Testing the initial prototype with more users helped me refine the design.
The Second Iteration
The following feedback guided my iteration process:
- Users want to see product information right away.
- Users still find product descriptions and actionable buttons dense and visually overwhelming.
- Users are not sure which interaction to expect — scroll or swipe or other?
I initially continued iterating at a high-fidelity level on Sketch App.
The first round of iterations started with small changes at a time.
The second round of iterations focused on interaction elements like scroll and swipe in different sections.
Back to Wireframing
When I iterated at the high-fidelity level, I kept running into designer’s block.
A breakthrough emerged when I decided to zoom out from the current iterations and go back to low-fidelity wireframe sketches.
IDEO’s design thinking course had taught me to be fluid with divergent and convergent ideation and to be divergent longer, considering all the relevant elements, before rushing to converging into a single solution. I realized I was making exactly that mistake.
I returned to sketching low-fidelity wireframes. I focused on maximizing screen space for product information and rearranging and simplifying actionable elements.
Card Sorting
I realized that I need to hyper-prioritize the elements that should be shown on the product information screen to solve the visual clutter problem and to immerse users in the product information.
I conducted 6 card sorting exercises to learn about which features are important when users try to learn about a product. I had each participant arrange the features in the order of importance to them.
- 4 out of 6 users prioritized social-proof features like the number of upvotes, comments by others, and maker’s profile.
The results helped me sort features into primary actions to be shown on the main screen and secondary actions to be hidden.
High Fidelity Iterations
With the card sorting results in mind, I proceeded to high fidelity iterations as shown below.
Design Decisions
Current and proposed screens — ‘Product List’ and ‘Product Details’
Screen Flow of the Prototype
With the new design, both novice and expert users can immediately learn what a product is about, visually and textually, in an immersive manner. They can also easily access important actionable elements, thus fulfilling the tasks laid out in the aforementioned design stories.
Empty State
One way to improve empty states might be having a specific format for product information. Requiring users to upload at least one photo and few sentences that aid people’s understanding of the product prevents an empty state and ensures everyone can enjoy the product discovery experience.
Final Results
Final Interactive Prototype
Next Steps
I’d love to test the redesign with more users and reiterate. There are few things I’d like to explore further.
- Collapsing the header when users scroll up but expands back when they scroll down. When collapsed, the header will only display the product name. The purpose is to increase screen real estate for the product information contents.
- Clarifying having both the name and profile pic of the maker or hunter in the header. This confuses many novice users.
- Exploring users’ mental models and reactions on the Try It button as well as the degree of importance they assign on going to a website vs. app store of a product.
Disclaimer: I do not work for or represent Product Hunt, Infltr, or other products shown in this case study. I’m just a product designer in San Francisco, who loves playing with and trying out new tech products. I’m happy to hear your feedback on this personal project and to chat more about other ideas.
