Helping users discover a product and request a demo
June ‘23
scope
User Research * Secondary research * Usability testing * UX Design
date
Figma * Figjam * Notion * Google suite
tools
Desktop
device
Digital marketing
sector
🤔 picture this…
You’re the CTO at a digital marketing company, Closum - a platform that allows anyone to create email and SMS marketing campaigns, create landing pages, and manage leads and contacts.
Closum’s users have at least 2 specific needs
1 Grow their audience with
Landing pages
Forms
Pop-ups
2 Communicate with their audience via
Newsletter
SMS
Your team has identified 2 problems that they often come across, but we’ll be focusing on one of them:
“The users lack a clear path for each specific feature they’re looking for, without getting lost in the other unwanted features”
challenge
Make the flow from website entry to signup, enlightening and leading the user along the correct path to the functionality they need.
goal
Increase website conversion into signups.
💭 understanding the problem
desk research
The first focus of my research was understanding Closum and its value proposition as a digital product:
Offering plenty of digital marketing solutions on one platform.
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
qualitative research
I spoke to 5 people who fit into the user persona of the product and they told me that:
The documentation provided by Closum is hard to reach or even inaccessible
Promote easy access to resourcesace
The platform is confusing
The copy was seen as unclear for new users
research takeaways
All the data gathered from the different research methods was arranged on an affinity diagram and led me to 3 main problems I aimed to fix with my design:
No clear information on the products available, what the company is and what they offer, to whom;
Confusing information architecture and copy which makes users feel lost;
Bad access to documentation and FAQs.
Be clear about the product
Users seem to be unaware of the quality of the customer support
Confusing hierarchy of information, especially on the homepage
💡 designing a solution
user flow
I started my design process by designing a user flow that optimised product discovery and sign up rates.
What Closum is, what products they are offering and how.All the pricing plans available with feature comparison🤩🎉✨Different resources available to get the most out of the platformTo better focus on the pages' information architecture, I created lo-fi wireframes to understand where each section could be and its layout. These wireframes were tested, and the feedback gathered was implemented into higher-resolution frames.
I’ll share some of the changes to several pages and elements during the design process.
Here I show the evolution of the pricing cards on the pricing page, where we can see several changes.
Homepage
Information about specific solutionswireframing & iterations
All solutions page
This section was not seen as relevant by users and therefore was moved down on the page.Social proof of value is important on SaaS websites so its was necessary to not have this be the last section of the page.
The Sign-up button was made more accessible by being higher on the cardThe 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.Review section lower on the pageTrust pilot sectionThis 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.
This section was moved to the homepageThese sections were moved to the product page.Given that the product had a very clear visual identity no changes were made in terms of visual design.
Therefore it ended up being removed, and its sections were moved.
Pricing page
style
💙 the end
not really…
going back to the beginning
My challenge with this project was to:
Make the flow from website entry to signup, enlightening and leading the user along the correct path to the functionality they need.
My design solution, described above, aimed directly at solving it, by having a clear user flow that reduced friction between the user and the product.
Further work could be done with a copywriter to create clearer and more direct copy that is easily digestible by users.
The goal of my designs:
Increase website conversion into signups
Unfortunately, given that this project was developed during a bootcamp it wasn’t implemented. Despite this, through research and teamwork, efforts were made in this direction, and informal feedback received from users was positive.
What I’ve learned and what I would do if we lived in a perfect world
My biggest learning from this project was to implement my learnings from the past. I finished all my bootcamp projects mentioning how important research was and so this time I took the time to implement all the insights gathered on my lo-fi wireframes. I was thoughtful and intentional from the beginning and that made my design process much more seamless and smooth than before.
The next steps would be to test and iterate on the HI-FI prototype, ideally with more Closum users, to better identify, for example, what information to display and where, as during my research I was unable to get a clear answer to that issue.
See you around✨
👏 don’t just take my word for it
Tiago Silva | CTO @ Closum
“Marta has committed and developed a successful UI/UX project for Closum in partnership with Ironhack. For the whole time she has worked with us, Marta was super professional, committed and has shown amazing skills. She has tremendous potential and a bright future ahead.”