No two website builds and processes are the same and no two clients are the same too.
This project came along through my initiative to refine the way websites are produced and delivered
Role:
Lead UX Designer
Client:
BSO Digital
The solution must seamlessly integrate with WordPress' backend, enabling easy client management of design elements without extensive technical knowledge. Leveraging WordPress' capabilities empowers clients to effortlessly make changes, enhancing user-friendliness.
The current default editor limitations prompt the need for a more flexible design system to elevate visual appeal, increase satisfaction, and seize business opportunities. Implementing a user-friendly backend solution with comprehensive training ensures staff efficiency and exceptional service delivery to clients.
The current situation with the default classic editor on WordPress poses challenges when it comes to meeting the client's expectations regarding visual appeal. The design capabilities provided by the default editor are limited, and clients often provide feedback about feeling restricted in achieving their desired aesthetics for their websites.
To address this issue, the new design system aims to overcome the limitations of the classic editor and offer more robust and flexible options. This enhancement will elevate the overall visual appeal of the websites, resulting in greater client satisfaction and increased business opportunities.
A crucial aspect of implementing the new backend solution is ensuring that the internal staff members can efficiently work with it. To achieve this, comprehensive training and support will be provided to the team. The backend solution should be intuitive and easy to understand, enabling internal staff to navigate and manage the system with confidence.
Moreover, the user-friendliness of the solution will also facilitate the training process for the staff, allowing any team member to impart product training to clients with ease. By having a straightforward and accessible backend solution, the team can focus on delivering exceptional services to clients and maintaining a seamless workflow throughout the organisation.
This solution has the potential to effect projects spanning multiple website tiers available to clients. As this issue effects clients on large projects too, this solution will also scale to bigger budget clients.
Lead Generation
Ecommerce
After many discussions with sales and project managers I devised a new plan structure for website builds that serve for lead generation and ecommerce.
Age: 32
Gender: Female
Location: Melbourne, Australia
Occupation: Gym Owner
Industry: Fitness
Emma is the owner of a small to medium-sized business based in Melbourne, Australia. She plays a hands-on role in managing various aspects of her company, including marketing. Emma understands the pivotal role that a well-designed website can play in driving business growth and customer acquisition.
Emma, a gym owner. She seeks an affordable website prioritising proven lead conversion elements, including clear calls-to-action and intuitive navigation. Recognising the impact of visuals, Emma needs an appealing website encouraging exploration for increased lead conversion.
However, she faces challenges with current websites in terms of lead conversion and limited design flexibility. Emma desires a easy to use website that incorporates lead generation principles and offers flexibility to enhance overall aesthetics. Additionally, a user-friendly backend is essential to empower Emma in managing updates and forms without dependency on technical support, ensuring timely adjustments for optimal lead generation.
I mocked up a simple and typical site map for a lead generation client. I chose this structure because it will showcase a common variety of pages and sections
Setting up simple styles to inform developers and designers what the consistent and repeating variables are.
Optimising the components collection to speed up the early phases of the design process.
A client that I work on frequently was having the same issues I previously recognised. They were struggling to update content on their website and wanted about 25 category pages to be visually appealing and drive traffic to the contact page.
I communicated to the client and the inhouse developer and project manager that this problem can be solved with a scalable template.
Previous Page View
Previous Backend
Current Page View
Current Backend
The new sections are clear and simple. As a lot of the content can be dense on these pages, scannability was a top priority to funnel users to purchase or go to the contact page.
Before the update the average bounce rate of the category pages was 81%. After 3 months of tracking the average bounce rate dropped down to 44%
I researched IBM’s Carbon, Google’s Material Design and Ant design systems for a couple of months.
I soon learned that there is no one way to create a design system. After discussing my idea with developers I learned the path to a great design system is based around the technology and purpose it will serve.
Some resources I found helpful in this development phase are:
Keeping up to date with Figma’s latest release notes, I often found myself rethinking how I approach my design system and sometimes starting from scratch. It can be frustrating at times but I often find I learn best when experimenting with the software and understanding what and why something is more efficient.
Keeping up to date with Figma’s latest release notes, I often found myself rethinking how I approach my design system and sometimes starting from scratch. It can be frustrating at times but I often find I learn best when experimenting with the software and understanding what and why something is more efficient.
I soon realised there are a lot of elements that require testing when starting on a new project with a client.
So I created a simple content tile that is linked to all of the possible combinations that could be produced by the design system. The elements being tested include size, colour, font family and radius tokens.
Layout and accessibility across multiple devices has always been a priority for my work. While researching IBM’s Carbon design system I took a lot of inspiration from their breakpoints collection and inform how I will setup screen, column and typography variables.
Working on project "Lift Lab" has taught me the importance of having insight into the business side of a company. Without this knowledge I wouldn't have come to my solution. I would really like to have direct feedback from users about this initiative. However, though feedback isn't available I had to really dig in and ask stakeholders about the pain points and effects of this solution.
I'm proud of the balance I was able to strike between clients, stakeholders and developers. After lots of trial and error on website builds in the past I've been able to smoothly manage this project from inception to final product.
