Case Study

Redefining Umniah’s Digital Experience with Customer-Centric and Industry-Leading UX/UI

Enhanced eCommerce design for best in class experience

Impressive and bold visual language

Customer-centric UX

Project introduction

ABOUT THE CLIENT

Umniah is a Jordanian mobile network operator taking a 30 % share of the mobile telecommunications market in Jordan. Their website sells both mobile and internet plans as well as devices such as phones, laptops, smart devices and compatible accessories.

PROJECT GOAL

The project objective was to move website to the Hyva theme and do redesign of homepage, product listing page, product The initial focus of the project was a design audit, but it quickly evolved into the creation of a completely new look and feel for the Umniah website. The primary goal was to launch the site efficiently while delivering a best-in-class user experience, underpinned by professional, benchmarked UX and UI design principles.details page, cart and checkout.

Best industry trends incorporated

Best in-class-user experience

Impressive and bold design language

Focus on shortening buying journey

Customer-centric designs

Approach

STEP 1

EXISTING DESIGN
AUDIT

This project was unique in that the potential new website designs were already created, and our role focused on conducting a UX/UI audit and offering recommendations for improvements based on best practices in eCommerce and design.

STEP 2

Improved layout suggestions

After completing the audit, our UX expert developed wireframes and design mockups that incorporated enhanced solutions aimed at optimizing the user experience. These mockups addressed identified pain points and offered improvements such as clearer navigation, more intuitive layouts, streamlined user journey, and more.

STEP 3

style & designs

Once the high-fidelity wireframes were completed and approved, and the page layout and user journey flow were finalized, we transitioned to the design phase. During this stage, we developed a completely new visual identity for the Christmas Tree World website.

HOMEPAGE REDESIGN

For Umniah's homepage, we adopted a user-centric approach to create an engaging and intuitive experience.

The design features a striking yet clean header and hero banner that immediately captures attention. Key offerings, such as mobile and internet plans, are prominently highlighted to guide users effortlessly toward core services. Additionally, we ensured seamless visibility for device categories, introducing them in a way that feels natural and inviting, helping users quickly discover and explore the full range of products.

Ensure stunning first impression

Umniah’s homepage hero section is crafted to make a strong first impression, featuring a full-width and full-height banner that extends seamlessly to the top of the page, even covering the background of the main navigation. A well-executed first impression is crucial in UX, as it sets the tone for the user's experience and captures attention encouraging visitors to explore further.

List all main categories and services

Presenting users with product assortments and service types on the homepage is crucial to help visitors quickly understand what is offered. This approach allows them to access their category of interest directly, reducing reliance on main navigation or search and streamlining the user journey. This is especially important on mobile devices, where the main navigation is hidden behind a hamburger menu.

Communicate top offers

For this project, a slider with bold statements and colorful backgrounds is placed directly beneath the impactful hero banner. This strategic positioning enhances the visual hierarchy, guiding user attention to key promotions or announcements while maintaining a clean, organized layout.The slider format supports quick scanning, catering to users who skim content by delivering concise messaging paired with striking visuals.

Mobile

Desktop

INTERNET AND MOBILE PLANS pages

The most challenging aspect was the integration of optional extras, effectively transforming these products into customizable bundles.

Since Umniah is a telecommunications company specializing in mobile and internet coverage plans, one of the primary focuses of this redesign was enhancing the user journey for purchasing these plans.

Highlight the key details

Speed, price, and key benefits are the top three factors influencing a user’s decision when purchasing an internet plan. To address this, these elements have been prominently featured in the designs, positioned at the very top of the page for maximum visibility and impact.

Make pricing transparent

Previously, Umniah’s clients struggled to understand the breakdown of plan pricing, often feeling that the details were unclear or hidden. To address this, we introduced a detailed package summary that transparently outlines each package element along with its corresponding price.

This improvement enhances the user experience by providing clarity and fostering trust. Users can now easily see what they are paying for, reducing confusion and frustration while empowering them to make informed decisions. Transparency in pricing also helps build credibility, which is critical for creating a positive relationship with the brand.

Enable plan customization

Previously, users could not customize their internet plans independently, and adding extras to their existing plans required manual assistance via customer support. The redesigned internet plan page now empowers users to personalize their packages with various options, such as Wi-Fi solutions and additional subscriptions like OSN+ and TOD. This improvement was achieved by adapting a bundle product page layout, offering a seamless and user-friendly experience while reducing reliance on support services.

Mobile

Desktop

services product cards

Another challenging aspect of this website’s redesign was reimagining the product cards for internet and mobile plans

The primary objective was to design cards that are both highly informative and optimized for conversion, effectively presenting the most critical information about each plan in a clear and engaging manner.

Group key information

Given that there were around ten key informational elements to display on the product cards, we decided to strategically organize and present this data in a way that enhances usability and visual appeal. The solution involved splitting the information into distinct sections and pairing each element with an icon.
‍
This approach not only prevents information overload but also makes the content easier to scan and comprehend at a glance. Icons serve as visual cues, quickly guiding users to the details they care about most, such as data limits, speed, or pricing. By balancing clarity with aesthetics, the design ensures that users can effortlessly evaluate and compare plans, improving their overall experience and facilitating informed decision-making.

Mobile

Desktop

Custom landing page design

Custom
landing page design

One of the most exciting pages to design for Umniah's eShop was the Gaming landing page, which highlights gamer-specific internet packages, cloud gaming services, and a live latency monitoring platform.

This page allowed the designers to unleash their creativity, crafting a cyberpunk-inspired, dark-themed landing page that captures the essence of gaming culture while ensuring an engaging and conversion-driven UX.

Know your target audience

While designing the Gaming landing page, we prioritized understanding and catering to the target audience: gamers. By considering their preferences and familiarity with various gaming genres and aesthetics, we aimed to create a page that resonated deeply with this community.

Offer relevant products

However, it is equally important to balance creating visually impressive gaming designs with driving user conversions. With this in mind, and understanding the preferences of the target audience, we strategically showcase relevant products such as gaming consoles, laptops, and accessories. This ensures that the design not only captures attention but also effectively guides users toward making purchases, seamlessly integrating aesthetics with functionality.

Create familiar atmosphere

After exploring several design styles, we chose a cyberpunk-inspired theme with neon colors as the dominant visual motif. This decision was based on the style's strong association with futuristic gaming culture and its ability to create a vibrant, immersive atmosphere. The use of neon accents and dark backgrounds not only enhances visual appeal but also evokes the high-energy, tech-savvy vibe that gamers appreciate, making the page both engaging and relatable.

Mobile