This product is a scheduling site for security guards. This product is an example of Responsive Web Design, which allows it to be used both on Desktop and Mobile.

Problem

Business owner need a product that allows him to see employee work schedules on desktop and mobile.

Goal

Create a responsive web design that allows users to see schedules on both devices.

Role

Lead UX Designer

UX Researcher

Responsibilities

Research, Analyzing Data, Wireframing, Prototyping, Designing

Duration

2 months

User Research

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. The group I made the designs for are employer looking who looks through the sites.

Research helped figure pain points and other problems in the designs.

Persona: Miguel Gomez

Problem statement:

Miguel Gomez is a busy business owner who needs lookup his employee schedules on desktop and mobile because he needs to be able find the info when he is away from the office.

User Journey Map

Users had trouble seeing the list of profile but was able complete tasks and goal

The most important part is that users can navigate to proper schedule for then employee they're looking for.

Starting Design

Sketches

This is the homepage to the desktop version. I wanted the user to be able to reach the important pages that they will frequent most.

There isn't that much information needed so I must make sure the what is shown on pages is clear and understandable.

Wireframes

This a list of site profiles that will allow the user to find the schedule for each location. Includes name, address, and maximum number of guards.

The mobile homepage for the owner. Has links to both site and Guards profiles and allows the user to add new profiles.

I made sure that actions that will be most common can be done at the homepage. Looking through the lists or adding profiles to the lists

Low-Fidelity Prototype

https://xd.adobe.com/view/3d048a8c-cd67-40e4-98da-2b657396e1e4-6857/

Usability Testing

Issue 1: No navigation menu on mobile

Solution 1: Create a navigation menu for mobile

Issue 2: More info on guards needed

Solution 2: Create a profile page for guards

Issue 3: Hard to read schedule

Solution 3: Create an easier way to read schedule with colors and effects

Refined Design

Mockups

High-Fidelity Prototype

https://xd.adobe.com/view/f9b06e79-5158-4df3-827f-2f628ffe5334-ace3/

Going Forward

Next Steps

Create other pages such as one for the account information of the user. Create a design for the search functionality. Create new iteration for the schedule page because I believe I can do a better iteration

Learnings

I learned that designs for desktop to mobile are not one to one transition most of the time and that doing a lot of multiple tests are important incase something was missed in the first round of testing.

Let's Connect

Thank you for your time reviewing my work! Feel free to get into contact with me through.

Email: TheAnthonyJara@gamil.com