UX Audit | UX Design | UI Design | Prototyping | HTML | CSS | JavaScript | PHP
Transforming STOBG History page to a more engaging, scalable solution.
Overview
STOBG'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
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.
For this case case study I will speak about the project in three phases:
Project Planning & Research
Design
Development
Project Planning & Research
Before jumping into design and development, I created a project roadmap to align expectations, set clear milestones, and ensure an efficient workflow.
Steps in the research process included:
Stakeholder Interviews – to understand business needs and identify audience expectations.
UX Audit – to identify pain points in the existing page structure.
Competitive Analysis – including researching industry best practices for history pages.
Defining Success Metrics – by 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.
Development Process
1. Building a Scalable WordPress Solution
Developed a custom PHP template with Advanced Custom Fields (ACF) for effortless content management.
Implemented a structured HTML & CSS layout with JavaScript enhancements for smooth scrolling and animations.
Optimized for performance and SEO to maintain site efficiency.
2. Testing & Deployment
Cross-browser and device testing to ensure responsiveness.
QA testing for accessibility & performance optimizations.
Final stakeholder review & successful deployment.
Results & Impact
✅ Enhanced User Experience – Reduced clicks from 49+ to a seamless vertical scrolling experience for easier navigation.
✅ Empowered Internal Teams – Implemented custom WordPress fields, allowing non-technical users to update content without developer support.
✅ Scalable & Future-Proof – The timeline structure was adapted for another STO Building Group brand, showcasing its reusability.
✅ Higher Engagement – Improved interaction rates and received positive feedback from stakeholders on the clarity and usability of the new page.
Final Thoughts
This project reinforced the power of thoughtful UX/UI design paired with scalable development. If you're looking for a designer-developer hybrid who builds with both users and internal teams in mind, let's connect.
