History Page Refresh

UX Audit | UX Design | UI Design | Prototyping | HTML | CSS | JavaScript | PHP


Transforming STO Building Group’s History Page: A More Engaging, Scalable Solution


Client:

STO Building Group

Role:

UX Engineer

Year:

2024

Overview

STO Building Group’s History page had an outdated layout and cumbersome content management system that hindered engagement. The redesign focused on enhancing user interaction, simplifying updates for internal teams, and aligning the experience with STOBG’s brand and business goals.


Role & Scope

  • Role: Product Designer (UX/UI) & Developer

  • Platform: Web (WordPress)

  • Timeline: 5 Weeks

Approach

  • Identify User Needs and Business Goals: Gathered insights through stakeholder interviews and competitive analysis to define objectives.

  • Conduct a UX Audit: Analyzed the existing History page to uncover usability issues and improvement opportunities.

  • Define the Problem: Created a clear problem statement to align the redesign process with user and business needs.

  • Ideate and Sketch Layouts: Produced initial low-fidelity sketches to explore layout possibilities.

  • Design Interactive Prototypes: Developed high-fidelity prototypes in Figma to test and iterate on the design.

  • Create Responsive Components: Built reusable design components and ensured responsiveness across all devices.

  • Collaborate for Feedback: Presented designs to stakeholders for input and refined based on iterative feedback.

  • Develop and Test: Built the page structure in WordPress with custom fields for easy content management, followed by thorough testing.

The Challenge

The previous History page required 49 clicks to navigate its timeline, making it difficult for users to explore STOBG’s legacy. Additionally, the page was hard for non-technical team members to update, increasing reliance on developers.

Project Goals:

✅ Create a visually engaging, interactive timeline that aligns with STOBG’s brand.
✅ Ensure seamless responsiveness across desktop, tablet, and mobile.
✅ Develop a scalable, easy-to-update WordPress solution to empower internal teams.

Project Planning & Strategy

Before jumping into design and development, I created a project roadmap to align expectations, set clear milestones, and ensure an efficient workflow. This included:

Stakeholder Interviews – Understanding business needs and audience expectations.
UX Audit – Identifying pain points in the existing page structure.
Competitive Analysis – Researching industry best practices for history pages.
Defining Success Metrics – Establishing engagement and usability benchmarks.

Design Process

1. UX Audit & Research

A comprehensive audit of the existing page revealed:

  • The horizontal timeline required excessive clicks, disrupting the user flow.

  • Content was difficult to scan, reducing engagement.

  • No clear mobile strategy, causing usability issues on smaller screens.

I also conducted competitive research to analyze effective timeline structures used by other brands, ensuring the new design followed best practices.

2. Wireframing & Prototyping

Low-Fidelity Sketches – Explored multiple layout concepts for the timeline.
High-Fidelity Prototypes – Created interactive Figma prototypes for stakeholder reviews and user testing.
Responsive Design – Ensured optimal usability across all devices.

3. User Testing & Iteration

Gathered feedback on prototypes to refine the design.
Iterated on content hierarchy to improve scannability.
Ensured accessibility compliance for an inclusive experience.