Experience Design

I conducted an interview with the primary stakeholder to gather project requirements. While the initial discussion wasn’t formally documented, I noted key takeaways, which I later refined into structured requirements. This allowed me to better communicate the insights gained.

User Stories Map

I transformed these notes into user stories using a product story map, and categorized the requirements into phases and breaking them down into actionable steps. This process allowed us to identify and explore the features, challenges, and opportunities associated with each phase.

I then met with the CTO to validate the mapped stories and ensure they aligned with the technical roadmap. This established the story map as our single source of truth, which I continuously referred to and evolved throughout the project as the design progressed.

A product story map was created to outline the client's initial requirements and was further developed to align with the development user stories.

Information Architecture and Content

The CTO reviewed and refined the stories to align with the development user stories. After receiving approval, I began designing the app's architecture by creating the sitemap and converting each activity into a user flow.

I revisited this process twice during different project phases—once to write microcopy and again to localize the app by translating content from English to Arabic. This was essential as English is widely used in Egypt as a secondary language, but Arabic resonates more with the local audience.

Sitemap

A sitemap was developed to outline the application's information architecture to ensure clear structure and navigation.

Userflow

User flows were created based on each activity, step, and the detailed elements of the user story map.

Ideation and Design

El-Dokan already had some components prepared, but I was tasked with redesigning them based on feedback from their clients' users. Although we solved many issues in a previous project for an app called 'Trolley App,' this case study focuses on designs customized for Animals Egypt.

The core challenge was creating a style concept that aligned with Animals Egypt branding while incorporating new functionalities, including:

• Vaccination System

• Vaccination Reminders

• Pet profiles

To address these challenges, I began by developing wireframes, which I delivered within one working day.

Stakeholder feedback revealed several challenges, leading me to create additional concepts and analyze competitors for insights. I presented sketches, low-fidelity prototypes, and animations, which were key in communicating the design effectively. The team was impressed with the animations, as it was a new capability introduced during the project.

HMW: Delightful Pet Profile Creation

The User Story
As a pet owner, I want to create profiles for each of my pets so that I can receive accurate reminders for their vaccination dates.

The Challenge
The initial experience of adding new pets felt disconnected from the overall design concept. We needed to transform this experience into a more delightful and interactive journey.

The Solution
After sketching the concept, I decided not to present just the wireframe, as it wouldn't fully convey the interactive idea. Instead, I designed a high-fidelity version and created an animation to bring the design to life. The animation strongly left a good impression on the stakeholders, and the design was approved.

Wireframe designed as a first draft to gather stakeholder feedback, and enhanced sketches were created for the case study to communicate the concept.

An interactive pet profile creation animation that demonstrates the interaction while users fill out the form, effectively communicating the playful tone.

HMW: Pet Profiles Switcher

The User Story
As a pet owner, I want to easily switch between my pets' profiles when shopping, so I can receive tailored food recommendations based on each pet's species.

The Solution Development
Initially, we proposed a solution allowing users to switch pet profiles during onboarding, but this prolonged the process, risking user disengagement. After two iterations, we decided to create default pet profiles for general access, while specific profiles would be triggered by the vaccination system.

The challenge initiated with an HMW statement to align team focus on the challenge, and concepts were explored to identify the optimal solution.

Two key concepts were incorporated: switching between pets directly from the homepage, and a fixed navigation element that remains accessible throughout the app.

HMW: Setup Vaccination System

The User Story
As a pet owner, I want to ensure that each of my pets receives their vaccinations on time, so they stay healthy and protected.

The Challenge
While I asked to gain insights into the system used by Animals Egypt for booking pet vaccinations, I was unable to gather sufficient data. Instead, I researched best practices from similar apps to propose a vaccination system.

The Solution
I designed a vaccination system with a focus on four key features:

• Vaccination History: Track the pet's vaccination records.

• Vaccination Setup: Allow users to select the types of vaccinations for their pets.

• Last Vaccination Date: Users specify the date of the last vaccination.

• Vaccination Reminder: Implement reminders for upcoming vaccinations.

A design for tracking pet vaccinations, clearly displaying the last vaccination date and upcoming reminders.

HMW: Enjoyable Reminders

The User Story
As a pet owner, I want to receive reminders for my pets' next vaccination or when it’s time to order food.

The Challenge
Initially, the reminders focused on vaccinations, but the business expanded them to include discounts, tips, and nearby clinics. I aimed to present these reminders in an engaging and emotional way to enhance user interaction.

The Solution
I sketched multiple ideas, and the one that resonated most with the team was the use of dialog boxes beneath the pet profile switcher, which communicated the pet’s "emotions" through emojis:

• If you buy new food for the pet, a dialog with a 😍 emoji will appear to express gratitude.

• If you forget to buy new food the pet for a while, a dialog with a 🦴 emoji will be displayed, indicating that the pet is hungry.

Sketches and wireframes presenting different dialog options.

An animation showcasing all dialog interactions, each paired with a relevant CTA.

All the included dialogs.

HMW: Loyalty Card Animation

The User Story
As a pet owner, I want to receive personalized rewards based on my pet’s type and frequent purchases, so I can get relevant discounts and offers.

The Challenge
The loyalty card design needed to accommodate two distinct membership levels while updating dynamically based on the user’s progress.

The card displayed that content:

• Current State

• Total number of points

• Expiration date of points

• Number of days remaining until reverting to normal status

• Remaining amount to spend to get gold status

• Progress toward next membership level

The Solution

A dynamic loyalty card design, showing two states while maintaining content location.

Loyalty screens designed and branded for the Animals Egypt app.

Design System

The goal of the design system was to create reusable components and a style guide that could be easily customized without a complete rebuild, ensuring design consistency across projects. After completing the final design, we standardized the components using an Atomic approach, which streamlined the process for future design iterations.

Style Guide

Components

UX Writing and Localization

One of my key responsibilities was creating technical content for the application.

My Process:

1. Write English content:
   Established a consistent tone of voice aligned with the app’s objectives and audience.

2. Content Inventory:
   Gathered all existing content into a single document for critical review and revision.

3. Write Arabic content:
   Ensured the Arabic version maintained the intended tone and resonated with local users.

4. Post the Arabic content as comments on Zeplin:
   To make it easier for developers to access bilingual content.

Content inventory showing the original English text and its Arabic translation, used for seamless bilingual development.

Applications

New Order Journey