Tamara Web App

TIMELINE 
Jan 2023— Feb 2024

PLATFORM

Website

MY ROLE

Sole Product Designer

Problem Statement

Between 2023 and 2024, Tamara underwent a rebrand. I was in charge of rebranding the Tamara Web App. The initial goal of the project was to simply reskin the design; however, as we built the new rebrand, we discovered a few usability issues that I aimed to resolve within the redesign of the Web App.

  • Revamp the web app to align with Tamara's new branding for a cohesive user experience across Tamara platforms.

  • Reduce steps to allow users to easily repay their instalments

  • Create a local design system to ensure scalability within the web app.

Goal

Research Phase

During the initial phase of the project, I conducted a comprehensive analysis of all user flows within Tamara's web app. One of the most critical flows identified was the repayment process, where users access the web app to pay an installment.

The analysis revealed two major usability issues:

  1. Users lacked an option to pay multiple installments within a single order.

  2. The repayment process required excessive taps, making it cumbersome.

Given the significance of this flow in the revamp, I evaluated the number of taps required for navigation across different scenarios to identify optimization opportunities.

To refine our redesign, I conducted a competitive evaluation to compare Tamara's repayment flow with industry standards. This helped identify strengths, weaknesses, and best practices from competitors, providing key insights to enhance usability and streamline the repayment experience.

Competitor Analysis

Wireframes

After identifying ways to streamline the repayment process by removing unnecessary pop-ups and repeated login requests, I initiated the wireframing stage. I iterated on multiple design versions to refine the new flow while also ensuring the web app aligned with Tamara’s rebrand.

After refining the wireframes to mid-fidelity, the process of iterating, negotiating with stakeholders, and aligning began, which was both exciting and interesting. The key learning in this phase was constantly finding ways to align business needs while also resolving all user pain points.

Stakeholder alignment

High- Fidelity Designs

After resolving the main concerns with the mid-fidelity designs, I transitioned to creating high-fidelity designs. During this process, I focused on addressing multiple design edge cases, including mobile versions and providing screens in both English and Arabic.

Building Local Components

I designed this local component set to ensure scalability and consistency across both desktop and mobile experiences. By establishing a flexible and reusable system, the components adapt seamlessly to different screen sizes, maintaining a cohesive visual hierarchy and improving the overall UX.

Mobile/Responsive Design

Edge cases

As part of the developer handoff process, I meticulously designed and documented all potential edge cases within this flow to ensure a seamless user experience. This includes handling payment failures, order processing errors, and variations in content display across different scenarios. Additionally, I designed responsive layouts optimized for large desktop screens and mobile devices, maintaining usability and consistency across all touchpoints.

Key Learnings

  • Some friction is necessary to prevent human errors, such as accidentally tapping the pay button.

  • Redesigning the entire web app was an extensive process that involved multiple stakeholder alignments across various verticals. Constant alignment with stakeholders was crucial for completing this project.