Stylit UI UX for Mobile Shopping App

Stylit is a shopping fashion Box- Mobile App! A new way of shopping based on personal preferences and body shape. Discover new styles, receive exclusive offers, personally selected for you by expert stylists. Because the shopping and fashion industry is always in flux, I committed most of the research time on user research. I was responsible for research, design, testing, and handoff. I concentrated on delivering a functional user app experience.

Client
Stylit
Date
6.21.20
Based In
Toronto, Ontario, Canada
Scroll Down

The Challenge

Shopping is a massive industry. I have always fancied popular fashion brands, and that is why I have an inclination towards shopping apps. I had previous knowledge of the market, but this time I was looking at those apps with fresh eyes. Everyone uses their phones to shop. I believe that, a quick and user-friendly shopping assistance app has become a necessity in today's fast-changing fashion. However, the vast majority of shopping apps are sorely lacking in good user experiences. I didn’t want my app to be just another shopping tool. I wanted to have a warm feeling.

My Role

I completed all activities in the UX project cycle in a solo capacity- from research to design to prototyping. I was in charge of Research, Ideation, User Task Flows, Design, Branding, Prototyping & UI/UX Design. I conducted user research using interviews and surveys in order to address both user behaviors and attitudes.

Stylit UI UX for Mobile Shopping App  My Role : Research, Ideation, Branding, Task Flows, Design, Prototyping, UI/UX Design

Tools

Stylit UI UX for Mobile Shopping App  Tools: Whimsical, Miro, Procreate, Microsoft Word, Microsoft Excel, Adobe Illustrator, Adobe Photoshop, Figma, Lookback, Zeplin

Tools: Whimsical, Miro, Procreate, Microsoft Word, Microsoft Excel, Adobe Illustrator, Adobe Photoshop, Figma, Lookback, Zeplin

Techniques: Surveys, Questionnaires, Interviews, Affinity Diagram, Value vs. Complexity Model, Competitive/Comparative Analysis, Mood boards, User Flow, Paper Prototype, Crazy-8, Wireframes, Mockups, Pattern Library, Key Performance Indicators, Remote Un-moderated Usability Testing, Accessibility Analysis, Prototyping

Duration

8 weeks with weekly deadlines

Research & Analysis

Based on my initial app idea, I came up with a list of interview and survey questions. The questions were simple and to the point. This was enough data to give me a good start. It gave me the direction I needed to dig deeper to solve the most common problems. I selected & interviewed 4 potential users who were interested in my research, based on their needs, pain points, and how they use digital products to shop. After conducting the interviews and surveys, I transferred all my notes and responses to sticky notes on Miro. I recognized patterns, rearranged the sticky notes into clusters under different themes and possible opportunities, detailing particular pain points, and user insights.

Stylit UI UX for Mobile Shopping App Affinity Diagram / Affinity Map using Miro

Stylit UI UX for Mobile Shopping App Moodboard using Mobbin

People primarily use their mobile apps to research products. However, shopping apps have a lot of information and are poorly displayed and presented to the user. I identified the opportunity to build a product with a focus on fashion assistance, displaying breathtaking pictures and content with a simple, intuitive, and functional mobile app interface. I identified a list of potential app features and prioritized them using the Value vs. Complexity Quadrants. User flow diagrams were created to illustrate the primary user flow. Based on the user flow diagrams - and bearing the main pain points in mind - sketches of the layouts were developed. These sketches included consideration of the primary user flow, positioning of the main navigation, and how interactions would work.

Paper Sketches on Paper using Crazy 8 Method

Low Fidelity Mockup

Using the crazy-8 method, wireframes  and ideas were sketched on paper. I tried different layouts, triggers, and responses. After many iterations without colors, typography, and images, I developed a low fidelity prototype using Figma. I then used Lookback to send it out to users to test.

Low Fidelity Mockup using Figma & Photoshop

Feedback & Iteration

Remote user testing sessions were conducted using Lookback as it provided the ability to listen to users describing their expectations and disappointments on every interaction. I then made revisions based on my observations and the users’ feedback. The testing sessions were a very valuable way for me to identify the flaws in my designs and gain insights into what the users were expecting from each interaction.

Color Palette

Color plays a major part in the correct reflection of the product.

Color Palette

Typography

For the most part, I stuck to the well-known system fonts. I also used different text sizes, alignment, and line & letter spacing to better communicate information.

Typography: Roboto

Iconography

I tried to make sure that I designed the icons well enough so that they quickly recognized by the user at a glance.

Top Bar, Product Detail Icons & Navigation Buttons

High Fidelity Clickable Prototype

Testing helped identify the flaws and provided useful insights that lead to improved designs that are consistent with the Google Material Design guidelines. I created a High Fidelity clickable prototype using Figma with the selection of appropriate colors, icons, typefaces, and fonts.

High Fidelity Screens using Figma

Validation, Usability, Feedback & Iteration

I used Lookback for Testing. Based on the user feedback and the latest UX trends, I created the final high fidelity prototype using Figma. I improved accessibility and iterated on designs based on user research, data, and KPI. I created style sheets and a Component Sheet in Figma. After I was confident, I exported the designs to Zeplin for Engineering Handoff.

Validation, Usability, Feedback & Iteration using Lookback

Solution & Insights

High Fidelity Gif

This wonderful two-month project resulted in the accumulation of a huge amount of knowledge, skills, and perfection of tools and techniques. I feel that the user experience met the user needs, allowing them to complete tasks and achieve their goals. As I was the lead and only UX Designer, I spent a lot of time designing the less important features and paying close attention to detail, which is not hurtful but, it increased the volume of work. The key trade-offs were that if I had a team, I would have had more eyes looking at the project from various different perspectives.

Thank you