Shekab app redesign — UI/UX case study
A redesign case study of a ride-hailing app
Brief: Personally, we’re not affiliated with Shekab at any level. For our own learning experience, we wanted to explore our design skills and learn to know the improvement in key areas to increase the user experience of this app.
What is Shekab?
Shekab is Pakistan’s first ever subscription based monthly carpool service for working women.They connect their registered riders to their pool of trusted drivers who provide shared-monthly transportation services to women. The aim is to provide women with a better transportation solution which is safe, affordable and reliable.
Why we redesign Shekab
Despite being familiar with complex interface and features of this app we remain a regular customer of this niche market i.e, targeting professional women to avail ride hailing service on monthly basis. It makes us wonder how to make this app friendly and increase its usability.
Along with each other expertise as one excels in User interface designs (Sidra) and the other (Saba) is more into UX writing. We dive in together and decided to design an easier experience in any way we could. So many like us can use this app for their daily commute without any stress to book a cab online everyday.
Roles and Responsibilities
Our Role:
Sidra Qureshi: Mid-level UX/UI designer
Saba Qureshi: Junior UX writer & UI designer
Research Tools: Zoom
Design Tools: Figma, Photoshop
Platform: Mobile App
Timeline: 8 weeks
Goals for the redesign
- To lead users to complete the journey from in-app booking to in-app payment seamlessly.
- To increase potential users of Shekab through engaging and intuitive user interface.
Design Process
The process followed for this re-design includes multiple steps. The process is shown below:
User Research
Understanding the existing users
We followed a qualitative research approach by conducting a one-on-one survey with around 3–5 existing users of Shekab and noted down the clear usability issues and pain points:
Key insights from users:
- Booking process is confusing and manual.
- The payment method is unofficial and insecure.
- No built-in safety features for riders (GPS Tracking, Share routes to friends and family, Driver Rating and Reviews)
- Users don’t have the authority to select drivers.
- The User Interface was quite complex and daunting.
- Key features are not easily accessible
- No record of Past rides and Payments
- No refund policy, if the user wants to cancel the subscription before timeline.
Heuristics Evaluation & Paint Points Analysis
As we are going to redesign this project, we did heuristic evaluation of each screen and covered the main pain points which existing users struggle everyday while using the app:
Registration Screen
Login Screen is mainly unappealing due to certain reasons, such as:
- Lower colour contrast of background frustrates users to recognize and read the content above it.
- The height of Input fields containers are too congested which makes it difficult for users to tap on field, as they require more accuracy to tap.
- No checkbox for “remember me” and the hidden eye icon for password field.
- Input text field presents no state of field such as default, focused, error or disabled while entering information.
- Users are unsure to click ghost buttons (reset here, sign up) as they are hard to see due to their contrast with the background image is poor and have no underline beneath them.
- Users struggle to recognize multiple sign-in options due to the same colour combination with background.
Home Screen
The UI of the landing page is not self explanatory in terms of visual presentation of content that restrain users level of trust as:
- Users get confused with limited to no information as they land for the first time.
- The home screen has tabs of past and and scheduled rides upfront for no reasons
Booking Screen
- There are non-essential fields to fill in booking process form with unclear labels that turns down conversion rate of users
- The reason for selecting days doesn’t explain monthly booking clearly
- Users find difficulty to chase to pick a date while using a calendar as it changes up and down while interacting.
- The form layout looks quite cluttered because of no grouping of similar information in sections.
- Card layouts for selecting driver is too cluttered due to improper spacing
- There is no visual map on booking screen
Payment Screen
There is no in-app payment procedure
- Users will be given account details on call/message to transfer cash before a ride.
- There is no record of past payments and rides that users can see.
Feedback/Rating Screen
One of the core issue of Shekab UI is lack of feedback feature
- A user can’t report a problem through an app during a trip
- There is no rating pop up occur after the end of ride
Competitor Research
We did research on competitor market that includes (Careem, Uber, Indriver) and came up to conclusions what issues the potential users facing in these apps and why they want to switch from there to Shekab which includes:
- Surge of peak hours
- No Monthly or weekly subscription
- Costly
- Driver changes everyday
The design challenge:
How might we design a minimalist interface to its core functions to increase the user experience.
We aim to design an app in a way that solely takes pre booking orders and pre-paid transactions with a few taps. Unlike other ride hailing competitors in the market, Shekab caters the solution as an alternative to the one-time transportation that reduces the burden of daily booking, guiding route to everyday driver or keeping cash in hand all time.
Personas:
After carefully researching through our existing and potential users and crafted user persona to see what is our users goals/needs, frustration and limits and found their personality traits which led us to further ideas to design user flows according to the audience who will use this app.
Brainstorming
HMW’s
How might we make the user feel more secure
How might we make the flow easy
How might we help the user if they have any trouble
How might we make the app less clutter
How might we make the user interface more minimalist and smooth
How might we make user experience friendly
How might we give user a freedom of choice to select a driver
How might we design, that user can review their past rides
How might we keep our users to stick with our app (coupon, discounts, rewards)
Task Flows
We created the basic task flow for the redesign using all the insights and pain points that are listed above. The current flow of Home Screen is created by using Figjam shows the MVP process of an app.
Paper Sketch:
We did initial thoughts on the paper so that we can get an idea. We sketched out all the possible layouts and finally came out with the one that worked the best.
The Solution — High fidelity Wireframes
Coming to the final picture of redesign, that focuses on achieving minimalist design with consistency and flexibility throughout the process. The new UI design symbolizes that users have more control and freedom to perform goal-oriented tasks.
On boarding & Login Process
We apply a first-look tour UX technique in on boarding journey, where a series of screens lead first-time users to experience value in an app.
Always keeping in mind the user’s time value, we design layout for the login screen with minimalist effort.
So, instead of long signup form, we provide alternatives of social media login i.e. Facebook or Google and for more quick registration users can enter their phone number to login too because they are easier to remember than email address or password.
Moreover, to speed up the confirmation process i.e confirmation email for security reasons we design an auto-code screen to confirm user phone number.
Home — Booking a Cab
We use card layout for the booking process in steps by applying Hick’s law approach.
Instead of bombarding all information to be filled in a single-page form, we present the specific part (monthly or weekly, single or round trip, pick up or drop-off, economy or business) of the booking process at one time on each screen.
By keeping the choices minimum it helps users to make a decision quickly. Thereby, users won’t get paralyzed from so much information to give up or get confused to accomplish their end goal.
We give control in users’ hands to select a driver by the number of options available to them.
Addition of a map feature helps users to navigate easily how far the driver is from your destination.
We converted the date-picker dialog calendar view into spinner mode, which requires the user to just scroll and pick a date and time with minimal effort and time. The clear format of time and date makes it easy for users to avoid unnecessary taps.
Added hamburger menu button for secondary tasks such as, record of past rides, payment and receipts, settings or rewards. These certain tasks are important too, but they don’t need to take up all that space on the main screen. For that, the hamburger menu is the best place for them.
Payment — Payment and Refund Process
One of the most complex and crucial screens that require the perfect and seamless experience. We aim to build a layout of it’s UI that makes an impression of the payment method to be reliable and trustworthy. To do that:
We use the Millers law (principle of chunking) to organize relevant information in sections that makes customers feel easy to understand and perform specific goals.
As our payment transaction is wholly cashless, we design the layout of the card details section with only important minimalist information. So the user can feel secure and safe to handover her card details on the app.
The details of completed payment can always be checked out by the user through the your payment category. That displays important info such as booking details, driver details and total amount paid by the user on the screen at all times.
To increase the trust of customers we design a money-back guarantee (refund payment) screen to convince customers to book a cab at a later date and become a loyal customer.
Help — Feedback and Rating
Customer feedback is essential to create service delightful and easy to use for all customers. Thus, with design aspects we create visuals that give a sense of customer empowerment.
A dialog box of rating scale opens automatically as the ride ends, to give a rating to the driver.
If the rating goes below 3 stars, the chat box opens up for feedback. It gives sense to customer priorities and helps them feel heard.
To contact a driver, the customer can not only call or leave a text now, they can use a voice recorder too to save their time.
We design help section that helps users to feel secure more by enhancing help section with two basic features:
- We added an upload photo feature. Photos help in authenticity and credibility for customer security and safety promptly.
- An option for Voice recorder is available too. It can be quicker to use than sending a written complaint.
Usability Testing
After all visual design was completed we did a complete prototype and conducted a Zoom video call with 4 participants who were not familiar with the Shekab app but already used other alternative ride-hailing apps.
We conducted A/B tests between the different prototypes. The testing went well and shows re-design is more intuitive for users and what works best for users. Usability test of the prototype points out significant reduction of time over each core task to perform and an overall increase in user success rates.
Conclusion
To Be honest , we were a little nervous at first as we were tackling all core features of the Shekab app but we also knew that it was the perfect opportunity to sharpen our research and design skills.
At every stage of the design process of Shekab, it taught us about an empathetic and inclusive design approach. We learned that when we use design for users we’ve to consider every tiny detail not just aesthetically but in terms of functionality too.
Please do visit Behance for the visual presentation and if you think the concept is worth it then do clap, comment, and share.
And that’s a wrap. Thank you for reading!
