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 is both 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.
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:
- The footer
- Utilizing circular images and words throughout design
- 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
MOCKUPS
