Developing a website for a small business relying heavily on the website for the client acquisition, successfully generating over 200 new leads
This was a brief two-month freelance project for a driving school. Both the website and the app utilized the third-party provider Wix, as there was no development budget to create them from scratch.
My role
UX Designer
Timeline
2 months
%201.png){kind=small}
Understanding client requirements
The client presented me with the design that they've attempted to create to give me an idea of what they envision the final version to look.
-
The client wanted the primary colour palette to be gold and pure black (#000000). I had to explain to them that pure black can cause eye strain to readers therefore proposed a more user friendly dark gray colour to comply with WCAG guidelines.
I was also presented with the current company car to grasp the overall branding aesthetic, ensuring I can maintain a consistent experience for all customers.
Competitive analysis
Doing a competitive analysis revealed the 3 different types of drivers (new learners, drivers that failed their test and drivers that want to refresh their skills) which we incorporated into our website. I also got an idea of the different ways these companies use to communicate with their clients (chat box).
Ideate
Crafting informal yet professionally oriented low-fidelity wireframes aided in grasping website structure and sequence. It also eased client presentations, ensuring satisfaction with the layout before diving into the formal design.
The new design will help establish trust and confidence in Betmy Driving School, increase findability, and ultimately encourage individuals to get involved. The main goal was to showcase the different services the company provides and how they go above and beyond to help their customers.
UX considerations
UI considerations
Opting for accessible colors, such as a very dark grey, instead of non-accessible pure black.
Announcement bar: A persistent top-of-screen bar highlighting critical information, such as the app release, with a link to the instructions section.
Leveraging social proof by showcasing the number of students taught by this driving school.
A noticeable CTA grabs users' attention.
Applying title case consistently to all H2s for uniformity.
Ensuring consistency by left-aligning all elements.
Guidance on downloading and using the app to streamline the purchasing journey.
Considering individuals with dyscalculia and ensuring I display the opening hours in an accessible format (e.g., 5 pm instead of 5:00 pm).
The phone number one of the first things the users will notice, which will potentially increase leads.
Social proof - showcasing the awards instructors have earned to instill a sense of security.
Present the users with various offerings.
Emphasize offers to encourage users to complete the sales funnel.
Illustrating the steps to obtain a driving license, emphasizing value delivery beyond mere sales.
Leveraging social proof by showcasing images of successful students who passed their practical tests, along with Trustpilot reviews.
Ensuring clarity by making it intuitive which components on the page are interactive (e.g., navigation links are interactive, while opening hours are not).
Being transparent about the fact that we use a third-party provider.
Clearly highlighting the steps needed to download the app.
Presenting alternative options, with emphasis on their optional nature, allowing customers to choose according to their preference.
Clearly presenting the outcome with step-by-step instructions on the right to ensure an intuitive user experience.
Offering users the option to customise the interface to better suit their needs, acknowledging that some users may prefer the comfort of dark mode.
I had limited time for research when designing the website. However, recognising the lack of information on my instructor's website during my own driving lessons, I chose to address this issue to facilitate faster learning for other students.
Informing students that this will be the car used for their lessons, emphasising the use of the exact controls to enhance their learning experience. Additionally, a link to the actual questions has been provided for their convenience.
Clearly distinguishing "show me" questions from "tell me" questions.
I also opted to include additional information that I believe would be beneficial for them, even though it may not be part of the exam questions.
I introduced navigational tabs, allowing users to seamlessly switch between automatic and manual cars.
Using shapes, such as arrows, to visually guide users on how to operate the switches.
I've designed the application interface, but due to limited functionality with a third-party provider, we've opted to utilise only basic features.
When developing the website, the primary focus was on ensuring mobile responsiveness, given that the majority of users access the site from mobile devices.
Making sure the most important elements are placed according to the Rule of Thirds
I positioned key elements strategically based on user behaviour (assumption). Placing the headline, CTA, and social proof in the top left aligns with where users typically start scanning. Following the rule of thirds, the bottom right is scanned last. While essential, I positioned the "Instructor of the Year" badge there for subtlety. The road mark in the background also subtly reinforces the driving school theme without being overly intrusive.
Tracking usage analytics
Fortunately, Wix provides analytics tools that allow me to monitor and evaluate the website's performance.
Website sessions have certainly improved over the months, averaging 15 daily sessions and reaching a peak of 22 during the summer. While the number of sessions is influenced by the instructor's marketing efforts, the site's discoverability also plays a crucial role.
The session duration and average pages per session are satisfactory, falling within the desired range. The bounce rate is also acceptable. However, further analysis is required to understand potential issues with accessibility or page discoverability that may contribute to user drop-offs.
Conclusion and next steps
In this project, balancing the project constraints and client requirements, budget, and resources was a real challenge. It was a great experience given that I got to learn how to work around constraints while delivering a product that the client and customers enjoy. I am glad I got to help the client gain further understanding about accessibility and how it can affect the way the website is performing.
-
Tracking website analytics and make improvements.
-
Iterate as much as possible and constantly improve the design.
