Contextual – May 2023
Role: Product designer
My role is the product designer in this project. I worked closely with the product owner and the lead JS engineer on this project. I also worked with our front-end developer based in Vietnam.
Why is it important to keep the user aware of the status of actions taken in a product?
- Transparency: Providing feedback on the status of actions builds transparency, helping users understand what is happening within the product.
- User Confidence: Clear feedback instills confidence in users that their actions have been successfully executed or are in progress, reducing uncertainty and frustration.
- Error Prevention: Immediate feedback can alert users to errors or issues, enabling them to rectify mistakes or adjust their actions accordingly, thus preventing further errors.
- User Engagement: By keeping users informed about the status of their actions, you maintain their engagement and encourage continued interaction with the product.
- Trust Building: Consistent and timely feedback fosters trust between users and the product, enhancing the overall user experience and encouraging repeat usage.
- Task Completion: Users are more likely to successfully complete tasks when they receive clear feedback on the status of their actions, leading to higher satisfaction and achievement of their goals.
Problem
- The messages in Contextual are inconsistent in style
- Success and failures of the product go unnoticed and there’s no way to send notifications to the users
Project principles
Just in time, just enough, just for me
Messages should be timely, provide relevant information and targeted at the right user
Respect user’s needs
Messages should not interrupt the user’s intent, goals, or actions. They can only interrupt if the action is critical and timely.
Language should be proportionate
Both visual and literal language should be present. Messaging components, interface and placement should reflect content information and intent.
A message stream
A series of communication is worth keeping at message-stream communicating to the users. This keeps a reverse history of the messages. It also tracks the key notifications, warnings, and wins.
Phase 1
Review and analyse the existing designs
Handbook for references
Follow design principles
What are the message types
Status options
- General
- Error
- Warning
Elements breakdown
We designed an all-in-one version of the message component. It was inspired by our main asset reference, Material design 3.0 components.
* This will act as a reference for all the future designs.
Details in the published documents
Banners
Story: As a product, we want to let the users know about the state of their account
Placement: Embedded, usually at the top or bottom of the screen.
Surface: Contextual, at the home screen.
Content guidelines: Use as little and simple text, 2 lines max. You can use a header or not.
Purpose: Banners should show the user’s account state or other general info. Interaction: Dismiss for general banners, no actions for errors or warnings. Measured via: Impression rate and click through if action needed.
Warning
General information
Error
Dialogue boxes
Story: As a user I want to confirm if I’d like to proceed with an action or if I’m taking risk with doing something.
Placement: Pop-up – at the time of required action from the user – conveying information or errors
Surface: Prioritised, Pop-up
Content guidelines: Related image, image heavy, 2 lines max content, Must have a title, subtitle is encouraged, should fully explain the situation and required action
Purpose: Dialogue boxes should be used in case an action is required by the users and the states are clear.
Interaction: Depending on the message the CTAs should trigger different actions.
Measured via: Impression rate and click through if action required.
General information
Error
Warning
Communication cards
Story: As a user, I want to know the state of a progress I’ve triggered, e.g. download CSV or Saving a guide.
Placement: Pop-up – at the time of situation happening at Contextual – conveying information or errors
Surface: Prioritised, Pop-up
Content guidelines: Progress icon, Related image, 2 lines max content, Must have a title, subtitle is encouraged, should fully explain the situation and required action
Purpose: Dialogue boxes should be used in case an action is required by the users and the states are clear.
Interaction: Depending on the message the CTAs should trigger different actions, usually accept or dismiss
Measured via: Impression rate and click through if action required.
General information
Error
Warning
Snackbars
Story: As a user I want to be informed if the action that I took is successfully completed or if it’s facing an error.
Placement: top of the screen, Pop-up – Disappears automatically.
Surface: Prioritised, Pop-up, mostly no action required. In case there’s an action required there should be a dismiss icon available.
Content guidelines: 2 lines max content, Must have a title, subtitle is not required
Purpose: At the time of a successful or unsuccessful process, at general state it appears and disappears just to convey the information.
Interaction: action required at the time of error or warning: Accept button and dismiss icon
Measured via: Impression rate and click through if action required.
General information
Error
Warning
Accessibility
Stark: Some colours we chose don’t meet contrast standards for accessibility.
We used the suggestions from the stark plugin. We made some changes to our design systems to meet the accessibility requirements. This lets users with different vision abilities see and use our dashboard.
Impact
- The playbook is given to the team as a reference. It has been used since and acted as a source of information and design style guide.
- We review the current messaging style. Then, we update it to meet the guidelines and have a consistent look and feel.
Phase 2
Message stream
Milestones
- Complete the design for message streams
- Implement the design by the engineers
- Review the impacts and run user testing sessions
- Evaluate and make potential changes in the design
Types of messaging to send/keep via the message stream
- New app version release and user needs to update the screenshots
- Expiring guides
- Expired guides
- Goals achieved
- New device added to preview mode
- Target loss at guide level
We designed the message stream notification bar using Material design 3.0 components. We were inspired by our main asset reference. This is to act as a drop down from the top menu bar at Contextual dashboard.
Elements breakdown
Impact
- We will measure the impact by counting the clicks and interactions. They will be counted during a period of time.
- The message stream can/should be used for user support purposes. This is to be measured by internal team surveys and reflections.
Crafted by Bess 