Back to all web projects

Internal Tool for Customer Success Managers

Please note that the data represented in the designs is not real. All the names and contact details were generated by uinames.com and company names are taken from the list of largest European companies by revenue on Wikipedia .

A mock up representing two mobile screens and one desktop screen.

Business goals

Increase B2B profit contribution by increasing productivity
(efficiency + effectiveness) in account management.

User needs

I want to have a clear overview of the account with 16 metrics without collecting data manually so that I can assess the risk and identify what strategy to adopt for this account.

Team

Product owner, business analyst, product designer, delivery lead, tech lead, 5 engineers.

Responsibilities

- Mapping user journeys and edge cases;
- Wireframing;
- Prototyping;
- Information architecture;
- User research (surveys, remote and in person usability testing sessions, contextual inquiry);
- UX copy;
- Product design;
- Interaction design;
- Facilitating design studios with the stakeholders and the team;
- Contributing to the roadmap and influencing it;
- Stakeholder management.

A screenshot of the roadmap produced by a product manager and business analyst in collaboration with UX and delivery lead
12 months' roadmap broken down into releases.

Process

Alignment inside the team plays a vital part.

The process that worked very well for this project is the following: Every Monday a business analyst, a product owner and a product designer catch up for 30 minutes to discuss our priorities for the next week; on Tuesday a tech lead, a business analyst, a product manager and a product designer catch up for a 30 minute pre-planning session to go through the tickets that need to be put forward into the planning session on Thursday; on Thursday the whole team has an hour long planning session to go through the tickets and discuss them in more detail. The team can challenge any ticket and if there are not enough details, it will not be moved into ‘To Do’ list. Without pre-planning this session in the past we would spend 30 minutes discussing just one ticket, simply because we couldn’t agree on priorities. You can think: “Oh, it sounds like a mini waterfall process!”, and you might be right but there are no right or wrong answers when it comes to what process would work best with the talent you have in your own team.

A diagram representing a process that starts with the alignment between design, product owner and business analyst for 30 minutes, continues to the pre-planning meeting between design, product owner, business analyst and tech lead for another 30 minutes next day and finishes with the one hour planning session with the whole engineering team.
Example of weekly collaboration process diagram for the team.


I spent about 12 months working on this project, and when I joined the team all discovery has been done by a different UXer. My task was to help the team start building a tool so I facilitated a design studio which is my favourite technique of alignment within the teams and with the stakeholders.

Photo of the team sketching ideas and a close up of the final votes.
Design studio with 7 team members: product manager, delivery lead, business analyst and 4 engineers.


Scanned sketches representing different ideas of the dashboard.
Examples of sketches produced by the team members during design studio.


Design studio informed an MVP, and then we did beta testing for around 12 weeks sending weekly emails to the CSMs asking for their feedback and rewarding every response with the ticket for the prize draw. Our team had to think about prize that would work for teams in the US and Asia as well as the team in the UK. I designed T-shirts and bags to give away to our stakeholders to the participants who won in the draw.

Screenshot of the forms used to collect feedback.
Examples of the feedback forms that we used during beta testing


Three variants of the T-shirt print. Two variants have a big star in the middle with the paint splashes and a third option has an illustration with the astronaut.
Design options for the T-shirt that was a prize for lucky winners. The name of the tool is Lodestar that means "a star that is used to guide the course of a ship, especially the Pole Star." A symbol of star and space theme were used as a basis of design of the T-shirt illustration.


A combined photo with the prize tickets and the team members wearing T-shirts.
Artifacts of the prize draw on the left and happy team members who ordered T-shirt prints with the illustrations on the right.

In parallel we ran usability testing sessions, and till the end of the year we’ve had 4 of them having interviewed 6 participants from every region for each session. Below you can see 4 iterations of the health score indicator that represents the health of the account.

A diagram representing 4 iterations of the health score indicator starting from a colourful dot, then an emoji, then a choice between a dial, a circular progress bar and linear indicator and all states of the linear health score indicator as it was a preferred choice of users.
Iterations of the health score indicator.


Ideas of the health score were informed by research done online, inspired by the books and in the office.

A selection of screenshots and scenarios that represent various health score indicators found online and in the books
Examples of the credit scores found online. Among others there are credit score components used by Experian , RentCafe and Nav .


Image of the book cover
"Information Dashboard Design" by Stephen Kew is a great source of inspiration and information for designers who work with dashboards and data.


Who said that internal enterprise tools should be boring? I worked on illustrations for the empty states for 404 scenario (page not found), for random errors, for states when we couldn't get any data from another system in scenarios when a contract hasn't been renewed yet or there were no active users on the current account and for accounts in trials as the tool wasn't designed to support these accounts yet.

A selection of screenshots from the mobile apps and web that have interesting minimalistic illustrations.
Illustration moodboard for empty states.


Scans of the hand-drawn sketches for error states.
Sketches of objects for the empty states: UFO to represent the page that is not found, robot for a random error, sleeping astronaut for a contract page with no active users and a spacecraft to represent the accounts in a trial stage.


A mock up representing used colour pallette, illustrations in the mobile and laptop shells and the full set of the illustrations without the device shells.
Illustrations in situ.

A screenshot of poorly developed minimum viable product of the app.
Minimum viable product of the account page launched in June 2018.

Bank of Business view (list view of the accounts) and the account page in their final iteration are presented below.

A screenshot of the matured home page after 18 months of work.
Implementation of the Bank of Business after 6 iterations.

A screenshot of the matured account page after 18 months of work.
Implementation of the contract page after multiple iterations.

Accessibility: for this project we had to consider colour blindness as it was a known factor among users. First iteration of the health score indicator failed because indicating a different state with the colour only didn’t work. After that we ran more usability testing sessions to identify the best candidate for a health score indicator of the account that had 4 different states.

Outcomes

Usability testing sessions surfaced the fact that by building a tool alone will not solve all the problems, and there is a need to change a business process. B2B department hired a business technology training specialist who designed training sessions to align the global team on the process and how to use the tool. More specific metrics and analysis can be achieved when the tool is used over a longer period of time, i.e. at the end of calendar year.

LinkedIn Medium

© Olga, 2019-2023