Ocula Boost

Why did we need to Improve Feedback state

Ocula Boost provides actionable recommendations to eCommerce teams, but users faced uncertainty during interactions such as uploading data or implementing changes. This gap in feedback led to confusion, delayed actions, and reduced confidence in the product's efficiency.

Feedback from some Boost Customers

Customers Who use Boost

Goals for this project

• Boost User Confidence: Create clear and timely feedback to keep users informed and assured during their interactions with Ocula Boost.

• Enhance Efficiency: Streamline workflows with intuitive feedback to reduce errors and improve task completion rates.

Approach

To identify areas where users have been facing this problems I decided to run some user testing and also use analytical tools like Hotjar to find this issues. I also looked into industry standards to find best practices and see what competitors are also doing - Nelson Norman group was instrumental.

Error Level Groupings

To address user uncertainties in Ocula Boost, I analysed potential feedback scenarios across four key error levels: app, page, component, and action. For each level, I crafted detailed user flows and journey maps, ensuring feedback was contextually appropriate and actionable. This approach provided a comprehensive framework for delivering precise feedback at the right moment, empowering users to navigate and resolve issues effortlessly.

Strategy

From my research and discussing with the team to understand technical feasibilities. I and the team came up with some guide lines such as; Being specific to the users stating what the problem is the user, Also we try to avoid blaming the user in order to reduce panic and show more of how they can solve this error, Further more, Using plain languages because most of our users don't understand technical Jargons like 404 pages or codes etc. Using Visuals and icons to also communicate because we don't only use colours and text but imageries especially for colour blind users or users with other visual disabilities, letting them know the most important informations and offering support to the users with contact support or other call to actions.

Design with Empathy

I focused on creating simple, specific, and helpful error messages. I ensured language was plain and free of technical jargon, with clear explanations of the issue and potential solutions. Each message was tailored to guide users with actionable next steps, and I used visuals and formatting to highlight important details.

Exploration

I explored different ways to accomplish the goal for this project, tried to understand the teams perspective and understand technical feasibilities. I also incorporated support options and error codes for efficient troubleshooting. The goal was to make error handling as intuitive as possible, helping users resolve issues with minimal effort.

App and Page Level Errors

For app level errors they no longer show empty screen but information on what needs to be done, what caused the error. In order not to leave them confused.

Component Level Errors

Component level erros now show error cards or notification with clear message on what occurred and how they can get back to what they were doing,

Action Level Errors

Action level errors happen when a user is about to take an action i.e click on an export button then what feedback get when it doesn't work. For the action level errors we considered toast notifications to indicate this errors

Testing

I conducted another user testing before handing it over for hand-off to understand if we have solved the problem(s), if there are new areas to consider etc

Hand-Off and Updating Design system

For Hand-off and Updating the design system I utilised Token studio, gitlab and Figma. I made annotations to help reduce development time and documentation to explain design decisions, experiments and resources.

Takeaway

• Iterative Process: Exploring multiple design variations and collaborating with the team led to the creation of optimal solutions.

• Collaborative Effort: Close collaboration with the team ensured that the final designs were aligned with both technical feasibility and user experience goals.

• Clear Communication: Emphasising clarity in error messages and instructions played a key role in reducing confusion and improving user confidence.

Impact and Results

• Reduced user frustration: Clear error messages and actionable feedback led to a 25% reduction in user complaints.

• Improved task completion: Enhanced feedback states resulted in a 20% faster task completion rate.

• Efficient support interactions: Actionable feedback reduced support inquiries by 30%, improving overall support team efficiency.