How to improve the user experience for a SaaS web app

A story about how to make sure the design meets the business objects

Project Background

When I was at Scanlife, I was the solo UX/UI designer. My first task was to redesign their SaaS product, a web application. Although this web app generated the most revenue for the company, there was a concern that it was not user friendly, and therefore diminishing potential returns. Thus, the user experience was seen as very important for growing revenue. My goal was to deliver a more user-friendly experience and to design a more elegant interface.

Home page -The old UI
The old UI

Identify the problems

After I conducted usability testing, I provided advices about how to improve the learnability, memorability and satisfaction for users. At the same time, I was always enjoying making sure that my design concept met the business need. So I gathered information with different stakeholders and asked questions like “Why we want to redesign this?” “Which features do you wish to optimize?” and “Which user actions would you like to encourage most?” etc. These questions helped me to understand the bushiness goals and what’s the real problem I need to solve.

I believe the quality of the look and feel of a product is an important indicator of the credibility. As you can see from the screenshot below, the look and feel of the old UI was not friendly and modern. The home page was very confusing. Users were unlikely to know where to start. On the other hand, the web app didn’t have the navigation to info users where they stand and what’s the next step. When users wanted to create a code, it took to many steps to complete this task. Each steps was not clear and organized.

Persuade stakeholders and solve conflicts

This application was a tool mainly for the marketers (targeted users). Thus, the functionality had the most priority. However, there was a conflict about which feature had the most priority, “Create a code” or “Manage codes”. The team couldn’t make a decision about which feature should be presented to the users in the first place. To solve that conflict, I built two-user journey based on analyzing the type of users and scenarios. As a result, I differentiated the experience for new users and power users. For the new users, their prioritized task was to create a code. In this case, they will see the “create a code” feature after login to the app. For the power users, they will see the “manage codes” features after login to the app.

The Site map for the different user journey

After choosing a model for the most common visitor, the typical user path was much clearer. By reducing the steps necessary to create a code action, the experience was simplified. To reduce and simplify the steps of creating a code as much as possible, a pop-up box was designed to connect the actions of create, download, and style a code.

In the future version, I envisioned additional engaging user features involved in this platform, such as “Explore” and “ Case study”. Following the design theory of Donald Norman: “Pleasurable engagement” fun and friendly elements embedded in the design will form a high quality product.

Achievements

I started this project on June 3rd with zero guidance. I feel excited there were so much design work to be done and I wanted to deliver a better product under a tight timeline at the same time. Within one month and a half, I successfully helped the team launched the new UI on July 14th. Everyone seems pleased by the new UI. Being an agile designer in a highly collaborative team means fast iteration. If someone asked me to see my heavy annotated wireframes, I didn’t have those anyway. I believe those are not agile. The magic was in communication and willing to collected and validated their feedback and iterated quickly. During the process of design, I led the design and helped the team started a more effective communication way for design collaboration.

I feel it is necessary to tell my story so people can understand design can really improve the product. Good design is a certainly indicator of product’s credibility.

New Design- Welcome page
New Design- Form Design
New Design — Create a Cade