Ryzeo is an enterprise SaaS company that offers marketing automation solutions to eCommerce businesses. They help their users optimise conversion rates by utilizing 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. Two of the 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.
In order 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.
The first step in our UX research was to analyse the domain of the product. We went through multiple articles, videos about email marketing SaaS, how it helps in improving e-commerce businesses conversions etc. This research also helped us gather some insight into how our client’s competitors performed.
Once we had a good understanding of the domain, we moved on to Auditing our client’s product.
- 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.
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.
In order 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.
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 flows and possible actions that users may need to take when interacting with their products.
We identified 8 common features across all enterprise SaaS products. And on the basis of that, a detailed analysis was conducted to compare their user experiences and functionality.
No research can ever be complete without a qualitative research tool, and that was rightly our next step in the research phase.
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 stakeholder insights and competitors’ analysis findings.
Once we had all the data we would need, we started drawing insights to guide our redesign process.
In order to identify design problems and devise product strategies, we developed goal-directed user personas. They provided us with a clear understanding of user behaviour and the purpose of the product.
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 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
- Campaign Creation
- Workflow creation
- Multiple tenant capability
- Campaign Calendar
Backed by the insights obtained during the user interviews and obtained from 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
Given that 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
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
After we had the screen-wise user flows and the IA, we started visualising the screens by creating paper sketches. Later, these were converted to mid-fi wireframes.
Mid-Fidelity wireframes gave us a more accurate depiction of the layout. We were able to see the overall structure and how things would work. Basis 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.
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.
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.
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
Once the style guide was finalised, we started implementing that into 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. That 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
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 more 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 then we would love an opportunity to share our experience with you.