Website value proposition

UX/UI Lead

To keep this case study simple, I will only include the process for the customer/partner-facing website redesign.

During my time at Compleat, I also led the UX/UI process for their Carbon Emission Tracker Software, User-facing Website, Partner Marketing Content Portal, Staff Intranet, and Redesign of Brand, Voice & Values.

Product Strategy, User Research, Interaction, Visual design, Prototyping, Testing, Information Architecture, Brand

Compleat’s SaaS product offers automation software to speed up the accounting process. They offer 6 services; Invoice Automation, AP Automation, Integrated Online Buying, Purchase-to-Pay Automation, Digital Procurement Tracking, and most recently their shiny new Carbon Emission Tracker Software.

Compleat’s goal is to simplify the way everyone buys & pays, empowering businesses to achieve the extraordinary.

Learning from the methodology of ‘Don’t make me think’ in UX, we knew understanding the products was key in this project. This allowed us to clearly demonstrate how the product works to our users. Our aim was to tell a story, by clearly and concisely tell our users the benefits of this product using the ‘Golden Circle’; why Compleat sells their products (their purpose), how we solve the user’s problems (their USPs), and only then what they do (their products).

We took part in: 

Securing budget for product development
I created a business case to pitch to managers, seeking extra budget to enhance our product. This included the desirability, feasibility, and viability of the project. Along with an estimate of the project hours involved, costs and potential ROI. We used the Why, What, and How method to explain to key stakeholders; why we use the UX process, how we conduct research, and what benefits are gained by having a user-centric approach.

Stakeholder aims
Throughout the project, we worked with key stakeholders to ensure we aligned with the business goals for the project. We worked with Senior Management, Complaints, Customer Success, Development Team and Marketing.

After numerous intensive brainstorming sessions, invaluable feedback, and a relentless pursuit of knowledge, we successfully distilled our objectives into a small compilation of bullet points that encapsulate the fundamental essence of our mission.

Stakeholders wanted to

We embarked on a journey to truly understand what the customers value in the software. Our aim? To refine its value proposition by shining a spotlight on its tangible benefits for businesses and individuals alike.

By tapping into the frontline expertise of the sales and customer success teams, we gained invaluable first-hand knowledge of the features and functionalities that resonate most profoundly with the customers. The involvement of the SMT has ensured that strategic perspectives seamlessly merge into the refinement process, aligning product enhancements with the overarching goals and vision of the organisation.

Software benefits: Simplifies the way you buy and pay, automates the whole process, business information is accessed in one place, available to all sized businesses, partners & ERPs can integrate the software into their existing offering

Human benefits: Invest in your future, work from anywhere & on anything (even your phone), save time for what’s important, save money for what’s important, focus on what really matters to you

Expand our partner/reseller network
Design and develop a section of the website focused on attracting and converting new partners and resellers.

Drive end-user conversions & sales
To craft a user experience that not only attracts and converts potential partners, but also indirectly fuels end-user conversions and sales.

Through our comprehensive competitive benchmarking sessions, we delved deep into uncovering the pain points that exist and the untapped potential opportunities that lie ahead for our product’s growth. Each of us dedicatedly conducted these sessions, leaving no stone unturned.

We investigated our current analytics to find out more about our users behaviour to see what was working well, and what wasn’t working well.

Using our current analytics, I needed to find where people spent the most time, the least time, and where each user bounced from their session. This information was key to finding out what interests the users the most and where they lost interest.

We dug into our form analytics to find out what worked well, and what didn’t work as well.

This wasn’t just about numbers on a screen; it was about understanding the user journey. We wanted to see, feel, and empathize with every click, every hesitation, every frustrated exit. And let me tell you, the results were eye-opening (and sometimes, let’s be honest, a little surprising).

We used heat mapping & user recording mapping to find out more about our user’s behaviour.
We watched where they clicked, scrolled, and what they engaged with. This method helped us to empathize with our users and their journey, so we could better meet their expectations.

The technical team was vital to us in this project when explaining the product to users. They had a vast amount of statistics on the help centre & community hub.

This data included what new and existing users wanted to know about the product, what they needed help with, what was important to them, and what confused them. We used this information to build the product pages and the FAQs across the site. The information provided gave us the questions and answers we needed to tell the users about our products.

We ran some live and recorded user testing sessions.

We collaborated with different teams across the business to identify their existing customer base and determine the ideal audience for targeting. Subsequently, we refined the user testing audience by selecting individuals who closely resembled their potential customers and partners.
We collaboratively crafted a comprehensive set of impartial screener questions. These questions were then circulated across the organization to gather feedback on how to enhance them further and identify any crucial inquiries we may have overlooked.

Once the screener questions received approval, we embarked on the user testing phase. This phase proved to be the cornerstone of our research efforts, yielding a wealth of insights. We diligently sifted through the 276 pain points we uncovered using the ‘criticality x impact x frequency = severity’ method. Despite the challenges, we successfully streamlined our efforts and unearthed invaluable insights to elevate our site’s performance.

We gathered valuable insights from various sources, which we organised into an affinity diagram.

With a keen eye for detail, we categorized these insights into manageable sections, aligning them with key areas of our site. Duplicates were identified and clustered together to streamline our analysis.

Subsequently, we embarked on the pivotal task of prioritizing feedback, considering factors such as criticality, impact, and frequency of each pain point. Utilizing a scale of 1 to 5, we assessed the severity of each issue, enabling us to identify and focus on the most pressing concerns first.

We diligently sifted through the 276 pain points we uncovered using the ‘criticality x impact x frequency = severity’ method.

Task criticality – how important is the task to the user? (1 = low, 5 = critical)
Impact – how much of an impact does this issue have on the user’s task? (1 = suggestion, 5 = blocker)
Frequency (%) – how many times does this come up out of total participants?

We began to work on navigation, most common use cases & user journeys.

Once we delved into researching most common use cases, we began to work on the site map. This process involved synthesizing insights garnered from user interactions and aligning them with our overarching design objectives.

We then began the development of menu prototypes, each iteration informed by user testing and feedback loops. Through thoughtful experimentation and refinement, we iterated upon several menu prototypes, striving to create an experience that seamlessly aligns with our users’ expectations.

We initiated the creation of low-fidelity wireframes meticulously tailored to address the most critical pain points and areas requiring substantial improvement across the entirety of the site’s architecture and functionality.

Throughout the iterative development journey, we actively engaged with our users, conducting comprehensive testing sessions aimed at gauging their reactions, soliciting feedback, and discerning whether the conceptual frameworks and features under consideration resonated with and fulfilled their expectations, thus ensuring that our design decisions were firmly rooted in user-centric principles and aligned with their evolving needs and preferences.

As we transitioned from the initial phase of low fidelity wireframing to the more detailed medium-fidelity wireframes, our design process evolved to infuse the layouts with a vivid palette of colours and dynamic vibrancy, breathing life into the visual representation of our digital ecosystem.

Beginning with a meticulous focus on the modules identified as requiring the most attention and refinement, we embarked on a journey of creativity and precision, carefully sculpting each element to strike the perfect balance between aesthetic appeal and functional coherence.

With each stroke of design iteration, we sought to capture the essence of our users’ expectations while imbuing the interface with a sense of fluidity and visual delight, ensuring that every interaction resonates harmoniously with the overarching design ethos and user experience principles guiding our endeavor.

Throughout our journey of testing and refinement, we perfected our design process, transitioning from concepts to crafting high fidelity wireframes.

Our commitment to putting users first has been at the heart of every decision we’ve made. We’ve constantly revisited our research findings, making sure that our designs are rooted in the valuable feedback we’ve received along the way. Each iteration brought us closer to creating an experience that’s not just easy to use, but also deeply resonant with the diverse range of human needs and aspirations that shape our digital world.

Throughout our project journey, our team was dedicated to creating and refining prototypes as essential tools for testing the site’s functionality and user experience well before its official launch.

I believe the power of iteration, allowed us to pay close attention to every detail to ensure that the product not only met our internal standards but also resonated seamlessly with what our users expected.

Our focus was on crafting an enjoyable user journey. We made a conscious effort to simplify and improve the navigation process, aiming to reduce any unnecessary complexity along the way. By carefully evaluating and refining each step in the user journey, our goal was to create a more intuitive and efficient pathway for users to find the information they needed quickly and easily. Our intention was to create a friendly and welcoming environment where users could navigate with ease, contributing to an overall positive and enjoyable experience.

“I can’t figure out how this software works”

We collaborated closely with the technical team to create step-by-step guides that live directly on the product pages. We also replaced the lengthy 1-hour demo with bite-sized video clips and screenshots tailored to each product.

“I want to see photos of the software”

We added clear visuals across the site, including screenshots, GIFs, and simplified UI illustrations, so users can see exactly what they’re getting.

 “What are the benefits?”

We made Compleat’s value crystal clear by weaving benefits throughout the journey, not buried in the details. 

“It doesn’t say how much it costs. That makes me think it’s expensive.”

We flipped the narrative. Compleat is one of the most affordable solutions out there, and now, we say that loud and proud. Pricing is now upfront and transparent.

“After spending time on this page, I still don’t know what the software does.”

We simplified the language, focusing on clarity over jargon. Each feature now comes with a human explanation and real-world context, so users instantly understand how it helps them.

“I don’t understand what ‘being a partner’ means. Is it different from buying the software?”

We created two clearly defined journeys: one for partners and one for customers so we speak to each audience directly.

“The forms take too long and I don’t know why you need my job title and company.”

We stripped forms back to the essentials, no more unnecessary questions. 

“There’s too much text on this page. It’s overwhelming.”

We restructured content into digestible components, shorter blocks, visual hierarchies, icons, and bullets. 

We strategically selected a timeframe when the three business regions experienced the least activity to initiate the launch of the new site. We used content staging to built the site, meaning we could sent the new site live in only a few clicks.

After launch, we conducted thorough testing of the site, addressing any issues and fine-tuning elements to ensure optimal performance.

The following morning, invited all staff to explore the site and provide feedback, welcoming their insights, concerns, and suggestions. The response from our staff was overwhelmingly positive. They commended the site’s vibrant aesthetics, the clarity of language used, and the well-structured layout of product pages. 

We took the complexity out of accounting automation by reimagining Compleat’s website through an empathetic, insight-led design process, creating an experience that feels simple, powerful, and human. And it worked, here are the results.