Interviews
I asked buyers what they needed to know. I also asked the team which questions came up when they explained the product.
Whip Around / Website design
Guided case study
I gave fleet buyers a clearer path to a demo or trial.
Buyers needed to understand how Whip Around would fit their fleet before starting a trial or booking a demo. I used interviews with buyers and the Whip Around team to plan the content, then designed and built the responsive website and landing pages.
Whip Around · Delivered website
See how I used buyer questions to plan, design and build the website.
The walkthrough
Chapter 1 of 5
Start with the buyer
Look for this
See what buyers needed to know and how I used those questions to plan the pages.
Open the original artwork to look more closely, or continue to the next chapter.01 Buyers
I planned the website around the questions buyers asked.
Before booking a demo or starting a trial, buyers needed to understand what Whip Around did and how it would fit their fleet. Those questions guided my redesign.
Buyer and team interviews helped me understand the questions. Traffic paths and heatmaps helped me review how people moved through the website.
I compared what I heard with what people did on the site.
The interviews explained what people needed to know. Site behavior showed me which pages they visited and where they left.
Traffic paths
I checked where people entered the site, which pages they visited next, and where they left.
Heatmaps
I reviewed clicks and how far people scrolled, including on phones, to see which areas needed a closer look.
Content audit
I looked for repeated details, missing answers and buttons competing for attention.
Who I spoke with
I spoke with the people using, buying, and explaining the product.
I asked about the work the software supported and what the website needed to explain.
I looked at the work and the decision to buy.
Owners, operators + software usersFleet + maintenance
Understanding the work
What did buyers need to understand about the software?
The conversations helped me understand how people used the product day to day.
A clearer product explanationStakeholders + buyer questionsWhip Around team
Understanding the decision
What did people need to know before a demo or trial?
I used those questions to choose the page order and where to show customer evidence.
Page order + next steps-
Fleet + maintenance
Owners + operatorsFleet and maintenance conversations helped me understand the work of keeping vehicles and equipment available.
-
Software users
Day-to-day useI also spoke with people already using Whip Around and used their experience to help plan the pages.
-
Whip Around team
Stakeholders + buyer questionsThe Whip Around team shared the questions they heard from buyers and the priorities for the website.
From the conversations to the pages
I used the conversations to plan what each page needed to explain.
The questions helped me decide what came first, where to show customer evidence and when to offer a demo or trial.
- Product explanation
- Page order
- Proof + answers
- Demo path
Summary of the interviews, not a word-for-word transcript.
See example buyer questions
Different buyers needed different answers.
These examples show the questions each page needed to answer for different audience groups. They are not direct interview quotes.
Fleet owner or operator
What it does and how the team would start using it.
Needs to know: Will this make the operation easier without adding a system nobody uses?
Safety or compliance lead
How the team records inspections and follows up.
Needs to know: Will this help the team stay on top of inspections and accountability?
Operations or maintenance lead
How the team spots issues, plans maintenance, and keeps vehicles available.
Needs to know: Does this fit the way our fleet works?
Chapter 2 of 5
Shape the page
Look for this
See how I used buyer questions to order the content, add customer evidence and place the next action.
Open the original artwork to look more closely, or continue to the next chapter.02 Design
I changed what buyers saw first.
The old pages led with features. I started with a fleet problem buyers would recognize, explained how the software could help and placed ratings and customer logos nearby.
I kept the demo and trial choices visible together.
After reading about the product, buyers could try it themselves or book a demo. I kept both options visible.
Website pages I designed and built. The fleet software shown inside them was outside my redesign.
-
01
Explain the product
The headline says what Whip Around does.
-
02
Support it with proof
Ratings and customer logos sit near the introduction.
-
03
Keep the next steps together
“Try for Free” and “Book a Demo” appear together.
Structure first
I planned the page order before designing the details.
I kept the demo action at the top right and repeated it at the bottom. Between them, I explained the product and added customer evidence.
Try the controls below to highlight each part of the page.
Simplified page-structure illustration.
Proof
Bottom action
Mobile path
I changed the reading order for phones.
I shortened the opening and moved key answers higher on phones. I checked the coded pages to see how the content read and whether the actions had room to tap.
- A short opening that explains the product
- Proof near the relevant claim
- A visible action with room to tap
Read the page-order decisions
Decision 01
Explain the product before the features.
I started with a fleet or maintenance problem, explained how the software helped, then added the feature details.
Decision 02
Put proof beside the claim.
I placed customer evidence beside the explanation it supported so buyers could read them together.
Decision 03
Make the next action clear.
I made the trial and demo choices easier to distinguish, then checked their placement and tap spacing on phones.
The old pages led with features.
- Feature detail came before a clear explanation of value.
- Answers and proof were scattered or arrived too late.
- Competing paths and an order designed for desktop made the mobile pages harder to follow.
The new pages answered questions first.
- Start with a fleet problem, then explain how the software fits.
- Place proof beside the question it answers.
- Give each page a main action and adapt the reading order for phones.
01
Is this relevant to me?
Start with a vehicle or maintenance problem the buyer knows.
02
What does it help with?
Explain how the software helps with that problem.
03
Does it fit my operation?
Show how the tools fit the buyer’s day-to-day work.
04
Can I trust it?
Show customer proof beside the question it answers.
05
What do I do next?
Keep the free-trial and demo choices easy to find.
Chapter 3 of 5
Design and build
Look for this
See how I built the pages and checked them at different screen sizes.
Open the original artwork to look more closely, or continue to the next chapter.03 Delivery
I built the marketing pages and checked them in the browser.
I built the website and landing pages in HTML, CSS and JavaScript, with shared menus, cards and layouts I could use across the site.
Design into code
I checked the reading order on phones.
I checked the introduction, customer evidence and actions at different widths. On phones, I shortened the opening and gave the demo and trial buttons room to tap.
- Reusable menus, cards and page sections
- Reading order, spacing and navigation at different widths
- Browser checks and further changes
See the reusable parts
- Navigation. Shared menus and clear page groups.
- Page order. Reusable sections for the message, customer evidence and next action.
- Demo actions. Consistent button styles and destinations.
- Mobile reading order. Layouts and content arranged for the screen size.
- Interaction states. Shared menu and control behavior.
- Review. I used page behavior to decide what to change after launch.
Chapter 4 of 5
Review and improve
Look for this
See what I reviewed after launch and how it informed the next changes.
Open the original artwork to look more closely, or continue to the next chapter.04 Review
I kept reviewing the pages after launch.
Illustrative review areas
Not recorded click data
Review and improve
I revisited the mobile content and calls to action.
I reviewed analytics and heatmaps after launch to choose which mobile content and calls to action to adjust.
The two-page artwork shows the navigation, product message and actions together. The colored overlay is an illustration, not recorded click data.
Chapter 5 of 5
Delivered work
Look for this
See my work from the buyer questions through the website build and later changes.
Open the original artwork to look more closely, or continue to the next chapter.05 Delivered work
I kept trial and demo options easy to find.
Buyers could read what the product did, how it fit their fleet and who used it, then start a free trial or book a demo.
See the full scope of my work
Delivered work
Clear product answers
I explained the fleet problem and the product before listing features.
Trial or demo
I kept both options visible in the page layout.
Reusable pages
I built shared menus, cards, and layouts the team could reuse across pages.
Changes after launch
I used analytics and heatmaps to decide which mobile content and calls to action to change.
My contribution
I led the website work from buyer interviews and page planning through design, build, launch and review. My work covered the website, not the fleet software shown in the artwork.
Stakeholder and user interviews
Analytics and traffic-pattern review
Heatmaps and behavior analysis
Content and page audit
Information architecture and navigation
Buyer journeys and page flows
Wireframes and page hierarchy
Copy restructuring and UX writing
Visual and responsive page design
HTML, CSS, JavaScript components, and build QA
CTA and demo-path design
Post-launch review and iteration
What I took from the work
I could review the live pages and keep improving them.
More selected work
