OFF-APP

This project is an online shopping app designed to offer a simple and user-friendly experience. With new features added, the design thinking process was structured to prioritize users' real needs, aiming to create a successful, user-centric product.

Background:

This study focuses on improving user engagement and satisfaction in e-commerce apps by incorporating features such as product customization, enhanced search capabilities, and purchase sharing. The aim was to identify key user pain points and address them with innovative design solutions.

Team Structure :

- UX/UI Designers

- Developers

- Product Managers

- Researchers

My role:

I was responsible for UX/UI Design, Product Managing Research like all the activities like conducting user research, creating wire-frames and prototypes, designing the user flow, and testing the final prototype with target users. My friend Salva also help me in some researches and development

1) Define the problem:

Quantitative and qualitative survey and interviews focused on :Shopping frequency, Product requests, Enjoyment of personalization and sharing, Online shopping habits, Product requests, Store preferences, Bundling and sharing experiences conducted 
to understand user needs _{(among 75 representatives).}

Key user needs:

- Ease of purchase, 


- Product customization, 


- Access to special offers.

‍

User personas created to guide the design process, ensuring alignment with user needs.

‍

Business research:

Kick-off Workshop:

I’ve organized a session to meet all the stakeholders and understand what they’re trying to achieve and any design assumptions they may have. To facilitate the workshop I’ve used bench marking for competitors to help us quickly define the current problems, business goals, value propositions

Business Goal:

The business goal was to boost user engagement by offering product customization, access to exclusive items, and social sharing features, enhancing user retention and satisfaction.

2) Ideate for Solution:

Here comes the third step in design thinking, which is ideation and finding new solutions (Ideate). At this stage, we generated various ideas to address the identified problems.

The outcome was a super app name OFF-APP with features below:

+ Off-Yab

Product Request Submission: A feature allowing users to request specific products not available in the app, so sellers can find and offer them.

+ Off-Pack

Custom Pack Creation: Users can select and combine different products to create personalized bundles.

+ Off-Gardi

Store Recommendations: A page introducing reputable and user-favorite stores.

+ Show-Off

Purchase Experience Sharing: Users can share photos of their purchases to help others and share their experiences.

User flow and mapping journey:

I’ve mapped using Miro a detailed path of User flow.

3) Prototype:

Wireframing:

Next, I needed to prepare sketches and wireframes to visualize and plan the structure and layout of the design.

System Designing:

I designed the style guide to establish the visual and interactive elements of the project. Also I designed components to ensure consistency across all elements of the interface. Status,Overlays, Cards, Banners & search bar and other elements,…

4) Build:

The design of OFF-APP was completed with over 150 pages, available in both light and dark modes. 
The prototype was also successfully developed.

5) Analyze:

Usability testing:

I wanted to validate all the design assumptions from my design review and from business stakeholders.

I’ve set up a remote usability test on UserTesting with 10 people from the target audience completing a set of tasks on the website. I’ve received 3 hours of narrated video that provided lots of insights to test our hypotheses, in one of which I was wrong:

- 7 out of 10 people did not see how our Service differ from other online shops with discount filters on the market.

Clear value propositions to differentiate the company from its competitors

The prototypes were tested with target users to assess both performance and user experience: Users effectively personalized their shopping using the custom pack feature.Feedback on the product request feature indicated it helped users find hard-to-access items.The overall experience of navigating other pages was equally satisfying for users.This phase offered critical insights into how well the app aligned with user needs and preferences.

I’ve proposed:

Improving product categorization and navigation menus.
Enhancing the search functionality with filters and smart suggestions.
Adding a prominent information section for each product.
Implementing interactive product tours or highlights.
Providing a FAQ or chatbot for quick answers.

Information architecture:

I want to ensure the website’s content is well organised 
to make it easy to discover and navigate through card sorting:

Blog posts are an important part of content marketing helping drive organic traffic to the website and its SEO. I’ve run card sorting in OptimalSort with past customers to validate the blog content is well grouped and labelled:

- Over 67% of 382 respondents agreed on 
the existing grouping and labelling of Offers.

Content feedback form:

I’ve placed a simple form at the bottom of each Product page of the website to get feedback on the content:

- 80% of 271 respondents said they’ve found 
everything they wanted on the page.

Accessibility:

I want to ensure our design is universal and works for everyone.

I’m working on the website to fully comply with industry’s Web Content Accessibility Guidelines.

WCAG validation

• Text size is legible & can be easily changed
• Content is not cropped
• Optimal colour contrast ratio
• System is accessible on different of screen sizes
• Interface is navigable using keyboard (-)
• System is responsive & doesn’t take long to load (-)
  ‍

‍Inclusive design

To get a buy-in from the business I’ve arranged activities from Microsoft’s Inclusive Design Toolkit to introduce empathetic problem solving. I’ve analysed the website using PageSpeed service for any performance issues, which are likely to affect accessibility and conversion rates. I’ve discussed these with our developer starting from optimising hi-res images that should improve loading times by 20%.

Design Review:

I’ve reviewed the current website to evaluate what works and what doesn’t assumptions from my professional point of view.

What works:

1- Shopping journey is relatively quick and has informative post-purchase communication

2- Information about Delivery time and cost is attention seeking and pricing was clear

3- The list of what’s included with the product is visualised well

4- Clear value propositions to differentiate the Service from its competitors

5- Discount and offers are easy to discover, well categorised and provide useful information

What could be improved:

1- Not enough information on how chat with seller in order to make a decision

2- A popular PayPal payment option not being supported may lead to checkout abandonment

3- Background photo on the landing page doesn’t reflect that the Discounts are average of market

4- Product details page loading time is quite slow, which could affect bounce rates and miss-click

5- Having Off-Shop logo and reviews on every page of the website seemed excessive