D90B7E3D-CEFF-4350-89A7-46D968352B18.jpg
 

WorkForce Website

Scheduling Website for Restaurants

WorkForce is a restaurant-scheduling website. It has a simple system for scheduling its personnel. This website also has a feature that allows you to notify everyone in your team when a new schedule is released. WorkForce makes scheduling simple, straightforward, and stress-free.


Project duration:

March 2022 to April 2022

free-schedule-maker.png
 

The Problem:

The available online service has an extremely stressful and complex framework for creating personnel schedules. The majority of people who need to use this for better management are left out.

The Goal:

Create a user-friendly WorkForce website by providing easy navigation and a quick scheduling process with a stress-free user flow.

My Role

UX designer leading the WorkForce website design

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototypes, usability testing, accessibility considerations, iterating on designs, and responsive design.

 

Understanding the user

 

User research: Summary

To better understand the target user and their needs, I conducted user interviews, which I subsequently turned into empathy maps. I noticed that many target users regard scheduling as having high difficulty, indicating that they dislike making it; nevertheless, some of them did express the belief that there must be an easier way to do it. Many Scheduling websites, on the other hand, are intimidating and difficult to browse, which frustrates many target customers. This made an otherwise simple experience difficult for them, negating the objective of sticking to a timetable.

 

User research: Pain Points

Experience

Websites for online scheduling do not provide an enjoyable surfing experience.

Screenshot (6).png

Interaction

Small buttons on scheduling websites make item selection difficult, leading to errors and abandonment.

IxD-blog-header112.jpeg

Navigation

Scheduling websites have a lot more options for providing more services, but this makes navigation more difficult for users.

website-navigation-1024x51212.jpg
 

Persona: Ken Withall

Ken is a manager at Sandwich Shop in Hamilton. He believes that new technology should make work easy. He wants to make all his employees happy and flexible with their schedules.

Screenshot (17).png
 

User Journey Map

Mapping Ken’s user journey revealed how helpful it would be for users to have access to a dedicated WorkForce Scheduling website.

Picture1.png
 

Starting The Design

 

Sitemap

Users' frustration with website navigation was a major source of frustration, therefore I used that information to construct a sitemap.



My goal was to develop strategic information architecture decisions that would improve the overall navigation of the website. The framework I chose was created with the goal of making things simple and straightforward.

Picture2.png
 

Paper wireframes

After that, I drew paper wireframes for each screen in my app, bearing in mind the user's navigation, browsing, and checkout flow pain points.



The home screen paper wireframe modifications to the right are centred on improving the user's browsing experience.

 

Paper wireframe screen size variation

Because WorkForce's customers use a variety of devices to access the site, I began working on designs for additional screen sizes to ensure the site was fully responsive.

Picture3.jpg
 

Digital wireframes

It was simple to see how the redesign could assist solve user pain points and improve the user experience by switching from paper to digital wireframes.


An essential factor of my plan was to prioritize relevant button positions and visual dashboards on the home page.

Screenshot (9).png
 

Digital wireframe
screen size variation(s)

Picture4.png

Desktop Version

Mobile Version

Screenshot (15).png
 

Low-fidelity prototype

I integrated all of the panels involved in the major user flow of adding and scheduling an employee, as well as the Publishing schedule, to produce a low-fidelity prototype.


Members of my team had given me input on my designs at this point. I made it a point to pay attention to what they had to say, and I put a few of their suggestions into action in locations where they were needed.

Picture5.png
 

Usability study: Parameters

Study type:

Unmoderated usability study

Location:

Hamilton, ON Canada

Participants:

5 participants

Length:

15-20 minutes

 

Usability study: Findings

Finding

Users Can not find

The total number of employees they have.

Finding

Inserting back

Buttons at

Signing Up Pages.

Finding

Changing some Texts

With Icons to

Make it more clear.

 

Refining the Design

 

Mockups

I made improvements to the personnel scheduling based on the findings of the usability study. I added a name button that displays the total number of employees a user has in the system. This changes after you join someone.

Picture6.png

Before Usability Study

After Usability Study

Picture8.png
 

Mockups

Based on the insights from the usability study, I made changes to improve the site’s Navigation. I changed Some text buttons to Icons, I changed “copy” and “print” with new icons.

Picture6.png

Before Usability Study

After Usability Study

Picture8.png
 

Mockups: Original screen size

 
Main Page
Main Page

User find out all the information about the website.

press to zoom
Add Employee
Add Employee

User Add employee at this stage.

press to zoom
User finishes the journey and logs out.
User finishes the journey and logs out.

press to zoom
Main Page
Main Page

User find out all the information about the website.

press to zoom
 

Mockups: Screen size variations

Based on my prior wireframes, I included considerations for other screen sizes in my mockups. I believed it was critical to optimize the surfing experience for a variety of device sizes, such as mobile and tablet, to ensure that consumers had the best possible experience.

Picture10.png
Picture17.png
 

High-Fidelity Prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and it featured design improvements made following the usability study, as well as a few suggestions.

View the WorkForce

High_Fidelity_Prototype

Picture18.png
 

Accessibility Considerations

I used landmarks to assist users who use assistive technologies in navigating the site.

I built the site with alt text on every page for easy screen reader navigation.

For a clear visual hierarchy, I used headings with various-sized text.

 

Going Forward

 

Takeaways

Impact:

Our target users said the design was easy to browse, that the visuals were more engaging, and that there was a clear visual hierarchy.

What I Learned:

I discovered that even minor design changes can have a significant influence on user experience. The most significant takeaway for me is to always keep the user's real demands in mind when developing design concepts and solutions.

 

Next Steps

Identify any more areas of need and come up with new features to address them.

Perform more user testing on the high fidelity website.

 
time-management-how-to-create-a-schedule-header_2x.png

Let’s Connect!

Thank you for reviewing my work on the WorkForce Website.


if you’d like to see more or would like to get in touch, my contact information is provided below: