Koshish

Koshish is an Indian brand that creates sustainable fashion, home + bath textiles and works towards a social cause.

Timeline

February - April 2021

Project Type

UX, UI, Website Design

Role

UX/UI Designer

Team

Individual Effort

Overview

A website for the environmentally and socially conscious

Koshish is an upcoming brand for sustainable unisex apparel made with fabric scraps and natural white organic cotton. It provides material donations against each purchase as well as employment, skill, and empowerment to the underprivileged.

The problem

The challenge included heeding the brand’s business goals and efficiently communicating their environmental and social values, while simultaneously resolving the customers’ primary needs, which included building trust, quick purchasing, and solving concerns that arise during shopping online.

View Final Solution
Scope, timeline, and my role

I worked as a freelance UX/UI designer, involved from the inception of the design phase - including conducting user research, mapping out problems, and delivering the final UI designs (10-15 screens) - till the hand off for development.

Process

Discover

Gaining insights and empathy

Brand and strategy kickoff

In the first meeting, I aimed to grasp the brand attributes, mission and business goals to form enough understanding to drive the design process.

Interviews

I conducted user interviews across various age groups to discover issues, understand multiple perspectives and gain insights into user needs in order to develop efficient strategies with utmost empathy and understanding.

Key Findings

  • How might we increase awareness about the fashion industry while also urging people to buy more?
  • How might we induce conversion?
  • How might we make the online experience as close to a physical one?

Personas

I conducted user interviews across various age groups to discover issues, understand multiple perspectives and gain insights into user needs in order to develop efficient strategies with utmost empathy and understanding.

Define

Carving out a niche in a saturated market

After conducting user interviews, all the participants responses were synthesized to identity themes, opportunities, and features that YUM could focus and improve upon.

Affinity Map

An affinity map was created to identify high level themes and group similar insights gained from the user interviews.

Interview Synthesis

Using the four hues of the SimpleStage identity as a starting point, I expanded the color palette to accommodate the needs of the platform’s complex dashboard system.

Persona

Personas were built based on the data collected to help drive decision-making and keep the product focused on solving users' pain points, frustrations, and goals.

Ideate

Weaving a better experience

To kick-off the design process, quick sketches helped me get ideas on paper to establish which elements were necessary for each screen. A low fidelity prototype was then created for initial user testing.

User Flow

The primary user flow is the process of searching, saving and sharing with friends.

Site Map

Koshish's simple information structure makes it easy to navigate and move through tasks.

Sketches

Rough sketches were done to get my initial thoughts on paper and brainstorm new ideas for specific UI elements.

Low-Fidelity Prototypes

Using the feedback and insights gained from research, analysis and sketching, a how-fidelity prototype was created to begin user testing.

Usability Study

A usability study was conducted to determine where improvements could be made and identify new ideas to satisfy user expectations, needs, and desires.

Pain Points
01

Source of restaurant review was unclear

02

Quick save option not available, had to specify which list to save to

03

Emphasis on photos made it difficult to find type of food and restaurant ratings

New Ideas
01

Use color to differentiate YUM's suggestions from a users saved restaurants

02

Remove multi-step process to find social icons and make immediately visible

03

Add a moment of delight to let the user know a restaurant was saved

Ideate

Weaving a better experience

Sitemap

In the first meeting, I aimed to grasp the brand attributes, mission and business goals to form enough understanding to drive the design process.

Wireframes

I created both low fidelity and high fidelity wireframes of individual pages for the following purposes.

These are a few iterations of the wireframes for landing page (for the part visible above the fold):

Landing Page

Core elements above the fold

A strong visual of a new arrival/bestseller as the hero image along with the brand USP as a clear headline & subheading

Multi-lingual feature

Languages can be switched among english and regional ones via dropdown in navv bar to enhance access across the country

Favorites and product categories

Best-selling products with tab displaying categories to quickly inform users about trending and types of items

Company values, mission, impact

Company mission explained along with environmental and social benefits of koshish garments

Donation counter

To act as proof of action and instill value of impact

Product Listing

Close-up product photos

Close-up photographs of the material’s texture for a better ‘feel’ of the product
(Please note that all images used currently are stock photographs).

Card interactions - quick add, viewing multiple product photos:

To act as proof of action and instill value of impact

Product Details

Inclusive product photographs

To emulate inclusivity, the product photographs would be gender-fluid.
(Please note that all images used currently are stock photographs)

Product USP

Mentioning the benefits of products over conventional equivalents to inform the users, as well as tap into their ‘saviour complex’

Customer photographs, fit and transparency ratings, reviews

These are to serve multiple reasons: provide more information to the users, influence decisions, act as social proof to instill trust about completed orders and satisfied customers, provide a better idea about the ‘look’ through uncurated photographs in relatable context and usage

Including information of the creators and team behind a product

To inform the users of brand’s mission of enabling and including, as well as to provide incentive to user for purchasing

Employment counter

To act as proof of action and instill value of impact

Design

A focus on simplicity

Inspiration was drawn from fine dining restaurants with a focus on minimal yet functional simplicity. The UI design reflects the user's desire to have a clutter free, curated look and feel.

Logos
Typography & Color

Solution

A highly curated experience

YUM makes the process of finding a restaurant, saving it for later, and sharing it with friends simple and engaging. It connects people to a social network of fellow foodies and only suggests restaurants that match up with each user's preferences and positively reviewed and rated dining experiences.

Sign In

Intro screen and onboarding

Search

Users land on the map screen after signing in and when opening the app, making searches quick and easy.

Save

After finding a restaurant, users can then save it and add it to as many lists as they'd like

Share

After saving they can share it with their friends or friend groups

Social Feed

Users can follow friends and read their reviews or write a review and share pictures of their own dining experiences

Profile & Lists

Profiles feature a recommendation section where users can add their top rated spots

Discover

YUM recommends restaurants based on a users location, friends, saved restaurants, and their positive posts and reviews.

Problems Solved
01

Integrates all needs into one streamlined experience

02

Suggests more personalized restaurant recommendations

03

Supports social connection and engagement

04

Saves favorites for quick reference later

05

Gives users more flexibility to create specialized lists

06

Provides a source of reputable reviews from trusted friends and influencers

More Case Studies