waggon
Designing a Complete Responsive Website From Scratch for Start-Up Company
Overview
Waggon is an early stage freight start-up that specializes in customer-focused logistics. The company consisted of a handful of people, all with a strong growth-mindset. I was tasked to build the brand, logo, and website. I collaborated with the CEO on content strategy to develop and clarify brand values and mission, which laid the ground work to further build the brand and website. I launched the first design system with 75+ elements, crafted the style guide, and ideated, sketched, and united with graphic designers to bring my logo design to life.
I balanced goals of additional partnerships and funding, enabling brand new logistics start-up to monetize and increase service visibility. They raised $300k since my contribution.
My Role → Product Designer and Website Developer
Tools → Figma, WordPress, Adobe XD
Scope → 2 months with ongoing updates
The Challenge
Waggon had a concept, a brand vision, and minor funding – but needed to develop and grow. They lacked a style guide, a design system, a logo, and a website. This hindered their ability to showcase their services and values in order to reach new clients and gain additional funding.
How We Found A Solution
User Research
Based on the first two meetings with the Waggon team, we narrowed down the wants and needs. The main “needs” were to be eye-catching, professional, and informative. The “wants” would be developed as the process went on.
To start the research, I analyzed the freight companies the Waggon CEO’s deemed as most-similar. The goal of this research was to define how the average freight firm presented themselves. Their visuals: color, imagery, graphics. And their structure: mission statements, values, services provided.
Competitive Research
Hover and click through the slides below to visualize the freight companies with me:
The Takeaways:
- The primary colors were white and gray with either blue or green as accent colors.
- The Hero section lacked movement and interest. They all included simple imagery and graphics.
- Each had an organized layout, with mission, values, and solutions clearly grouped and outlined.
How Might We...
- How might we look unique while offering the same ammenities as other freight logistics companies?
- How might we appeal to both investors and clients?
Brand Design
The first step was to define the brand values in order to outline the site feel. I proposed 3 brand value routes with the corresponding colors and image inspiration.
The stakeholders wanted to mesh Route 1 and Route 2 : Sleek, Calm, and Bold.
- Site Feel:
- Dark Background
- Clean & Simple Design
- Bold Accent Color
Logo Design
The stakeholders gave me an inspiration picture that they envisioned their logo to resemble. It was also specified that they would prefer a logo of a truck towing a wagon. We went back and forth narrowing down the type of trucks and wagons they envisioned.
The "Inspiration" Picture
Wagon and Truck Type
Multiple rounds of iterations occured. Here are some of the evolutions:
Various colors were contemplated. The main objective of the brand color was to be bold and unique.
Stakeholders chose #1
The Final Logo
UI Design
Once the logo was finalized, I created the company’s first UI system.
Information Architecture
The company had a limited amount of content they were ready to share, which included: the solutions, values, modes of transport, details of trailer types, about the founders, and a contact form. This helped to narrow down which pages and information were needed.
I created a site map to visualize information architecture and potential user flow to empathize with the user.
Wireframes
I sketched out the pages I intended on building, with the mindset of “being unique”. I aimed to create a modern and sleek layout by utilizing minimal imagery, embracing negative space, and incorporating an engaging hero section, such as an immersive video which is depicted in my sketches.
My next step was to transfer my sketches to the prototyping phase.
Prototype
Using the wireframes as a reference, we created interactive prototypes to test the new FAQ layout with users, specifically the FAQ Accordion style. This iterative process allowed us to refine the design based on user feedback.
Due to time constraints, we prototyped directly in WordPress
Usability Testing
In light of a tight deadline, I decided to skip building a hi-fi prototype on Figma. This way, I could send the website link to various testers, iterate as needed, and finalize the website sooner. The goal of this usability testing was to ensure the site’s function and features were usable.
Throughout the process, we received several tips from users who pointed out various issues. I broke them down into 3 findings below.
Findings
1.
Some links were not active or led to an incorrect page. This resulted in confusion and frustrations from the user.
2.
A few typos were pointed out within the copy, along with some general feedback on certain phrases and Call to Action wording.
3.
With the first prototype, I embedded a Youtube link to play the hero section video. This resulted in users seeing small letters due to the Youtube video title, which was distracting.
Iterations
We performed several rounds of iterations, based on the usability test feedback.
1.
All links were re-embedded correctly. Easy fix!
2.
Additional proofreading and corrections were made to create a uniform, professional look. For example, the "&" symbol needed to be re-coded to not portray "amp&".
3.
We decided to embed a downloaded video into the hero section, which would improve load speed and visability, while eliminating the small Youtube lettering.
Impact
- Enabled brand new logistics start-up to monetize and increase service visibility.
- Conducted competitive analysis and user journey research to inform website design decisions.
- I collaborated with graphic designers to bring my logo design to life – enabling Waggon to create fun investor gift swag – along with other important branded elements and documents.
- Balanced goals of additional partnerships and funding. They raised $300k since my contribution.
The main challenge and goal of this project was to design a unique brand and create an informative website to showcase the Waggon start-up. The excitement from this project stemmed from trying to problem solve for the stakeholders, who had very particular requests. Expanding my design thinking and offering numerous and flexible design solutions is what helped guide the stakeholders to a product they loved. Per the stakeholders, the site receives countless compliments rooted in the unique display.
What is Planned...
Several additional pages and features are planned down the line. Some features include:
- Sustainability page
- An “in-the-media” section to showcase their successes
