THE PROBLEM
Krib Nigeria reached out to me concerning their service app which was incomplete. They asked if I could continue from where the previous designer stopped. After going through the existing designs, I advised them to do a revamp while pointing out the flaws that would hinder me from continuing with the existing designs, to which they agreed.
PREVIOUS DESIGNS
Previous Homescreen design
.png)
Previous Service Request screen design
After going through the briefings and previous designs, I made some notes on the issues that the previous designs were faced with, which prevents proper navigation around the app, even for me as a designer.
First off, I noticed the home page didn't give users a clear view of how to navigate between service requests made, their profiles, and messages. Instead, they are presented with an accordion of requests they created previously, or having empty accordion screen may not have created.
The existing issue with the previous "Home screen"
Issue #1
Users are presented with three accordions showing the status of their request, while this is great for informing existing users, new users will experience difficulties creating requests for the first time as there's no clear indication to create one.
Also for an existing user with quite a number of requests, it'll just give an endless list of data that will end up being confusing and cause clutter.
Issue #2
The icon to create a new request is rather small and almost invisible to the eyes with no indication of what it does. Users may enter a dilemma of whether it would take them to a "create request screen" or maybe a "send new message" since it's close to the message icon
Issue #3
Open and closed tabs further add to the confusion, new users are unfamiliar with these terms on the app and don't know how requests are grouped.
Issue #4
Hamburger navigation is good for organizing links to various sections of the app, but then, I envisaged the app is not a bulky one, hence no need to conceal the "few" links it has. There is always a better way of presenting it!
FURTHER MORE
There were inconsistencies with the iconography used, colours, alignment issues, same buttons on different screens had irregularities in padding and margin. I looked through components to check if I could see a spacing pattern to maintain throughout the app, but unfortunately, there was none, they were all irregular
THE SOLUTION
So I have mentioned some problems of the previous app, and now what was my approach to solving this problem.
I started out plotting the user flow of the app, I was able to deduce this from the briefing I got during the project onboarding and also looking through the existing designs. After that, I proceeded to make wireframes to make the app more concise.
A lot was adjusted and a lot was added since the previous design was barely 25% done. For example, the home screen is the first place a user sees after successful signup. I made sure to make it as clean as possible by grouping the links into four distinct buttons (Requests, Messages, Profile, Settings) that not only show a clear title but also give a description of what users can do at the different entry points.
While conducting usability testing, I observed that although the floating “Create request” button was big enough, it was still ignored. Users testing kept asking questions like “How do I create a new request” or they sometimes clicked the Request button that shows requests already created. So I resorted to making iterations.
One where I put the description “New Request” on the floating button. And another where I utilised the fact that users kept clicking the request button that shows existing requests to my advantage
Home screen #1
Home screen #2
Home screen #3
Initial home screen design I did and noticed users kept asking where to create a new request
Here, I added a description to the the floating button to make things clearer
Lastly, here I utilized the fact that users naturally pressed the request button that views their existing requests to my advantage. So it gives users the option of creating or viewing an already existing request
Final Result
The existing issue with the previous "New Request screen"
.png)
Issue #1
The fields users must fill were long and cramped and do not make things simple for users.
Users with smaller screen sizes would need to scroll continuously when reviewing all they've filled.
Issue #2
The input fields had irregular alignments and spacing.
Issue #3
The buttons are too small, especially for smaller screens
THE SOLUTION
The form was split into several sections, in a case like this, it is advisable to simplify things. Also while splitting, users should know how many steps it takes them to fill up the form, this was taken into consideration.
Also, a big single button with full width is needed to take users to the next step.
Final Result
All colours used in this project were adapted from the company's logo and its existing products
I held several meetings with Krib Nigeria, during the design process where we looked at other aspects (like chatting with an agent, accepting an order sent by the admin, viewing statuses of the request and also in-app payment) to make it easy for users booking a service request for their apartment.
