Elevating Product Usability: A Step-by-Step Guide from Heuristics Analysis to Developer Handoff
Using Information Architecture Heuristic Evaluation to analyze a SaaS platform overall usability in a systematic and reproducible way.
Introduction
Design heuristic analysis is a powerful tool for evaluating the usability and user-friendliness of a product or website. This method is based on the evaluation of a design against a set of established principles and guidelines, also known as heuristics.
In this article, we will delve into the depths of the design heuristic analysis process we used to evaluate Acumbamail, a SaaS company that offers a platform for sending marketing campaigns. We will guide you through the steps of our analysis — whether you are a designer or simply interested in design, this article will provide insights into how to use heuristics to enhance your product. We will begin by defining what design heuristics are, and then take an in-depth look at the case study to see how they were applied in practice.
Context & goal
Growens is an integrated industrial group that creates technologies for predictive marketing, mobile messaging and content creation, meant for organisations wishing to communicate effectively with their customers.
Acumbamail, one of 5 Growens’ business units, is a Spanish-based email marketing provider.
The Acumbamail platform offers 4 main features:
- Create email campaigns starting from templates;
- Send SMS campaigns to phone lists;
- Design and publish landing pages;
- Create and send surveys;
In the last few months, the Growens Design team focused on improving the platform’s overall user experience. What do we mean by such a vast term? The topic we addressed during this project was the usability and consistency of the elements across the whole platform. Also, we addressed information architecture (IA), user flows, interactions and navigation between pages.
The process for assessing the usability and redesign pages
Step 1: define the heuristics and map the platform
We began the entire project by extensively mapping the platform. First, we represented the platform architecture to better understand the scope of the project. Then, we proceeded to analyze the flows within the pages, that is, the goals and tasks that users need to accomplish in order to reach their goals in the platform. Once the platform was mapped, we studied which heuristic principles were the best fit for our context and product.
Abby Covert, in her work as information architect, author and teacher, has crafted a lot of tools for the job we needed to do. One of these tools is a set of Information Architecture heuristics, which serve as principles that anyone can use to improve their product IA.
The principles are divided into categories that lead designers to ask themselves some questions about the product, the page, or the information depending on the scope:
- Findable: Able to be located
- Accessible: Easily approached and/or entered
- Clear: Easily perceptible
- Communicative: Talkative, informing, timely
- Useful: Capable of producing the desired or intended result
- Credible: Worthy of confidence, reliable
- Controllable: Able to adjust to a requirement
- Valuable: Of great use, service, and importance
- Learnable: To fix in the mind, in the memory
- Delightful: Greatly pleasing
Each category includes several principles that were our starting point. We analyzed all the heuristics and adopted the ones that matched our needs and slightly modified the ones that did not fit exactly.
Since an heuristic evaluation is an assessment made by expert designers, it provides a clear way to examine the usability of a given product. However, this type of analysis should always be supported by quantitative or qualitative user research to confirm the insights.
Our goal was to analyze the usability of the platform using a systematic approach as objective as possible, in order to reduce individual biases. This means that every designer (even with different experience levels) will have a comparable result when using this heuristic analysis approach. An example of the heuristic we used follows this format: “FINDABLE- Are there multiple ways available to access things?”. Furthermore, we added two additional pieces of information: an issue description and an issue localization, to indicate whether the error was limited to the page or extended to the whole platform.
We began analyzing each page and flow by asking ourselves if there were any issues related to each heuristic and what the specific problem was. Each usability issue represents a -1 in the overall score. This approach allowed us to locate usability issues for each page and estimate the gravity of the issues by summing the scores for all the sections.
To do this, we used Miro. For pinpointing each usability issue, we used post-its structured with a specific format: “Category-Heuristic-Localization-Description.” By using this approach, we were able to speed up the data analysis phase.
Step 2: summarize in quantitative terms and sort priority-wise
We arrived at a point where we had a lot of screenshots, flow diagrams, and post-it notes, and we needed to give them meaning and extract information that was useful for our stakeholders. To do this, we exported all of the Miro frames to a csv file and, thanks to the format we used, it was very easy to import all of the usability issues into a Google Sheets format.
The questions we answered through the data were:
- What is the platform section that has the most usability issues?
- Are the problems in the section specific to a certain page or general to the entire platform?
- Which category is lacking the most?
We analyzed the platform’s sections extensively and found usability issues in a systematic way. Therefore, we needed to present our findings to internal stakeholders to determine which section was the most strategic for the product at that moment. By matching this information and prioritizing usability issues, we were able to sort the sections and create a roadmap for the following weeks.
Step 3: redesign the pages containing usability issues
In this step, the core of the design role comes into play: fixing and transforming the design into something that can be developed. To accomplish this, we used Figma (editor’s note: we love Figma) to list all the usability issues grouped by page, making it easier to address the problems.
We structured the file in two columns: problems (i.e. usability issues found during the analysis) and solutions (i.e. the space where we redesign the usability issues). We used this structure to have a clear overview while navigating the file. Green background meant that the solution was ready to be developed. Yellow meant the solution was still a work in progress. Since we work remotely on different time zones, we defined a way of working as much async as possible.
When it came to redesigning each page, we approached the issues with two possible paths. For micro-fixes, such as fixing UX copy or changing the style of a button, we designed straight to the UI. We understand that it is recommended to design step-by-step and follow a “fail fast learn faster” approach, but in this case, we found this way more efficient.
A different approach was used when the usability issue affected several components or backend logic. In this case, we followed the standard process: starting with lo-fi wireframes, validating the logic with the development team, and then moving on to pixel-perfect UI. We also added the cherry on top by testing the solution with real end-users and iterating. Nielsen & Norman approved.
Step 4: communicate the redesign to the development team
Once the design solutions were prepared, that is, designed and where necessary tested, we wanted to discuss the solutions with the development team to explain the rationale behind our choices and ease the comprehension of our artboards.
In our experience, we have found the step of sitting at a table with the developers to be crucial for the success of the project and the morale of the design and development teams. In the Growens design team, we consider developers to be key stakeholders when designing solutions. We try to involve them as much as possible, both during the lo-fi design step and after the pixel-perfect version, in order to reduce friction.
Conclusions
In conclusion, we carried out a design heuristic analysis that turned out similar to an x-ray vision for design flaws. For our context, this approach proved very effective for analyzing Acumbamail, a huge Saas platform.
We walked you through the process and shared the different Information Architecture heuristics we used to identify areas of improvement. If you have any questions or would like to talk about what you just read, please don’t hesitate to reach out to us at design@growens.io. We’d love to hear from you!
