Closum

SaaS website

Making the flow from website entry to signup, enlightening and leading the user along the correct path to the functionality they need.

June 2023

10 days

scope

User Research * Secondary research * Usability testing * UI Design

timeframe

Figma * FigJam * Notion

tools

Desktop

device

Digital marketing

sector

challenge

Redesign their flow from website entry to sign-up, enlightening and leading the user along the correct path to the functionality they need.

context

Closum is a software that offers several digital marketing solutions to companies - like email and SMS marketing all on the same platform.

research

user insights

3 interviews

  • The documentation provided by Closum is hard to reach or even inaccessible;

  • The use of the platform is confusing;

  • Users also seem to be unaware of the quality of the customer support provided.

It would be nice if they had a FAQ section… Maybe they do but I never saw it.
— User A
When you start using the platform it can be quite overwhelming and its easy to get lost.
— User B

2 usability tests

Given the fact that the user's interviews have more insights into the platform itself rather than the current website, I conducted 2 usability tests with a Campus Manager and a Marketing Specialist.

The main insights gathered were:

  • The copy used on the website wasn't clear enough for new users;

  • The hierarchy of information was confusing, especially on the homepage.

They have a bunch of services which is nice, but I need them to be clearer in the beginning
— User A
I feel very lost on the homepage, it’s very easy to lose track of your goal, for a new client specifically
— User B

market research & competitor analysis

Through competitor analysis, I learned where and how information on these products was usually displayed, inspiring my wireframing process.

I also researched best practices for SaaS websites which led me to include plenty of white space, promote easy access to resources and be clear about the product.

Design solutions

Usability

user flow

Based on the information gathered during research I started by designing the user flow of a new client to the website.

  1. Homepage: what Closum is, what product they are offering and how;

  2. Product page: information about the specific solution they are looking for;

  3. Pricing page: all the pricing plans available at Closum and compare the features of each one of them;

  4. Resources page: information to help them get the most out of the platform;

  5. Request a demo: in my research, I found that requesting a demo for this type of product is the best way to gain customers, the user would end the flow by requesting a demo with a professional.

lo, mid & hi-fi iterations

homepage

In this image, you can see how three sections change place on the homepage.

This happened due to user feedback and research insights:

  • The first section was not seen as relevant by users and therefore was moved down on the page;

  • Through research, I understood that social proof of value was important on SaaS websites and therefore the section with Closum’s Trust Pilot score was moved up on the page.

all solutions page

This specific page was originally meant to summarize all of the digital marketing solutions offered by Closum, but during testing, users mentioned that the information displayed was repetitive and that the page just added an extra step to the flow.

Therefore it ended up being removed, and its sections were moved:

  • The first section that offered a solution overview was moved to the home page;

  • The rest of the sections migrated to the product page.

pricing page

In the example on the left I show the evolution of the pricing cards on the pricing page, where we can see several changes:

  • The Sign-up button was made more accessible by being higher on the card;

  • The bullet points that compare features from the different plans were separated into two categories with titles, to make the information more digestible for users reading it for the first time.

Closum redesigned

next steps

  • Usability test the prototype and iterate accordingly.

Next
Next

kind bites