dashboard of an email marketing enterprise saas application

CASESTUDY

Enterprise SaaS UX research & redesign

How we conducted UX research, redesigned a legacy application and built a design system for a marketing automation platform

Industry

Enterprise SaaS

Duration

5 months

Service

UX Research
UX UI Design
Design system

Devices

Web

Ryzeo is an enterprise SaaS company that offers marketing automation solutions to eCommerce businesses. They help their users optimise conversion rates by utilising individual browsing behaviour and targeting shoppers early in the buying process, thus turning window shoppers into buyers. They approached us with a goal to become an industry leader through comprehensive UX research, a highly collaborative design process and consumer-grade UX.

As a company functioning in the digital domain, they had a rough idea about the problems they were facing. The two main issues they shared with us were that –

  • The users found it difficult to navigate the existing app interface which led to a high user drop off rate, and
  • Their reports didn’t offer any actionable insights.
Enterprise design services

UX Research

To transform the UX of this SaaS application, we proposed a comprehensive UX research phase that comprised of understanding the product and overall business domain, assessing the UX maturity of the stakeholders, benchmarking the competitors and understanding the users and their expectations.

UX research methods used during this phase were: (1) Heuristic evaluation and design audit of the product (2) stakeholder interactions (3) competitor analysis (4) user research (5) review of the product analytics.

Domain Understanding

The first step in our UX research was to analyse the domain of the product. We went through multiple articles and videos about email marketing SaaS, how it helps improve e-commerce businesses conversions etc. This research also helped us gather some insights into how the client’s competitors performed.

Once we had a good understanding of the domain, we moved on to Auditing the product.

Product Audit

product audit of an enterprise saas email marketing platform

We audited the application through various methodologies. We deployed a team of auditors to perform –

  • Heuristic Evaluation
  • Overall findings
  • Enterprise design validation

These exercises helped us cover a lot of ground including – understanding the heuristics, the enterprise design framework that we’d have to consider while designing this product, identifying the problem areas in this enterprise SaaS and coming up with desirable recommendations.

Along with being able to provide users of this email marketing SaaS a good experience, we also aimed to help our clients increase their Annual Recurring Revenue (ARR), Customer Lifetime Value (LTV) and lower their Customer Acquisition Cost (CAC) owing to a good ux.

Stakeholder Interactions

notes from stakeholder interviews

Once the Product Audit was complete, our next step was to interview stakeholders. This was key because along with validating our gatherings we also wanted to ensure we were well-aligned with the overall understanding of the stakeholders.

To start a meaningful discussion, we had devised a set of questions. This helped us make an assumption map to decide what hypotheses we needed to validate during the User research.

Competitor Analysis

Once we knew who our stakeholders saw as competitors, we started analysing them. During the evaluation, we reviewed several demo videos in the email marketing SaaS domain. We examined their user flow and possible actions that users may need to take when interacting with their products.

We identified 8 common features across all enterprise SaaS products. Based on that, we conducted a detailed analysis to compare their user experience and functionality.

No research can ever be complete without a qualitative research tool, and that was rightly our next step in the research phase.

User Interviews

notes from user interviews

We performed qualitative user research for validating the assumptions related to the user problems. The insights we gained were given the most importance. They were then combined with the findings from the stakeholder insights and competitors’ analysis.

Research Synthesis

Once we had all the data we would need, we started drawing insights to guide our redesign process.

Persona building

We developed goal-directed user personas to identify design problems and devise product strategies. They provided us with a clear understanding of user behaviour and the purpose of the product.

Thematic Analysis

thematic analysis

For our research synthesis, we utilised the thematic analysis approach. It helped us refine the data that was gathered during qualitative research. Next, we looked for meaningful patterns in themes across the data. The patterns were then analysed by repetitive data coding and theme creation.

Through thematic analysis, we were able to map various insights from the stakeholder interviews, competitor analysis, and user interviews. These insights helped us chalk out the design problems that we would have to solve during the design phase.

The following were the key insights uncovered during research synthesis:

  • Personalised report view
  • Actionable insights from reports
  • Nomenclature
  • Campaign Creation
  • Workflow creation
  • Multiple tenant capability
  • Campaign Calendar

Features

Backed by the insights obtained during the user interviews and from the clients, we identified the list of features to be designed. This was done at the beginning of the Information Design process.

  • Smart default view of reports
  • Actionable Insights
  • Metrics Comparison
  • Simplified sitemap and removal of unnecessary tabs
  • Summaries of campaigns and workflows
Design Phase

Given we were working with a legacy enterprise SaaS, we considered our SaaS UX framework before developing the IA.

Since most Ryzeo users were concerned with insights and prefered reviewing mass email analytics, we gave the reports modules the highest priority. We also redesigned their weekly report email template.

Page Wise IA and User journey

page-wise Information Architecture and user journey

We followed the red route matrix to identify critical and frequent tasks users performed when interacting with the application. It was through this that we came up with the use cases and mapped the features to them.

We created a user journey for various reports to map the touchpoints for the new design of the reports module. This helped us illustrate how the user will interact with the screens in there.

Once we had finalised the user journey, we started working on the information architecture page-by-page. At this stage, we kept the SaaS UX framework in mind which made us more vigilant about clear navigation, data visualisation, and adding impactful features.

Designing Mid-fi Wireframes

The next step was to visualise the screens by creating paper sketches. We, later, converted these to mid-fidelity wireframes.

The wireframes gave us a more accurate depiction of the layout. We were able to see the overall structure and how things would work. Based on this, we proposed a layout that was best suited for users.

The screen had two folds: the first consisted of cards that showed actionable insights and key metrics to the users, while the second consisted of a list of campaign details. This layout has been designed so that users could drag and drop the components within the screen and can create a unique view according to their needs.

User Feedback

Our design process was iterative. We asked for constant feedback from our personas at various stages – starting from IA to final designs. This constant feedback cycle helped us in iterating the metrics and the user experience of the product.

Component-Based Approach

different components for an enterprise SaaS email marketing platform

Our design consisted of elements that could be used across a variety of modules. Thus, we decided to follow a component-based approach. This helped us reduce the cost of design while delaying repetitive tasks during the technical development phase.

When designing the information architecture, we categorised the screen elements like metadata, content, and supporting content. In this way, we gained an understanding of what the structure of a component will look like and what type of component it will be. It could be a card, a button, a dropdown menu, etc.

We followed the atomic design methodology while creating these components so that it would make it easier to understand what all atoms, molecules, and compounds were used in creating a component.

Final Outcome

Style Guide

style guide for an enteprise saas email marketing software

In order to create hi-fi wireframes, we developed a manual that included a set of standards for typography and colours. We proposed a style guide that was best suitable for an enterprise SaaS product. We used a combination of Gilroy and Inter font families to provide a balanced UI. Brand guidelines guided colour choices. This helped us maintain design consistency.

We needed a minimal style to help our users focus more on the data they were looking at. For this, we used Marine Blue as the primary colour. We needed a neutral colour, like blue, since we did not want our primary colour to carry any positive connotations as green does, or any negative ones, like red, does. On the UI, we would already be using the greens and reds to indicate trends.

Inter was our choice for the body typeface. It has a tall x-height that lends excellent readability to our charts and tables. Through its OpenType features and stylistic sets, we gave our metrics data their due prominence in the UI.

To use for headings, we wanted something that was geometric and could be used to have a striking headline. We went ahead with Gilroy for this. Its bolder weights worked perfectly for our titles and headlines across the UI.

Hi-fi Wireframes & Prototypes

lo-fi and hi-fi wireframes of an email marketing saas

Once the style guide was finalised, we started implementing it onto the prototypes.

Prototyping helped us showcase an experience that was as close to the final product. It also helped us to identify issues with the wireframes’ usability. This gave us the idea to make the tabs sticky on the top while scrolling through so that users do not feel disconnected.

Design System documentation

documentation of a design system

We created a document of all the components that were used in the designs. This would make it easier for future designers and developers to understand each element of the component. Furthermore, we also divided every component into atoms, molecules, compounds, and organisms.

What makes a design system a “design system” is not just the designs, but also the documentation. We documented all design decisions like

  • Information Design
  • Component Anatomy
  • Visual design decisions
  • Design tokens
  • Component documentation like component anatomy, variants, states, etc.

This project allowed us to develop a deeper understanding of the enterprise SaaS users and further enhanced our capabilities as a UX design agency.

If you have a similar requirement, we would love an opportunity to share our experience with you.

We can be a reliable partner for all your SaaS application design needs

You might be interested in

A case study about how we helped an eCommerce company reinvent its ERP system by redesigning their existing legacy ERP software to be modern-looking and easy to use. This helped increase staff productivity and reduce business costs by minimizing errors.

User personas are a great UX research tool that can help you understand your users’ needs, behaviours and goals. Although user personas are the same across domains, knowledge of industry nuances is required. In this blog, we share a few tips for creating personas for enterprise software.

Have a project for us?

    contact tcules