SoftwareReviews
Advisory Portal: a new vendor platform
ROLE
Product Designer
TEAMS
FE devs, BE team, Marketing team
TIMELINE
8 months, 2022
TOOLS
Figma, Adobe
enterprise members signed up after launch
TASK
SoftwareReviews needed a new platform where vendors could build their portfolio and market their products with exclusive tools and research. It had to launch on a tight timeline, with no shared design system to build from.
MY ROLE
Led cross-functional collaboration with design, FE, and BE partners across the full project lifecycle, from concept to launch.
Built and iterated on components, mockups, and prototypes to surface obstacles early, pressure-test ideas, and converge on solutions that met stakeholder requirements.
Owned the handoff between design intent and technical execution, keeping the build aligned as requirements evolved.
Context and Constraints
A new product with no data of its own: We used heatmaps from the main SoftwareReviews site as the research input.
Attention drops fast: About 70% of users only browsed the top third of a page, and engagement fell to about 30% by the two-thirds mark.
No design system: Type, colour, icons and components were rebuilt from project to project.
Constraints: a compressed 8-month timeline for a full new platform.
Vendors are experiencing a struggle to promote their products and keep in track in the market because they need a reliable resource and platform to support.
Design Process
Stakeholder wireframe: Stakeholders and marketing shared the site roadmap and wireframes with the features they needed
UX review: I checked the wires against the heatmap findings. Where key marketing messages sat below the top third, I moved them up, and I cut redundant spacing, imagery and copy.
Design phase: We turned the wires into a mid-fidelity, end-to-end prototype. It helped stakeholders and marketing decide what copy to add, remove or move before high fidelity.
Design System on Figma: In parallel, we built the design system: typography, colour, icons and core components (inputs, buttons, tabs), with spacing, grids and breakpoints adapted from Tailwind CSS. I made sure every page followed SoftwareReviews branding through the shared library.
Delivery. I owned the handoff to FE and BE, kept the build aligned as requirements changed, and ran design review and QA throughout.
Key Decisions
DECISION 1
Build the design system during the project, not after
What I chose: uild them together, with one master file as the source of truth and designers exploring in their own branches.
Tradeoff: Early weeks went into foundations rather than screens. That investment let 2 designers and 2 FE developers work in parallel without drifting apart.
DECISION 2
Adapt Tailwind CSS foundations instead of inventing them
What I chose: Tailwind foundations with SoftwareReviews branding on top.
Tradeoff: Less layout freedom. In return, design and code shared the same scale, which was key to shipping on a tight timeline.
Outcome
enterprise members signed up after launch
The 1st
Figma design system for SoftwareReviews among the products at ITRG
Reflection
Cross-role alignment was the real delivery mechanism: Design and functionality held together because design, FE and BE worked from one source of truth throughout.
QA isn't a final gate: Running design review as an ongoing, shared practice caught issues while they were still cheap to fix.
What I'd do differently: [Something honest, e.g. "I'd validate the new hierarchy with portal users after launch, instead of relying only on main-site heatmaps."]
Check before publishing: your live Advisory Portal page says "LIVE Las Vegas influencing $899K in YTD revenue". That line looks like it belongs to the LIVE case study, not this one.