top of page

exploring a website redesign

2020

PETER HYDE DESIGN

New York, NY

MacBook Pro 16_edited.png

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.

Three images of Peter Hyde Design's website circa 2020.

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.

Survey Results from usability testing
Competitive Analysis
Usability Testing Results

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.

User persona for typical Peter Hyde Design client
Imara's user journey

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.

User flow for redesigned website

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.

Homepage depicting how the site could potentially be laid out.
Wireframe depicting how the services page may be laid out.
Projects page wireframe shows what the proposed page may look like.
Wireframe showing filtered result of industry related design projects.

1. Landing Page

Wireframe image of landing page
Midfidelity of landing page

2. Services Page

Wireframe of the services page
Midfidelity version of the services page

3. Projects Page

Projects Page Wire

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

Old Peter Hyde Services page.

After

Updated Services Page

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.

Landing Page for Peter Hyde Design
Services Page Final Design
Selected a specific project and this is the page a visitor sees

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.

PHD 1 Apple Set.png

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.

Results Table Showing usability testing results

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.

Growth
bottom of page