Background

1. Company's Mission

Noosh is the world’s leading independent marketing execution software company, used by enterprises and marketing services companies to bring campaigns to life. The company’s collaborative SaaS solution helps customers optimize marketing execution activities from creative brief through production processes to costing and invoice reconciliation. Noosh’s users span the entirety of the marketing value chain, including agencies, enterprises, and suppliers, delivering billions of dollars of marketing assets into the market to drive revenue for some of the world’s leading brands.

2. My Responsibilities
I am the lead UX designer and lead the end to end design on this project. I am directly working with stakeholders, product managers and engineering team.

Discovery

This is the most challenging project I worked on so far. When I first joined in the company, my direct manager, VP of the engineer, asked me to redesign the entire product which has been launched for 20 years.

He specifically asked me to redesign the user interface of this product. After reviewed the product, I think simply redesign the user interface will not be most critical part for this product

1. Understanding business requirements

I started my design process with understanding the business requirements. I had separated meeting with our CEO, product manager and customer support team to have an overview of the whole project and problems they were facing. I was able to get answers for these key questions in my mind:

Why does the management team want to change user interface of this product?

It seemed to be an urgent requirement. My manager could not wait to let me start working on the user interface of this product. Instead of immediately working on the design, I decided to dig deeper on the request. Through the meeting with management team, I understood the reasons:

• They received a lot of requests from stakeholders asking to change UI;
• They wanted to explore more clients;
• The engineering team was moving the product to React framework, which was good timing to change the UI;

What problems they are facing?

• VP of Engineering: Legacy systems no longer support the growing complexities of the latest  technology;
• CEO: To meet the sales quota;
• Product Manager: High maintaining cost;

What is the business goal?

• Noosh marketing execution software helps enterprises and agencies optimize project delivery from creative brief through production, sourcing processes, costing, and detailed invoice reconciliation.
• Looking for an acquisition from a large company

2. Planing the UX design strategy

This is a small company with limited resources. I am entrusted at this critical time. Clearly, typical design process will not fit for this situation. I need to come up with a plan that can meet the requirement for both business needs and user needs.

I worked with management team to have this plan, we decide to divide the redesign into three phases:

• Phase One: Improving the usability holistically;
• Phase Two: Optimizing the core functionalities;
• Phase Three: Exploring the new opportunities;

Define

The overall goal of phase one is to improve the usability holistically. Here are the steps we need to complete in phase one

• Targeting the common user problems;
• Estimating the workload (Pages we need to work on in phase one);
• Designing and testing the solutions;

1. Finding out the main user problems

Even though we decide to improve the usability holistically in phase one, I still need to focus on solving the problems for users. Because of time, it was not the best idea to have interviews with different users. Fortunately, we have customer support team working with our customer directly.

There are four types of users in this product;

• Buyers;
• Outsourcers;
• Suppliers;
• Admins;

I worked with them to find out some common user problems

• Unclear content hierarchy;
• Lost track of pages;

2. Understanding the technical constraints

After we had agreement with management team on the planning, I had meeting with engineering team to understand the technical constraints.

• Only react pages can be updated
• No customizations added
• Use components from material react framework as many as possible.

3. Defining the pages for Phase one

According to the google analytic, I worked with product manager, and engineering team to define around 30 pages need to be worked on for phase one.

4. Building the metrics to measure the success

• System Usability Scale (SUS) (over 80.5);
• Task completion Rate (Over 90%);

Develop

1. Finding references for visual design

Before getting started with the visual design I create an inspiration board. The purpose was to learn about the visual world and gathering inspiration from other enterprise applications.

2. Using react card to quickly collect feedback

In order to redesign the entire website, I started searching some references to get more ideas. The purpose was to learn about the great functionalities and gathering inspiration from other learning platform.

‍

3. Designing the wireframes and prototype

I was using material UI design system to create wireframes and created prototype for usability testing purpose.

5. Conducting usability testing

The goals of usability testing include establishing a baseline of user performance, establishing and validating user performance measures, and identifying potential design concerns to be addressed in order to improve the efficiency, productivity, and end-user satisfaction.

I conducted the usability testing with 15 participants and collected all of the feedback. and then I did report to everyone in the company

Here are the results:

• 92% of participants were able to successfully complete all tasks (12out of 13)
• 92% of participants provided the positive words on new UI (12 out of 13)
• 38% of participants mentioned performance issue (5 out of 13)
• SUS (85.6/100)
• Participants used average 2.6s to complete each of tasks (exclude loading time)

6. Iterating the designs

Next I explored different design possibilities: Based on the feedback, I was able to iterate the design and fix the minor problems.

I do not know it was updated or not, and if there is no results are returned, then I have to scroll down to see that no projects match that criteria.

‍

Delivery

1. Q&A

I created detailed design guideline to engineering team.  and I set up the weekly meeting with the engineering team to follow up with them and provide the information if needed.

2. Following up the result

After the product launched, I actively followed up with product owner to see the results and next steps

• Successfully launched in 8 months ( Dec, 2021);
• SUS (85.6)
• Task completion rate (92%)

Conclusion

1. What did I learn

Designing this website has been a challenging and rewarding journey.

• Set up the right expectations. This helps deal with out of scope requests that could potentially derail the project and helps a quality product in time
• Design thinking is key to effective products. This lean framework really helped to shape the workshops and discussions with the team as it allowed me to stay focussed and on track throughout the entire design process.
• Involve engineering upfront. This helps to reduce any rework later on as an understanding of the technical limitations upfront will help to inform my design strategy.

2. What are the next steps

• Deep research about specific features
• Usability test of the prototype with users
• Improve user flow
• Responsive design
• A comprehensive business model

‍

‍

‍

‍