View prototype

Accountabl

Branding
UX
UI
Website
B2B

Expensemate was rebranding into Accountabl, repositioning itself as a spend management platform that not only helps businesses control their spending but their carbon footprint too.

The challenge

  • Develop a new brand for an existing fintech start-up.
  • Re-design the lead generation website, balancing the needs of diverse personas.
  • Navigate critical user research process with budgetary constraints.

The approach

Leverage a user-first design philosophy and utilise analytical tools to create an optimised conversion funnel.

User research & persona building

We identified finance directors, financial controllers, c-suite, ESG teams, and procurement professionals as key stakeholders that are either directly affected by the challenges the product addressed or heavily influence the purchase decision.

We also discovered that although most business leaders wanted to reduce their emissions, larger businesses (with turnover surpassing £36 million) were required to do so as part of government legislation, so were more inclined to look for products that helped them tackle this.

I created a persona questionnaire using Typeform and Airtable to glean demographic and psychographic information about our target users. There was no budget for market research, so the team attended free events where we anticipated our target users would hang out, and then approached attendees with our surveys.

With the data collected, I was able to pull together enough information to create our persona profiles.

Analysis of current website

Using Hotjar I was able to use heatmaps and screen recordings to understand what worked and what didn’t with the existing Expensemate website.

Interestingly, part of the existing funnel design was being ignored; converting users were pushed towards completing a detailed application process, but in most cases, they opted for booking a demo instead.

In addition, Google Analytics suggested that visitors preferred desktop over mobile when accessing our website, so it made sense to build for desktop first but at the same time ensure that it responded well for mobile.

Website funnel mapping

One of the biggest UX challenges was to cater for multiple personas each with different pain points and product needs.

I ran workshops with the founder, product owner, and other key stakeholders to develop the website funnel.

Using post-its, we designed a funnel that contained five steps with the end goal of booking a demo, something we learned from the Hotjar analysis.

  • Sign-post
  • Influence
  • Explore
  • Consider
  • Soft convert

Sitemap and wireframing

Accepting that all user profiles had equal value, we needed to sign-post them straight off the bat so that they could find the product most relevant for them.

From there the user could flow through the funnel steps, but bespoke to their needs. We crafted user scenarios and stories to determine what exactly these needs were. The learnings from the workshop enabled me to create a sitemap.

Using a combination of pen and paper and Excalidraw I was able to quickly create low fidelity page designs for the website.

Developing the brand

I ran multiple workshops with the leadership team to develop the essence of the brand and its positioning strategy. During these sessions, we defined our position in the market, our tone of voice, brand archetype, our values, and our value proposition.

To craft a user-centric visual style, Apple and Tesla were used as inspiration as many users referenced these during the user research phase. But I didn’t want to lose sight of Accountabl’s eco-centric value proposition with the style choices, so I opted for a Scandinavian graphic design style due to its close ties with nature and minimalism.

I picked a monochromatic colour palette for the core brand colours with desaturated secondary colours for a more earthy and sustainable brand aesthetic. Font choices were clean Swiss Type with a more friendly option for headers.

Creating a high fidelity prototype

Using Figma I created a high-fidelity prototype of the website. During the build I worked closely with the developers to ensure my vision was interpreted correctly.

View prototype
Swayy
Mondi