Presently, there is a notable absence in Egypt of a dedicated platform aimed at facilitating meaningful connections between retailers and suppliers to foster the growth of business relationships.
Recognizing this gap, Ashtrei was established with the primary objective of bridging this divide, particularly focusing on empowering small businesses by facilitating connections and supporting the expansion of their business endeavors.
At the start of the project, Ashtrei had only a basic concept of their services, with no website, brand identity, framework, or visual aesthetic.
The challenge was to create a user-centric, engaging experience that aligned with the project's goals, target demographic's accessibility level, and user expectations.
We conducted thorough research on Egypt-based competitors, user demographics, limitations on accessible education, and culturally influenced color perceptions, combining these insights with UX best practices. This led to a well-crafted web application that resonated with the target audience.
Our team developed the following pages:
We established a clear visual hierarchy, ensured design consistency with a detailed style guide, and created a comprehensive developer handoff document for smooth communication with the engineering team.
_browser.png)
_browser.png)
In our initial meeting, we held a UX discovery session to explore the client's business strategies, services, aesthetic preferences, and target demographics. While we gained a general understanding, we identified a gap in our knowledge of Egyptian cultural nuances, distinct from the Western cultures we were familiar with.
To address this, we prepared follow-up questions for the client to better understand their primary users and began independent research on Egyptian cultural and symbolic associations to guide our design decisions.
During our discovery phase, key considerations emerged:
These insights will steer our UX design process, ensuring a tailored product for the Egyptian user base.
In order to delve deeper into our client's expectations and requirements for our team, we initiated a round of follow-up inquiries. Based on this questionnaire, we were able to identify some crucial points that will help direct our design:
Our team received a collection of User Stories from the client, which were intended to serve as the cornerstone and essential components of the platform, in alignment with user-centered design principles:
After understanding the prioritized user stories, our team developed User Flows for six scenarios. The project required three distinct interfaces for administrators (clients), retailers, and suppliers. Our focus was on improving the user experience for retailers and suppliers, considering their specific needs.
I led User Flow #4, enhancing the "Order Placement" experience for Retailers. Although experienced in e-commerce, this was my first deep dive into the checkout process. To ensure a smooth user journey, I studied established e-commerce platforms before starting the design for Ashtrei.
The client envisioned Ashtrei.com with an openness to various design concepts, favoring the aesthetics of Faire.com and seeking a more subdued color palette, different from the vibrant tones typical of Egyptian eCommerce sites.
With no specific functional requirements provided, I researched a range of eCommerce, B2B, and B2C platforms, including Faire.com, Alibaba.com, and Etsy.com, to guide the design direction.
The client lacked a defined brand identity, style guide, or color palette, but expressed a general desire to incorporate the color yellow and utilize Pale Blue as the default font color into their design. Our team embarked on a collaborative journey to explore various color palettes individually, presenting the most compelling options to the client.
We meticulously refined and selected the color scheme that resonated most with the client's preferences.
I led the development of the client's wordmark, aligning it with their preferences and establishing it as a core brand element.
Key considerations included incorporating the color yellow, using a Sans-Serif font, and embracing minimalism. I also integrated Egyptian cultural symbolism by adding a yellow lotus flower to represent rebirth, eternity, and resilience. This design conveys the message: "Ashtrei strengthens and rejuvenates business connections," meeting both client and cultural expectations for a meaningful visual identity.
Understanding and Apply Local Shipping Regulations in Wireframes
After conducting a competitive analysis and understanding user needs, our team assigned specific user stories to each member and created low-fidelity (lo-fi) and medium-fidelity (med-fi) wireframes to establish the screen layouts.
I was responsible for wireframes related to the user story: "As a Retailer, I want to place an order for a product." This included screens for product search, selection, cart addition, checkout with billing and shipping details, and order confirmation.
To ensure accuracy, I researched Egypt's mailing system and delivery services to properly format address fields and integrate carrier options.
_lofi.png)
%20-%20Placed%20In%20Cart%20Confirmation%20modal%2Blofi.png)
_lofi.png)
Defining Color Palette and Typography
Following the establishment of the wordmark, branding, and UI elements, our team created a comprehensive style guide to ensure consistent documentation for future designers and engineers.
Color Palette: We used earthy tones based on the client's preference, with vibrant colors reserved for status updates and calls to action (CTAs).
Typography: After exploring various fonts with the client, we selected DM Sans as the primary typeface for the website.
Aligning Visual Preferences with Target Demographics
With the client’s broad vision for aesthetics, usability, and functionality, our team had the opportunity to explore a range of UI iterations for the landing page, a crucial element for the website's overall design.
We began by developing initial designs inspired by Faire.com and then refined them based on client feedback to better align with their preferences and target user needs.
Key preferences included:
Adapting to Evolving Functionalities and Enhancing Usability
After refining the visual aesthetics to a clean, minimalistic style with an earthy color palette, we created High-Fidelity screens that highlighted core functionalities and user-centric design principles.
As the project evolved, new functionalities were added to meet the client's changing needs and integrate additional engineering expertise. Our team embraced these enhancements to boost usability and overall user experience.
Screens I was responsible for designing included:
To improve the visual experience, I added distinctive visual cues to each section of the checkout screen.
The "Shipping Options" section was incorporated later in the project due to the client's new internal capabilities, enhancing usability. We quickly integrated this feature into the interface.
In the "Payment Options" section, users could choose their payment method, with relevant follow-up prompts appearing based on their selection.
Given Ashtrei's B2B focus, many Suppliers operate with minimum order quantity (MOQ) requirements. To address this, the "Place in Cart" button is disabled until Retailer Users meet the MOQ.
To ensure transparency, Retailer Users can view Supplier ratings, reviews, and detailed product information. Additionally, Suppliers can enable "bulk discount" settings, offering Retailer Users a discount breakdown to encourage larger orders.
We used Figma's "Annotate Design" and "Measure" plugins to create our Developer Handoff package.
We carefully documented the spatial and dimensional details of each screen element, including font specifics like typeface, size, weight, color, margins, spacing, and alignment.
This detailed documentation ensures a smooth transition from design to development, promoting consistency and efficiency, and ensuring that the design vision is accurately realized in the final product.
This project has been a pivotal experience in my UX journey, offering valuable opportunities for growth and learning.I gained insights into the unique needs of Egyptian users, exploring cultural aspects like color symbolism and the structure of Egypt's mailing system. By blending Egyptian design trends with Western principles, I crafted a user experience that aligns with both cultural context and UX best practices.
Throughout the project, the client's active engagement allowed us to adapt to evolving market dynamics and user demographics. This collaboration led to iterative design solutions that met the client's vision while maintaining UX integrity.
I'm proud of my user-centric approach, which enhanced the product discovery and purchasing journey. My attention to detail helped implement features like dynamic delivery method selection with auto-populated shipping costs, improving the overall user experience and checkout process.
If I could extend my role, I would focus on creating custom illustrations and imagery, leveraging my research to further elevate the user experience.
In summary, this project has broadened my perspective on user demographics beyond the Western context, allowing me to contribute to a product that bridges cultural nuances with UX excellence.
Thank you for viewing my Ashtrei project!
Click below to view other projects.
