Portal

Redesign the promotional landing page website (Focusing on the mobile platform) and make it more user-friendly.

Smartphone displaying a webpage with online store features, discount offers, and support information, against a plain textured background.

01
My role:

Ux researcher, Ui designer

02
Timeline:

Mar 2024 - Apr 2024

03
Tool Used

Figma, Adobe Illustrator, Photoshop

Business accounts in instagram are dealing with inquiries challenges (e.g. large amount of data), mostly acquired by DM (Direct Message). This means providing information about the product such as price, inventory, shipping, and even verifying payments.

Coming holiday season, a user friendly landing page can results in creating online shop demand. These users have limited time, so the contents need to be in summary and presented in an effective manner.  Therefore, it helps shoppers to make a decision quickly.

Problem

Video option for introducing the Website features:
This option is very attractive for our users due to their lack of time and the habit of using Instagram's reels.

First impressions:
The most important part of the landing page is focuses on the hero section. 
I used attractive illustrations and important data to catch the user's attention.

Reduced cognitive load:
I minimized the design of all parts and focused on the benefits.

Solution

Project Goals

This project aims to redesign the promotional landing page website (Focusing on the mobile platform) and make it more user-friendly. The goal is to boost user satisfaction and make them eager to use the website’s services.

Content Clarity

Impressed At First Glance

User Friendly

Illustration of people shopping online on a large computer screen with clothing and shoes. One person is surprised, another is pointing at the screen, and a third person is sitting on the floor using a phone. Shopping bags and pie charts are also visible.
A flowchart diagram illustrating the stages of a process, including Understanding, Ideate, Design, and Test, with associated tasks like user research, competitive analysis, best solution, wireframe, style guide, usability test, and others.

Process

User research

Our targets are busy Instagram sellers who deal with a lot of information and messages on a daily basis in limited times. 

They need a safe and user-friendly platform that could saves their time without any more admins.

Most of their communication is in the field of phones.

A cartoon illustration of a person sitting with a laptop surrounded by multiple screens and devices, all displaying checkmarks. There are gears and a target with an arrow hitting the bullseye in the background, symbolizing goal achievement and technological efficiency.

Competitive analysis

Comparison table of three website development tools, listing their strengths, weaknesses, and purposes. The tools are Sazito, DigiFly, and Webzi, with their respective logos and descriptions.

Wireframe Low-Fi

Multiple grayscale screens displaying a mobile app interface in a diagonal arrangement, with user profiles, text, icons, and navigation elements in the Arabic language.

Design System

A digital graphic showcasing a color palette with primary, secondary, tertiary, and text colors, each with their hex codes, alongside an illustration of a man analyzing a mobile app interface with various screens and design elements.
A smartphone displaying a website in Persian language, placed on a beige notebook with a white pen beside it, and a white cup filled with coffee on a cork coaster, all on a textured white fabric surface.

Testing

Screenshots of a mobile app interface in Persian language, showing features for selling products quickly, managing sales, and customer support, with illustrations of people using laptops and shopping carts.

Regarding hard time for gathering users in holidays, I managed to find two case study (people) for the test.

Here are some of the important findings from the two test sessions:

A person holding a smartphone displaying a website with text and graphics, with a blurred background.
Before and after images of a mobile website redesign for an online store, showing spring-themed visuals, key points in bullet format, a teaser banner with embedded video, a call-to-action section with free trial offer, FAQ section with chatbot link, and customer testimonials, all organized with a clean, uncluttered layout.

Output of soft skills & knowledge

This project meaningful had so many benefits for me; not only I learned many things about Ui design (focused on a particular topic), but also it was a valuable learning experience in honing my soft skills.

This short internship taught me how to balance business goals with user needs, helping me understand how to navigate the space between the two. It served as a strong foundation for taking on more advanced, real-world projects.

In the design process, we had a mentorship group sessions with senior designers. Their feedback and fruitful guidance helped refining my design approach through challenges.

Clike to learn more about this project