What is Sponsor action centre

Sponsor action centre is a new additional part to the Upload demographic file tool designed and developed previously. It helps companies's HR representatives to identify the status of uploaded demographic files through the Upload demographic file functionality. It's also a place where the user can download error reports generated demographic files that uploaded to our backend system.

My role

My responsibilities for this project included researching, collaborating, journey mapping, prototyping, designing, usability testing, and iterating feedbacks. I needed to look through the user experience of "Upload demographic file" flow to make the action centre to be inuitive for the user to see their file's status and apply their fixes if neccessary. I worked with Product Owner, UX writer and UX researchers by gathering the business needs of the tool, researching for any competitive analysis with similar tools out there, and creating low fidelity mockups to show stakeholders for approval and feedback. The feedbacks from stakeholders were listened and implemented into the design if it provides a better experience to the end user. High fidelity designs were created by collaborating with UX writer with their content and delivered the specifications to developers to start development.

Purpose

The reason to create Sponosor action centre was to:

  • Make this page to be a central hub to manage members demographic information
  • Allow user to view the status and error reports of uploaded demographic files
  • Allow to view historic files and downloaded error reports for the past 2 years

Sponsor action centre journey mapping image

Journey mapping

Where do I start?

Before I began to design this new page, I first needed to understand the user experience of the Upload Demographic File flow and how this new page would incorporate into the experience. I first needed to understand the business needs of the page with the Product Owner. I started journey mapping the whole experience from the entry point to the end of the flow (including the Upload Demographic File flow). It gave a sense of different entry point to this Sponsor Action Centre page and how it linked to the other tool. I designed the low fidelity design with all the information that I gathered. This was then shown to stakeholders in design review for feedback.

Low fidelity design for Sponsor Action Centre

Wireframes / Design

As I began to create wireframe, I conducted a lean UX canvas with the whole agile squad to get a consensus the problem we needed to solve and discussed the ideas to resolve the problems. With the information gathered, I reviewed the user experience and flow of Uploade Demographic file tool since this new page would be used as a dashboard to view the status and error reports of the files the user uploaded. I created wireframes using Sketch with the collaboration with UX writer and provided me draft content for these pages as well as email templates that sent out when errors were detected on the file. I used current DSM (Design System Management) components, business needs and draft content to create a low fidelity design and place each component to where I wanted to go.

During design phase, I kept in mind to design the experience to be inuitive and accessible to meet A and AA levels of compliance under the AODA (Accessbility for Ontarians with Disabilities Act). The new action centre page needed to incorporate to make it easy for user to view the files they uploaded.

High fidelity design for Sponsor Action Centre

Tool Launch

Sponsor action centre went live in mid 2021 along with Upload Demographic File tool . It was successfully implemented during the transition period from a waterfall project to an agile development. This was piloted with over 40 clients during our initial launch which exceed our expectation of 10 pilot clients.