Interactive E-commerce - Mobile App

Project Overview

Video Shopping is a mobile app for a truly personal shopping experience. Shop for virtual experiences live, with a dedicated personal shopper guiding you.

My Role

I collaborated on all aspects of this project, from research to design. I focused on creating a seamless and engaging virtual experience for the customer.

----------------------------------------------------------------------------------------------------

Problem Statement:

Video shoppers prefer a seamless shopping experience. They want to be able to watch product videos and purchase directly from the video itself, without needing to navigate to a separate product page.

Problem Solution:

My mission is to revolutionize virtual shopping. I'm building a one-click platform that prioritizes user experience, particularly in innovative video shopping.

----------------------------------------------------------------------------------------------------

Design Process

The design process is an iterative, non-linear approach that emphasizes continuous collaboration between designers and users. Unlike traditional linear methods, this process involves revisiting and refining ideas based on feedback at various stages, allowing for flexibility and adaptation as new insights emerge. Through ongoing user involvement, designers can better understand real needs, preferences, and pain points, leading to more user-centered solutions. This dynamic approach not only improves functionality and usability but also fosters a sense of shared ownership, making the final product more relevant, impactful, and aligned with user expectations.

User flow diagram

A user flow diagram visually maps out the steps a user takes to accomplish a goal within an app, outlining each interaction and decision point along the journey. By illustrating the sequence of actions, this tool helps designers identify potential pain points, redundancies, or confusing steps that may disrupt the user experience. Analyzing the user flow provides valuable insights into areas for improvement, enabling a more streamlined and intuitive journey that aligns with user expectations and goals.

Wireframing

Wireframing is a crucial step in mobile app design, focusing on creating a simplified outline of the app's layout and core functionalities without visual design details. This approach enables designers to prioritize user experience by mapping out screen structures, navigation paths, and essential features early in the process. By doing so, they can test, refine, and adjust the app’s flow and usability before committing resources to the final visual design, ensuring a more user-centered and efficient design process.

Typography & Color Scheme

The app’s typography features a clean, modern sans-serif font that enhances readability and contributes to a professional, approachable look. The color scheme combines shades of blue with white, creating a fresh, modern aesthetic that is both visually appealing and easy to navigate. This choice of colors and font style helps establish a cohesive, user-friendly interface that aligns with the app's overall polished and accessible design.

The purple color is used for primary elements, while the white color is used for backgrounds and secondary elements.

HI-Fidelity Design

Hi-Fidelity Design is the final stage of the design process, where the app's visual elements are meticulously refined and polished to create an accurate representation of the intended user experience. At this stage, designers focus on perfecting details like color, typography, layout, and interactive elements, resulting in a high-fidelity prototype that closely resembles the final product. This detailed prototype serves as a realistic preview, allowing stakeholders to assess and experience the app’s full visual and interactive design before development begins.

📱 The goal of HI-Fidelity Design is to create an engaging and intuitive user interface that enhances the overall user experience.