Peter Hyde Design revamp

THE CHALLENGE

Peter Hyde Design is an experiential exhibition and design studio who's website is not only outdated but fails to capture the level of professionalism and experience the company as a whole embodies.

 

We embarked on a redesign aiming to usher in a clean and straightforward aesthetic.

MY ROLE

I was primarily responsible for co-leading user research, structuring the information architecture, writing the website microcopy, and creating the initial wireframes. 

THE PROBLEM

How might we redesign Peter Hyde’s website to showcase their diverse range of projects in order to bolster clients’ and vendors’ confidence in the quality of their services?

EARLY INSIGHTS FROM MY RESEARCH

Surveys were sent out asking respondents to evaluate the current Peter Hyde website and suggest the improvements that would prefer to see on the site.​

Stats: 13 respondents

Age Range: 21 - 50

Education Level: at least a H.S. diploma

Key Takeaways:

Respondents overwhelmingly (100%) preferred to see client logos as opposed to a list. When given the option to sort, potential users preferred to be able to sort by industry (76%) and service (46%). We used this information to determine how we'd implement a sort function on the redesigned site.

I looked at three of Peter Hyde Design's main competitors. I wanted to identify what these companies did well in terms of their website layout versus areas in which they could improve. 

Key Takeaways:

  • A simple, clean aesthetic with straight forward navigation is always the most appealing. 

  • Take advantage of scale to increase the feelings of submersion into an exhibition. 

 

  • Opt for landscape positioned images to show the full scope of the designs created by Peter Hyde.

THE APPROACH
In the Beginning there was an Interview

Once my preliminary research was completed, I then interviewed the client. I wanted to find out why they wanted to update their website and what they hoped to achieve with the redesign.

 

In speaking with the client, they stated that the goal of the website redesign was not to solicit new business but rather to serve as a marketing tool and online portfolio to showcase their work.

 

Peter Hyde design, while a respected organization in the world of experiential and exhibition designs is by nature a small company. The current state of their website gives the incorrect impression that they're not a "grown up business with decades of experience under their belt."
 

While they were open to pretty much anything in terms of design aesthetic and functionality, they did express their preference for static as opposed to kinetic pages and were in favor of having video elements incorporated into the redesign.

From the conversation, I determined that the client had the following goals:

  1. Update the website to a contemporary aesthetic.

  2. Emphasize the company's expertise and experience.

  3. Highlight Peter Hyde Design as a professional company.

  4. Showcase the range of exhibition works created by Peter Hyde Design.

Below is a video of the current Peter Hyde Design website.

To kickoff the research phase of the project, a heuristic evaluation of the current Peter Hyde design website was performed. What was observed in the evaluation were:

 

  • There are consistency issues associated with the way in which the visual information is laid out on the website. There are also nonfunctional links.

  • Some pages rely on a grid pattern, while others are overly collaged leading to cognitive load for a user.

  • The written information did not have any clear call to actions or visual cues to direct you to important information. 

Early Insights From Our Research

DELVING DEEPER
Speaking with the Potential Site Users

There were a lot of great insights uncovered during the initial stages of my research. However, I really wanted to try and uncover the motivations behind the actions users take when visiting a website.

I relied upon user testing and direct interviews to achieve this goal. The purpose of the initial user testing was to gather measurable data on the existing Peter Hyde Design website with the focus of this testing being to identify the areas that need to be changed on the website.

I wish there were different paths to take you through the website like the sidebar on the projects page."
                                                                                                                                     
                                                                                                                                             

What I learned from testing is that participants want a website that is easy to use and provides multiple navigations pathways with one user remarking "I wish there were different paths to take you through the website like the sidebar on the projects page."

They also prefer a website that offers a good balance between visual and textual page elements.

Lastly, they stated that the website fails to build any feelings of trust towards the Peter Hyde Design brand based on the current digital experience provided.

I marked these all as potential features to incorporate into the redesign. 

INITIAL USABILITY TEST

The initial usability test had five participants. All the participants were asked to visit the Peter Hyde Design website and give me their opinion of the site based on the tasks we assigned them to perform.

 

  • 5 out of 5 found the homepage to be confusing.

  • 4 out of 5 pointed out that they'd prefer to see imagery in the service and project pages.

  • 3 out of 5 were unable to find any client testimonials.

  • 2 out of 5 found the site to be outdated.

DISCOVERY

Finding Our MVP

After the initial usability study and questionnaire, it became clear that rather than carrying over all of the features from the old website, the new website would need to be hyper-focused on the features that users deemed to be key priorities.

They indicated that they would prefer to have filtering capabilities when they were on the projects page. They also stated that they would choose a service page with more visuals over one heavy on text.

Lastly, they deemed that having a compelling testimonials section would also be something that may drive them towards doing business with Peter Hyde Design. These three factors became the MVPs that I would design for.

I also identified a potential challenge; designing with both visual and textual users in mind i.e., the skimmers vs. the readers.

PIECING TOGETHER THE INFORMATION ARCHITECTURE


A hybrid card sort was performed to find out how participants would organize 20 different items and three categories. Heat mapping was also used to analyze the results of the card sort.

 

As opposed to the usability interviews, the card sort participants were not required to be experts in the field of exhibition or experiential design. The card sort was open to anyone to take part in that had the link.

 

The same was true for in-person card sorting testing. The image below shows the final prioritization levels arrived at through the card sorting testing.

HOW WE GOT HERE

Envisioning the Ideal User

Taking all of the information obtained via the behavioral analysis, competitive analysis, user testing, and surveys helped me to flesh out what a potential Peter Hyde Design client might look like, what their pain points are, and what they'd want to see on the website to help them make the final decision to hire Peter Hyde Design.

USER PERSONA

Based on the data collected I determined that an average client would be someone in their late 30s - early 50s. They'd be in a mid-level to a senior level role and would be involved in the experiential, museum, or project management worlds.

USER JOURNEY

Miriam's user journey highlights her fragmented digital experience while visiting the Peter Hyde Design website.

 

She is especially frustrated with the projects page that has an array of works that can't be easily filtered through and the services page which is overly textual and lacks visuals specific to the services provided.

USER FLOW

This user flow highlights the interactions that a potential client might have while moving through the site. A user is able to navigate to a service or project page. Upon clicking on a specific service, they would have multiple navigation pathways available to them to view other projects.

THE SOLUTION

The current iteration of the website lacks consistency, is difficult to navigate through and fails to properly represent Peter Hyde Design as a trust worthy company.

 

Redesigning the website will help address all of these issues as the revamped site will focus on providing a coherent brand story that showcases the company's expertise in the field of exhibition and experiential design.

 

This will be done through the use of features such as the visualized services page and the project filter search so that potential clients can easily understand the diverse range of projects and services offered. 

PUTTING IT ALL TOGETHER
Sketch, Sketch, Sketch

Based on all of the combined research, we decided to create sketches for three areas our test users identified as being the most important - the landing page, the services page, and the projects page. 

FIXED NAVIGATION IS KEY

During the first usability study, participants deemed a top navigation bar to be a preferred feature.

CENTER ALIGNMENT AIDS FINDABILITY

A center alignment was chosen to help users easily locate information.

CARRY OVER SOME EXISTING DESIGN CHOICES TO MAINTAIN BRAND IDENTITY & COHESION

While we liked the layout of the middle service page, we opted to not use the circular elements. Instead, we extended the use of the rectangles throughout the design.

WIREFRAMES

I created the initial low fidelity wireframes shown below. However, after receiving feedback that they were too futuristic and didn't exactly capture the Peter Hyde Design aesthetic, changes were made that were implemented in 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.

ALMOST HOME
Creating a Better Design

The initial wireframes served as a good skeletal framework for the site redesign. I continued to test and conducted two additional usability tests with 9 participants. The users prioritized being able to quickly find information over flashier websites. 

If I am actually looking for information, I don't care if it's fancy. I just want the info."

Thanks to their feedback, we were able to quickly move through various incarnations of the page designs until the final iterations of the respective pages were reached. That process is illustrated below.

1. Landing Page

Wireframe

Mid-fidelity Prototype

Wireframe of home page

About Us description is too long.

Project Gallery is in a carousel.

No team feature.

Contact info not readily available.

No featured projects

Shows the second iteration of the landing page.

Testimonials are too far up.

About Us and Meet the Team aren't grouped together.

Contact Information is too large.

Hero images confuses visitors by making them think that this is a media company.

Final Version

Shows the final version of the landing page

2. Services Page

Wireframe

Mid-fidelity Prototype

Final Version

Services page wireframe

Header doesn't tell us what page we're on.​

Services are listed as steps.

Too wordy.

Related projects not grouped with the actual service type.

Image of the services page showing 6 different boxes with different services written in each box
Final version of services page with the process section outline in a blue rectangle and the covid related messaging posted at the bottom of the page.

No banner about COVID-19.​

Process doesn't stand out.

Blurb directly underneath process is redundant.

Images chosen to represent the services are inaccurate.

3. Specific Project Page

Wireframe

Mid-fidelity Prototype

Final Version

Overly crowded page.

Client doesn't want a "News" section.

Wording is too formal.

Images need to be larger.

Users didn't understand the tags.

Stand alone project location.

Project title header is too small.

Video feature is missing.

DESIGN
Somethings Old, New, Borrowed, & Blue

Visualizing the redesign came about pretty simply. I was provided with the company's brand assets which included the company colors, logo, and typography.

 

I sourced images on my own from the existing website. The crux of the redesign centered on better sorting and presentation of the information hierarchy as well as creating a contemporary, minimal aesthetic.

MOOD BOARD

The mood board was inspired by the clients existing brand assets. We wanted to echo the client's past as an architect, so we included geometric shapes and emphasized a clean aesthetic. 

COLOR PALETTE

We kept the use of navy blue, grays, and black. However, we added in the element of warm white to infuse warmth to the cool color palette. The use of shadows were also carefully incorporated to add dimension.

GRID SYSTEM

Large margins with a 12 column system were used to allow for dramatic visual elements.

IMAGES GRID SYSTEM

Large images were used throughout the site to invoke a feeling of immersion. The thumbnail images were kept small. 

MENU & NAVIGATION

The biggest change is that we used noticeable CTA buttons. The navigation and menu bars kept in line with the color scheme.

TYPOGRAPHY

The use of Bell Gothic & Scala Sans was maintained throughout the website as it is the brand standard font for Peter Hyde Design.

 

The font sizing was increased to aid with accessibility and readability as well as to correspond with the increased scale of the project photos.

We incorporated both a fixed top and bottom navigation feature to make it easier to access the most important information.

 

The services page gives visual references for the services that Peter Hyde Design provides. The projects page allows users to filter projects by industry or service rendered.

HOW DID WE DO? 
Measuring the Impact of Our Redesign

results.png

The table above represents one of the usability tests that we had participants take part in. The "ask to find" section refers to what each participant was asked to locate as they navigated through the Peter Hyde Design website.

 

Duration was measured by using a timer and the timer would only be stopped once the user was able to successfully find the item.

 

The user was instructed to say "stop" when they located a particular page or item and this is how the researcher knew to stop timing the participant.

 

During user testing, we found that the redesigned website improved a user’s ability to find pertinent projects, services, and project-related information.

 

The old website took an average of 15.5 seconds to navigate to the services page while the redesign saw that number fall to a staggering 1.5 seconds. We observed other significant decreases while using the redesigned site that are displayed in the table above.

The client was also very pleased and indicated that the redesign had hit all of the key areas of improvement that they spoke about during the initial client meeting.

Very responsive to the needs I laid out.

Excellent Work!”

 – Peter Hyde, client ​

EXPLORING A SITE REDESIGN

This prototype which represents easily executable redesign options still leaves room for further improvements.

 

In addition to the recommendations we made regarding updating the services, projects and landing page, we've pinpointed even more ways to enhance the site even further.

 

They are to making the site more mobile-friendly and to allow potential clients the ability to see not only the national but also the international projects that Peter Hyde Design has worked on.

SPOT THE DIFFERENCES
Comparing the Current Site to the Redesign

Existing Website

Proposed Redesign

Homepage
Homepage

Current Peter Hyde Design homepage.

press to zoom
New Homepage
New Homepage

Homepage is more streamlined. A hero image catches the visitor's eye. Top and bottom navigation make it easier for visitors to access information.

press to zoom
Projects
Projects

Existing projects page

press to zoom
Updated Projects page
Updated Projects page

An example of the redesigned projects page. We carried over the grid theme. Offered search filter functionality and organized the projects from most recent to oldest.

press to zoom
Services Page
Services Page

The current services page is heavy in text description. Something that could turn off potential clients looking to only browse.

press to zoom
Revamped Services Page
Revamped Services Page

The services page now offers visual and textual information.

press to zoom

Next Project