Announcement board

This is an in-production announcement board for a B2B client-facing platform that allows the sales team and customers to receive and view their accounts' announcements. Internal team members can create, edit, save and send announcements to user groups.

About

Client

LeadPlus

Year

2021 TKTK

Location

Tokyo, Japan

My role

As the sole designer in the company, I got to wear a lot of hats

I love all parts of design (perhaps not equally) which is great as I got to do all aspects of design in this project, including the icons. For this project I was the:

UX researcher
Interviewer

UX designer
UI designer

The Challenge: Create a centralized and customizable notification center for all users

Internal and external users do not receive news about the platform or their accounts in a central place so notifications are dispersed around mass and private emails, making information hard to find.

A brief background:

The service team managed up to 100 clients' accounts in this company. These accounts managed online advertisements and services through Google, Yahoo and Facebook. Clients would allocate multiple, different budgets to their advertisements based on geographical location, promotional material, time of day, season, media platform, etc. Every day, a service team member would check their assigned accounts and adjust settings on Google, Yahoo, and Facebook to optimize the performance of the advertisement. When the company began, this was not a large problem as there were few accounts. As the company grew, this task took up an overwhelming part of the service team's day. Another problem: there was no centralized or consistent way to perform this task. Every service team member had a different method or workaround for ensuring they could manage the performance of all accounts. As could be imagined, some workarounds were more successful than others.

What is the challenge? To create a single space where service team members can see the performance of their accounts in order of need to address issues quickly. This has an immediate effect on the time service team members can give to their other tasks. More crucially, this has a large impact on advertisement performances across the company. If issues are able to be caught more quickly, clients can spend their budgets more effectively and have trust in the company to manage accounts and client retention will improve.

KPIs for this project include:

Reduce time maintaining accounts
Improved performance metrics
Sunset individual workflows and workarounds

Design process

An overview of the project within the team from start to finish

My involvement began with a project kickoff led by the PM and also included the lead developer and stakeholders. Together we made sure we clearly understand the requirements, potential pain points and business goals. Along with this communication, I began to research which included user interviews and a competitive audit. From there I could work on user stories and storyboards. I use the data I have in Google Analytics and June to tell me what user groups are using for devices when they are checking the platforms, and what times of the day. After looking at the data, I can start wireframing and creating dome ideas to share with the team. Mockups are tested at various stages to be analyzed and iterated upon. This line can often take the form of a circle and be repeated many times throughout the course of a project.

Research, Tools, & Methods

The desk research and communication that happens before opening Figma

Before Figma, before sketching, there is a lot of desk research. Unlike other projects in the company, this is a very common feature that is easy to research: an announcement board. I start looking at Google Analytics and June for data about who is using the products on what devices at what time of day and any other relevant statistics I can gather. Several software products I use in my personal and work life have similar features so I conduct a competitive audit. I go back and ask the developer for this project some questions about technical limitations and possibilities. Along with my product manager to help with Japanese translations, we conduct some user interviews and keep our notes in Excel before making our final summaries in an Atlassian Confluence document we can share with the team.

User Interviews: What do users want and need

Breaking down needs from various user groups

As mentioned earlier, there are internal users (sales teams, service team, PM, stakeholders and super users) and external users (ad agencies, businesses, and individual clients). With the help of my PM, we gather 3 members of each sales and service team, stakeholders and 2 super users. We ask them about their current methods of receiving and distributing information regarding the platform and its relevance to their roles. The service and sales teams walk us through their processes and pain points.

After several rounds of discussions and interviews, we arrive at similar findings

senders want to send to groups of people (sales info, platform updates, changes among modification procedures to staff, etc)

senders and receivers want to filter messages my tagged content

senders want to be able to edit the content of messages to easily re-send or update as needed

it must be connected through Confluence for security and technical reasons

With these insights in mind, I can begin on the user workflows.

Super users need to create, edit, tag, and send content to different groups to have flexible, efficient communication.

User Flows: A clear path for users to easily reach their goals

Identifying different users' journeys for different user types

After reviewing the business requirements, the interviews and the insights, I write the user stories for the service team, sales teams, and product and engineering team.

As a service team member, I want to sign into the platform and immediately see which of my campaigns need the most attention so that I can prioritize and make the most of the time I have to optimize the account performances.
As a sales team member, I want to be able to find my clients' accounts, their performances and who on the service team is making modifications so that I can be up-to-date and knowledgeable for my clients.
As a product and engineering team member, I want to be able to sort through sales & service team members' accounts so that I can notify them if something has come up in the data that needs attention or explanation.

Desk research: Competitive audit

Researching common themes, best practices and measuring the benefits of real-time, in-app alerts

I create a mood board based on popular content-sending systems and tools. Now that I know all the user needs and business requirements, I can start putting the pieces together.

One of the more extensive discussions we had had as a team and among the dev and I was the question of real-time, in-app alerts to be received by the user. It was a feature some team members felt would be very useful. Our usage data at the time suggested that external users were checking the platform around once a day, looking at the overview of info for up to 10 minutes and signing out. The dev informed me that while possible, creating real-time alerts would require a lot more time and resources than if the user were to receive the notification alert upon login. As users were not spending long periods of time on the platform, coupled with the knowledge that extremely time-sensitive information was very rarely sent out, we decided only to have notification alerts upon user login.

Wireframing & mockups

From paper sketches to Figma prototypes, communication is critical

With the requirements, interview data, and user stories I sketch out some lo-fi wireframes. The first person I typically talk to at this stage is the developer. Not only does he usually have good ideas, but he can also let me know if any ideas or concepts I'm thinking of are deceptively complicated. This is an easy way to quickly eliminate some frames as well as keep people involved in the design process. Based on his input, I move up with some higher fidelity versions in Figma that I can show the rest of the team.

I make some simplistic and interactive wireframes to present to them and they eliminate the ones that don't fit our needs. All the concepts with preview text were discarded as stakeholders were concerned users would not be as likely to open notifications if they could skim the content in preview text. Another idea that we didn't continue with was a feature for senders or super users to filter notifications by recipient group. While this could be a useful feature for senders as it would allow them to see which sales groups received which emails quickly, it was deemed unnecessary for version 1 and we would look into it again for a later version.

Testing & Validations

Testing in Maze and measuring KPIs

I put a high-fidelity wireframe and mockup into Maze, my favourite testing program. Here I can get feedback from teammates and stakeholders and tweak any remaining issues before proceeding with the final prototype for development.

The testers gave positive feedback and the proposed mockup had a 100% success rate. It was easy for users to see the notification alert, navigate to the announcement board, open the notification and search for it by tag.

Give the users flexibility and control:
Announcement creators can create, edit, customize recipient groups, schedule when announcements are sent, and customize templates.

User Interface

A look into the Design System and visual design of the platform

This platform and company colours existed prior to my joining the company. However, a design system did not. In between projects I created the design platform for the company's platforms and maintained it with the collaboration of the developer. I did inherit the colour scheme and some elements but organized them into interactive Figma variants and then added them to Storybook with the developer to maintain design consistency and simplify development.

This is a sample of the colours used on the platform, the middle shades of pink and blue are from the company logo and I built the other shades around those. The pink is the highlight colour, often used for call-to-action items whereas the blue is the primary colour for layouts.

The typography here is Roboto. It was chosen for its simplicity and localization. The primary language of this platform is in Japanese, which Roboto handles elegantly. The English version is only for the product & engineering team. I created the typography scale for consistency and visual ease.

Creatively, it was incredibly rewarding to design in collaboration with the developers in new ways, beyond our typical chart libraries, to display information in the best way possible for our users.

Final prototype

The design that was approved by stakeholders and submitted for development

Here is a gallery of frames of the final prototype. At the bottom of this case study, there is a video of the user flow from the perspective of an announcement sender. Here are some of the results of mockup testing:

For the tags, I chose the darker highlight pink as the blues were previously existing design tokens with other significations.

In testing, more people preferred the envelope outline for both opened and unopened announcements, though I would like to do more testing on the icons in the future.

As is sometimes the case, there was scope-creep mid-project and some features were deemed essential after the first round of interviews. Namely, the addition of optionally including the announcement as an email (can be seen in the video).

Meeting KPIs:
Feature adoption at 31% is a success in the first month.

Validations & Future Iterations

Here is a one-line description of the post-testing results, what I submitted to the team and what we moved ahead with

The KPI for feature adoption of 30% was met within the first month after the feature release. While this is still a success, it can of course be improved upon. In internal user interviews, super users were very happy with the amount of control and customization they can use. Service team members reported the desire for more filters, which can be looked into when resources become available.

As this is the first thing on MyFolio with an alert, I want to give a bit more time for internal and external users to experience the feature before looking at the customer satisfaction score. In a future iteration, it could prove interesting to add in the preview text & experiment with limiting the number of tags creators can add to a set database.

Final product flow

Here is a video of the complete user journey from an announcement creator's perspective.

BRYENNE KAY