iServe SaaS App— UI/UX redesign case study

Hi, before I'm going to breakdown this design case study. Let me introduce you a little bit about this app. Here we go… 🚀

What is iServe SaaS? 👀

iServe SaaS in the beginning is a resource management app used by employees to manage attendance, work location and time recording. Here is the benefits which is offered by this app:

• Minimize the process of inputting absence manually.
• Prevent data manipulation.
• Easy monitoring process faster and accurate.
• Easy to maintain work schedule and also approval attendance.

There is more services in iServe SaaS such as you can propose leave and also medical reimbursement. But in this chapter, I'm gonna show you the design case study for attendance service only. Mmm maybe if I’m not too lazy to write again, I will show the other chapter next time.

Why Redesign? 🤔

Since when our team decided that we have to make improvements from existing app before going to version 2 with additional new features.

Reason and goals for redesign:

• To deliver a great experience for users.
• Make a user-friendly interface.
• Help users to make decisions quickly.
• (This is for my personal goals). To enhancing my skills both in UI & UX design side.

And, here is a few points below where I started redesign process..

Ideation — Affinity Mapping 💡

This is how our team starts from design thinking process. Find new insights and pain points. This help us to brainstorm, get potential ideas and clearer view of what was important to user’s perspective and needs also the business goals and objectives.

Photo by Leon on Unsplash

Paper Sketches ✏️

Before going to hi-res design screens, I sketched out all the low-res screen which the solution by design has been founded. The most important things doing sketch and wireframing first, I can focus on UX side and the business-flow app.

Photo by Amélie Mourichon on Unsplash

Final Prototype 📑

Here is the final stage of design.. When all of your shitty things done ✅

After these explanation, let me bring you to the root..

1. Logo redesign

2. Interface Analysis — Old Screen Problems

A) Button position

When my role and perspective as user for the first time using this app, my first goal is can do attendance clock-in time so quickly and without make the users think or find where is the magic button.

Problem: button position little out of eye reach, meaning it's like a little far from eyes like not too equal, it make the users need to think or even find the button.

Solution: make the button more equal on eyes using Human-Computer Interaction (HCI) approach and other similar usability heuristic design principles.

• Based on HCI principles, the human vision is a highly complex activity with a range of psychical and perceptual limitations, yet it is the primary source of information where received. Which means, human will do something after what they see from clearly visual interface, what tasks they will do after see the button which has been clearly designed..
• Other usability heuristic design principles says: Visibility of System Status, the design should always keep users informed about what's going on, the design should tell you that the button will drive you to make a decision quickly to do attendance without wasting time.

B) Remove the Hamburger Menu

When my product owner said, “the hamburger menu is no longer a trend right now, you should remove it to implement on version 2”.. Ok, got it.

Here is the problems using hamburger menu:

• Lack of visibility; meaning that hamburger menu was hide our service/menu. The menu was not on the screen. Obviously, users not directly can explore more services in one single screen, also that’s not intuitive design approach.
• Less of efficiency; slow interaction, it takes time for users to navigate around your apps actually. You might need to read this, Spotify has found that by removing the hamburger menu on their apps, it actually increased their navigation clicks by 30%. So, if users can directly take one action and then automatically see more services in one single screen, why should take two action? Does it more effortless for users? 😄

C) User profile info should not be explained in Home Screen.

Aside from putting user info in home screen actually take spaces, I make it more simply and also, user info is a “confidential thing”, I put that “confidential thing” in other separated page screen.

In conclusion, good design is for good human too. Thank you!