SoftwareReviews – Advisory Portal

Brand

SoftwareReviews

Year

2022

Role

Product Designer

Timeline

8 months

Methods

Wireframe, High-Fidelity Visual, prototype

Tools

Figma, Photoshop, Illustrator

Visit Website

Project Overview

This is a new website on SoftwareReviews to help vendors to build up their portfolio and market their products more effectively with exclusive tools and marketing researches.

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.

Design Request

We want to build up a new platform for our vendors to access more exclusive SR's reports and insights

Design Process

To align the functionality and the work flow of the advisory portal, we created a wireframe prototype in the first phase. This was the foundation that how the team predicted the numbers of pages and interaction should be covered. Moreover, we started building the design system including typography, colour palette, icons and basic components (ie. input field, buttons, tabs etc.) Therefore, we prioritized the pages to design high-fidelity mockups once all the requirements and stakeholders' feedback are consolidated.

Research

Since this is a new platform within SoftwareReviews, we drew on pain points and UX findings from the main site as our primary research input. Based on the heatmaps collected from the main site, we found that around 70% of users only browse the top third of a page; engagement then drops to ~30% by the two-thirds mark and continues to decline. As a result, we set the following design directions for the next steps:

📍 Prioritize the most important marketing content at the top, and reduce redundant spacing, imagery, and copy to ensure key messages are delivered quickly.

📍 Improve on-page engagement to keep users’ attention longer on the landing page.

📍 Use this opportunity to establish SR’s design system in Figma to standardize UI components and branding styles.

Wireframing

To align all pages with stakeholders, we started by creating a site roadmap, then translated the content into mid-fidelity wireframes and built a prototype to provide a quick, end-to-end view of the experience. This helped stakeholders and the marketing team decide where to input copy, what to remove, and what to add.

Design Phase

In this phase, the design team built out the design system while moving from wireframes to high-fidelity pages. To keep reusable components and branding styles consistent across everyone’s work, we maintained a single source of truth in the master file—so designers could freely explore and iterate within their own branches.

We created UI components and a style guide in Figma so the team could seamlessly pull from the shared library. In addition, parts of the foundation—such as spacing, grids, and breakpoints—were adapted from Tailwind CSS. This was a key factor in helping the team build the website within a tight timeline.

Leveraging the components established in our design system, the team successfully developed a series of web pages that consistently reflect the design direction and brand.

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.

✔️ Conducting internal design reviews and a thorough QA process before launch was an essential practice that required participation from everyone involved.