SoftwareReviews – Product Page Redesign

Brand

SoftwareReviews

Year

2022

Role

Product Designer

Timeline

6 months

Methods

Wireframe, High-Fidelity Visual, prototype

Tools

Figma, Photoshop, Illustrator

Visit Website

Project Overview

This redesign project enhanced the product pages by introducing more compelling, data-driven content. The solution was templated to accommodate all software offerings across the site.

My Role

In this project, I mainly collaborated with the teammates who are in designer, FE and BE roles on every piece from end to end. Moreover, I created iterative components, mockups, prototypes to identify the obstacles; address our ideas and reach stakeholders' requirements.

Challenge

Our users struggled to stay on the product page because it lacked unique features that could capture and hold their attention.

Design Process

To identify UX insights from the existing product pages, we analyzed heatmaps and conducted competitor research to highlight key strengths and gaps during the research phase. Building on stakeholder-provided wireframes and the UX findings from the initial phase, the team created updated wireframes that aligned with both requirements and feature goals.

Once the wireframes were approved by stakeholders, we developed high-fidelity designs across all scenarios, applying SR brand guidelines. The final designs were then handed off to development and went through QA to ensure proper functionality and implementation quality before launch.

Research & Alignment

In this phase, we used competitor research (including Capterra, G2, Software Advice, Trust Radius and Gartner) and heatmap to identify the pro and cons of the product page on competitor' sites and our site. The UX findings are gathered as below:

Pain points in SoftwareReviews:
➖ Lack of data visualization in the content, therefore, the users easily jump out the page.
🔸 Majority of user would consider the images are clickable.
➖ The information on the side bar are distracting the reading flow.

What did we learn from our competitors:
➕ Data based content : a variety of data based content to scroll and read to keep users in higher interest.
➕ Informational visual: A clean and organized look of the page would help user to read accordingly without visual distraction.
➕ Similar product recommendations: This section bring some attention and interest to browse different page on the site that also keep the users stay on the site longer.

Goals of this redesign:
✔️ Optimize for SEO with keywords and content.
✔️ Incentivize vendors to link their product page.
✔️ Maximize value and utility of page for end-users.

Wireframing

To align all pages with stakeholders, we started by understand all scenarios may show on this page, then translated the content into mid-fidelity wireframes and built a prototype to provide a quick, end-to-end view of the experience. Based on the requirement, we would like to adjust features and content to this page:
➕ Simplify the information in the header
➕ Showing all awards
➕ Add data visualization in the content
➕ Add product reviews

Design Solution

We wanted to optimize this page with new feature that would reflect live data and reviews of the products, therefore, the users could come back to this page again.

Design Phase

In this phase, we created iterations in design visualization, then polished and validated the feasibility of our solutioning with devs and the team.

What I learned

✔️ Due to the tight project timeline, the team had to carefully prioritize and make strategic trade-offs.

✔️ Strong collaboration and communication across different roles were crucial to ensuring both the visual design and functionality were delivered effectively.

✔️ Mapping out the scenarios of the page as possible to avoid any blocks may occur in the development.