Overview
Tasked with refreshing the online presence of an experiential and exhibition design studio, our team embarked on a creative journey to reimagine their website. Our goal was to craft a digital space that truly mirrors the studio's unique aesthetic and innovative spirit.
My Role
Product designer, researcher + copywriter team of 4
Deliverables
Wireframes, prototypes, design system, live website
Tools
Figma, Miro, Keynote, Google Hang, Kardsort
the problem
Facing an outdated website, Peter Hyde Design needed a transformation to better reflect their industry prestige and effectively serve as a dynamic brand portfolio. The challenge was to revamp the site, elevating it to showcase their wide array of projects and expertise, and reinforcing their professional image in the experiential design world.
Before: The original website grappled with inconsistent visual layouts, cognitive load, nonfunctional links and unclear calls-to-action, thus falling short in guiding users effectively through its content.
the process
Research, Discovery & Iteration
User Research & Competitive Analysis
Surveys and competitor analysis provided insights into user preferences, such as the desire for client logos, sorting by industry/service, and a clean, straightforward navigation experience.
Uncovering User Motives and Preferences
In my initial research, user testing and interviews highlighted key preferences: ease of navigation with diverse pathways, a harmonious blend of visuals and text, and the need for the website to enhance trust in the Peter Hyde Design brand.
Client Vision
In my discussion with the client, their vision for the website redesign emerged clearly. They aimed to use the site as a dynamic marketing tool and an online portfolio, rather than for soliciting new business.
While open to various design and functionality ideas, they preferred static pages enriched with video elements, aligning with their specific goals for the website's look and feel.
Creating the Ideal Client Profile: Imara's Journey
Drawing from behavioral and competitive analyses, user testing, and surveys, I developed a comprehensive picture of a typical Peter Hyde Design client and their website usage motivations. One such user, Imara, exemplified the site's challenges in her journey. She encountered frustration with the unfilterable array of works on the projects page and the text-heavy, visually sparse services page.
Envisioning the Ideal User Flow for the Redesigned Peter Hyde Design Website
Having identified the ideal user and charted their journey through the existing Peter Hyde Design website, I then conceptualized an optimal user flow for the redesigned site, tailored to enhance the user experience.
With these insights, we clearly defined our goals for the redesign:
g.1
Enhanced Navigation
Implement a user-friendly navigation system offering diverse pathways for easier site exploration.
g.2
Balanced Design
Create a visually appealing layout that effectively combines both visual and textual elements.
g.3
Trust Building
Revamp the website to foster greater trust and confidence in the Peter Hyde Design brand.
Now, with the stage set for the creative design phase, we moved forward armed with paper prototypes of our initial sketches. Engaging users in testing, we received definitive feedback: fixed navigation is essential, and center alignment markedly enhances findability.
From Futuristic to Fitting
We rapidly progressed from sketches to wireframes, but feedback indicated they were too futuristic and didn't align with the Peter Hyde Design aesthetic. This led to adjustments that were incorporated into the mid-high fidelity prototypes.
1. Landing Page
2. Services Page
3. Projects Page
the solution
The redesign introduced a contemporary aesthetic, emphasizing the company's expertise through features like a visualized services page and a project filter search.
Before
After
Final Reveal: Where Design Meets Function
Key features included:
-
A visualized services page for clearer understanding of offerings.
-
A project filter search for easy navigation through diverse projects.
-
A design system that balanced text and visuals, ensuring an engaging user experience.
In designing the web solution, I also carefully considered tablet and mobile views, recognizing that users access the site on a variety of devices. This approach ensured a versatile and responsive design, adaptable to different screen sizes and user contexts, enhancing accessibility and user experience across all mobile and tablet platforms.
Crafting the Redesign: Brand Continuity Meets Modern Aesthetics
The vision for the redesign materialized seamlessly, guided by the company’s established brand assets, including its color palette, logo, and typography. I handpicked images from the existing website to maintain brand consistency. The redesign's focus was on enhancing the information hierarchy for easier navigation and embracing a modern, minimalist aesthetic.
the Results
How'd we do? Measuring the Impact of Our Redesign
The culmination of the Peter Hyde Design website redesign marked a significant milestone in enhancing both functionality and aesthetic appeal.
"Very responsive to the needs I laid out. Excellent work!"
Notably, the project achieved remarkable improvements in navigation and user engagement, as evidenced by our comprehensive user testing. The intuitive, streamlined navigation system coupled with the engaging, modern layout led to a marked increase in user interaction and satisfaction.
Usability test results: Navigating to the services page now takes just 1.5 seconds, a drastic improvement from the old site's 15.5 seconds.
Equally important, the client expressed a high level of satisfaction with the final outcome. The redesign successfully aligned with their initial vision, effectively showcasing their expertise and professionalism while embodying their brand ethos. This blend of client satisfaction and user-centric design improvements underscores the project's success in meeting its core objectives, ultimately serving as a testament to the power of thoughtful, user-focused design.
