female founded. HiPitched. a strategic design agency

Redesigned the HiPitched website to meet business requirements and implement new branding provided by the client.

Context & Role

In this freelance role, I served as UX/UI designer & web developer. Responsibilities included research, visual design, testing, and building the website.

Design Problem

Design a sophisticated website that walks the line between creative and intuitive. The website needed to house all aspects of HiPitched including services, case studies, newsletter archive, and press releases. The client asked for a “brilliant design but still user friendly.”

Duration

8 weeks

Tools

  • UsabilityHub
  • Figma
  • Webflow

DESIGN PROCESS

Understand

  • Define Objective & Scope
  • Research

Ideate

  • Exploratory Sketching
  • Information Architecture
  • A/B testing

Design

  • Low, mid, and high-fidelity wireframes
  • Style Guide

Execute

  • Build in Webflow
  • Iterate

UNDERSTAND

Define Objective & Scope

After the initial meeting with the client, I compiled my notes from our conversation to define the objective and scope of the project. I put together a brief that defined the objective, deliverables, and a rough timeline. The main points were:

Research

I did some exploratory research to see how competitors in HiPitched's niche executed their websites. This research included sites the client was inspired by but also supplemented with sites that I found that provided similar services. Through my research and my client's request it became even more clear that to be competitive the HiPitched website needed to have a stand-out design, but still be very user friendly.

IDEATE

Exploratory Sketching & Low Fidelity Wireframes

To start the design process I roughly sketched out some initial ideas for the key pages. Here are a few of those sketches:

Information Architecture

To get a rough idea of the website layout, I created a diagram of the information architecture.

A/B Testing

Before going too far down the design process, I created some mid-fidelity wireframes to do some early A/B testing to see what was more user friendly and intuitive. I chose to test the case study page and the homepage.

Case Study Screens

Option 1

Option 2

Case Study - Results

The results were split right down the middle.

Homepage -

Option 1

Option 2

Homepage - Results

Layout 1 was a clear winner for the homepage.

DESIGN

Mid-Fidelity Wireframes

Keeping in mind the A/B testing results, I created mid-fildelity wireframes & collected the first round of feedback from my client.

High-Fidelity Wireframes Part 1

I applied the feedback from the first design review and created high-fidelity wireframes with the first iteration of the brand color palette. At this point, I conducted a second design review with the client.

After the second design review we decided to re-work large parts of the design. The client wanted to explore an even more cutting - edge design that would wow the site's visitors.

Key Design Elements

To finalize the design we honed in on a few key design elements including:

  1. The footer
  2. Utilizing circular images and words throughout design
  3. Perfecting the color palette

Footer Iterations

Process Circle Navigation

Color Palette Iterations

Style Guide

After the styling was finalized, I created a style guide including typography, color, image styling, design assets & more. I provided the style guide to my client at the completion of the project for future reference.

High-Fidelity Wireframes Part 2

I then updated the high-fidelity wireframes to reflect the finalized color scheme and design elements. For the final design review I provided the client a prototype so they could get a feel for the interactions.

EXECUTE

In this project, I also served as web developer and spent the weeks after finalizing the design building the site in Webflow. Many of the unique elements of the website are in the form of animations which can be most easily viewed on the live site. Some particularly note worthy areas of the site are:

  1. The circular social media menu in the footer
  2. The case studies page
  3. The services page

Since I was both designer and developer, I continued to implement my clients feedback which resulted in the final website design.

Client Testimonial

"Working with Shelby on this project has been nothing but a pleasure. From the moment we met, I knew I was in safe hands and she definitely didn’t fail to deliver. 

I felt involved at every stage of the process and all feedback was discussed and processed before implementing. She stuck to all the timelines she provided and always offered multiple solutions to fixing a problem.

I am yet to meet such a hardworking and dedicated person and would recommend her to anyone seeking to redesign their website!"

MOCKUPS

0:00
0:00