female founded. HiPitched. a strategic design agency
Redesigned the HiPitched website to meet business requirements and implement new branding provided by the client.
In this freelance role, I served as UX/UI designer & web developer. Responsibilities included research, visual design, testing, and building the website.
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.”
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:
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.
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:
To get a rough idea of the website layout, I created a diagram of the information architecture.
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 Tested
Case Study - Results
The results were split right down the middle.
Homepage - Screens Tested
Homepage - Results
Layout 1 was a clear winner for the homepage.
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:
Process Circle Navigation
Color Palette Iterations
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.