Timey - Work schedule manager

Timey

Work schedule manager

Objectives

Constructed screens for a mobile application that assists companies and their employees with managing their schedules. Designed the interfaces for customer usability and increased visual communication.

Role & Responsibilities

I researched similar applications that are good and bad examples, made user personas that would typically use this app, created a sitemap to identify the structure of the app, designed wireframes, made all the icons, and gathered feedback that further improved the user experience.

Discovery & Ideation

The design was inspired by Steve Krug and many other UX designers to make the interface as simple as possible. I wanted to design the user interface to be easily understandable. I did not add other options or information at the same time
because it would confuse the users.

“Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better.”

-Steve Krug

Design Process

Sitemap

Created a detailed sitemap to identify order of the applications. Used different colors to differentiate pages form others. This became very useful throughout the project because it helped pinpoint where pages should be.

Wireframes

Here are some of the wireframes I have made. Making wireframes helped me
decide where things should be. I layed out the content and functionality of the
pages to quickly see what works and what doesn’t.

Personas

These provided an insight into who was my audience, what their expectations and behaviors are.

Challenges

During the prototyping process, I designed a homepage where users have tools to choose from, another problem
accurred is that I wasn’t using space in an efficient way.

I also needed a way for the users to quickly see their
upcoming schedule and other shift they can cover if they are available. Adding these two would improve productivity.

Another problem that I went through is choosing the right
color scheme, this was very crucial because it could have ruined the visual communication.

Making a clock-in/out was very challenging because it is quite a new interaction/tool I am introducing.

My main concern was making it as easy to understand as possible. I researched on how timers are being designed on mobile phones. This page displayed on the left side is not the final version. This one does not show the history of what time the person took their breaks and lunch.

Solution

After the user log in to the app, they are immediately showed what is important for the time being.

On the top, one can see the notification. One of the feedback that I received is a way to update users when schedules are updated. Bellow, it is another useful tool when the manager wants to inform you about something, he/she could make an announcement and the user can reply quickly. I included a way for users to quickly notify their managers if they are able to come or not. Also, a way for managers to ask his/her employees if they can cover a shift. All the way to the bottom, there is a tab bar. Users can quickly switch through pages. Check the homepage for new news, messenger to communicate to other workers, the timer to clock-in/out, the calendar to check what time it is, and personal account to check pay rate, statements, etc.

This version of the clock-in/out page has improved compared to the last one. Another user feedback was that they were not able to see what time they took their previous break.

One can see that timer is not a round circle anymore, but a semi-circle. I decided to go with a semi-circle because it saved more space and enables me to add more information.

Conclusion

This project was fun and exciting. I was able to challenge myself to design layouts that prioritized users. It was challenging to make the UI easy to use and interesting at the same time. User feedback allowed me to make the app more effective.

I am not done designing the app. I will further improve the interfaces using more feedback from the users and research.