Overview

ABC Food Handler is a reliable platform that provides professional training courses and certification for food handlers, food managers, and alcohol servers in different states of the US, adhering to their respective regulations. The courses offered by ABC Food Handler are designed to equip individuals with the necessary knowledge and skills required to practice safe and responsible methods in the food and beverage industry.

Role

Product Designer

Tools

Figma, Canva, Photoshop

Year

2021

Challenge

The challenge lies in successfully integrating a dedicated group accounts page on the website. This group accounts page incorporates essential features such as bulk orders, admin dashboard and students etc. The complexity of this task involves ensuring a smooth and cohesive user experience, where group administrators can be able to efficiently manage bulk orders and navigate through the various administrative functions within the group accounts framework. The integration process demands careful consideration of both technical aspects and user interface design to deliver a functional and user-friendly solution that meets the specific needs of group account users.

Solution

In multiple design iterations, we have carefully crafted a user-friendly interface for the group accounts page. Our goal was to create a seamless and intuitive experience for users, ensuring that they can easily navigate through each step of the process without confusion.

Research

Stake holder Interviews

During my research, I have conducted interviews with various stakeholders and decision-makers to gain deeper understanding of their vision, goals, and expectations for the group accounts page. The main objectives of these interviews include

1.Understand the needs and expectations of group administrators who use the group accounts page.

2.Gather insights to enhance the user experience, focusing on user-friendliness and efficiency.

User personas

After conducting user research and understanding the expectations and goals of group accounts page we developed user personas representing different group administrator roles with varying levels of experience in handling group accounts page. These personas provide a foundation for understanding the diverse needs, goals, and challenges of group administrators who will interact with the group accounts page, ensuring a more user-centered approach.

Name: Sarah Taylor

Age: 32 Years

Role: Group admin

Experience: 4 Years

Background:

• Sarah is a proactive group admin with seven years of experience at ABC Food Handlers.

• Manages a large team of students and oversees training sessions for diverse groups of students.

• Comfortable with technology and actively seeks ways to enhance the efficiency of administrative tasks.

Needs:

• Streamline the bulk order process for efficiency.

• Quick access to real-time data on training sessions through the admin dashboard.

• Desire for a user-friendly interface to enhance overall productivity.

Challenges:

• Coordinating enrollments and student activities across diverse teams.

• Ensuring accuracy in data entry during the enrollment process.

• Finding specific information quickly within the admin dashboard.

Persona 1:

Name: Alex Jones

Age: 24 Years

Occupation: Group admin

Experience: 1 Month

Background:

• Alex is a new group admin with limited experience in using online admin tools.

• Eager to learn and adapt to the responsibilities of the group administrator role

• Has basic computer skills.

Needs:

• Simple and straightforward enrollment process for training sessions.

• Receive clear guidance on how to use the admin dashboard for monitoring student progress.

• Access to training resources to enhance understanding of administrative tasks.

Challenges:

• Familiarizing himself with the admin dashboard for effective monitoring.

• Understanding all the ins and outs of being a group administrator.

• Limited familiarity with online tools and features.

Persona 2:

Understanding User Journeys

As well as designing a functioning group accounts page, it was important to look at exactly how users could discover these. Myself and the team mapped out all the possible routes for a page, and highlighted opportunity areas we could then work on later down the line to create a seamless end-to-end user journey.

Low-Fi

Designing Group Accounts Page

With the user needs discovered and journeys mapped, I then moved on to how sections were going to be structured harmoniously, as well as how users could get a clear guidance on how to navigate and utilize the designed page effectively.

After conducting a competitive analysis in our industry, it appears that none of our competitors offer an identical feature. However, we have come up with an innovative idea to enhance our page. We proposed including a demonstrative video that illustrates the functionalities of a group admin, making it easier for users to understand how it works. Additionally, we suggest adding an advantages section to motivate users to utilize this feature. By showcasing the benefits, we aim to engage users and ensure they have a positive experience on our page.

Designing Admin Dashboard

The responsibilites of the admin, as clarified from stakeholder interviews, include the ability to manage and enroll students, as well as access information about licenses. In order to ensure a user-friendly experience and avoid confusion for the admin, we have simplified the layout into three sections: course names, licenses, and actions.

Step 1: when admin selects enroll student

Step 2: when admin selects Manage student

Designing Bulk Enroll Students

While designing the bulk enrollment section, we have implemented a thoughtful approach by placing clear instructions before the actual process. This pre-process guidance is strategically designed to provide the admin with a sense of ease and comfort. By offering guidance upfront, we aim to ensure that the admin feels well-informed and confident as they proceed through the bulk enrollment process. The goal is to make it straightforward and user-friendly for the admin.

Hi-Fi

To keep a consistent look and feel, a lot of the UI such as iconography, typography, sizing and spacing remained the same as other pages, as it not only promotes familiarity among users but also facilitated efficient usage and reduces the learning curve.

Prototype

Usability testing

After completing the initial prototype, we proceeded to conduct usability testing sessions with a specific group of individuals who hold the administrator role. Our main objective was to observe their navigation through the group accounts page, their interaction with bulk orders, and their utilization of the admin dashboard. Additionally, we aimed to identify any potential usability issues or confusion that may arise during the bulk enrollment process. By collecting feedback on the overall usability and effectiveness of the interface, the results from the testing were largely positive. However, we did encounter some concerns during the sessions, which were addressed and resolved in the next iteration of our design.

Developer Hands off

The developers were provided with the final high-fidelity design, which contained all the necessary information for the development process, such as detailed specifications, visual assets, and design guidelines. We worked closely with the development team to ensure a smooth integration of the group accounts page. Throughout the development phase, we provided the necessary documentation and support to assist the team in implementing the design accurately.

Next steps and Involvement

Next Steps:

The quality assurance team will conduct tests and verify that the user interface has been implemented thoroughly, while also ensuring that all functionalities are working correctly.

Involvement:

Lead designer, myself and two other designers. Throughout the project, I worked closely with various team members, including the product manager, and both front-end and back-end software engineers.