USER INTERFACE & EXPERIENCE DESIGN CASE STUDIES PORTFOLIO … · 01 DESIGN SPRINT 02 PORTFOLIO 2019...

PORTFOLIO 2019CASE STUDIESUSER INTERFACE & EXPERIENCE DESIGN

SKILLSI am a critical thinker, with a multidisciplinary skill set that integrates creative knowledge with technical and business expertise, with a focus on communication and facilitation of the task. I implement the latest design tools with my knowledge and understanding of human behaviour to craft well rounded solutions.

High fidelity design

Design Thinking

Rapid & Interactive prototyping

Resource management

Research & Analysis

Usability testing

WireframesUser personas Screen flows

PORTFOLIO 2019SKILL SETABOUT ME02

EXPERIENCESuccessful entrepreneur of a failed funded startup. Dawned as many hats as the hatter. Experienced enough to give a Ted talk, but I'm not done learning. Hobbyist astronomer made of starstuff. Hands-on, hardworking, design enthusiast, looking for the next phase in my journey.

PORTFOLIO 2019CAREERABOUT ME03

2019 - CURRENTFREELANCECONSULTANT

2018 – 2019TALENT DEKHOHEAD-DESIGN

2015 – 2019FLOCHATCO-FOUNDER

2014 – 2018SOME ANONYMOUS PEOPLEFOUNDER

2010 – 2015TRINE ENTERTAINMENTANIMATOR / GAME PRODUCER

2008 – 2009ANIBRAININTERNSHIP

USER INTERFACE & EXPERIENCE DESIGN

3D ANIMATION

VISUAL EFFECTS

2019 - CURRENTENNEA CAPITAL PARTNERSDESIGN CONSULTANT

PROCESS01.Research. Understand the user, identify the problem, understand the target audience and platforms to be used. 02.Analyse. User data and insights, deep dive competitive analysis, create user personas, user journeys. 03.Create. Wireframes, low-fidelity designs, rapid prototypes, scenarios and screen flows. 04.Design. Develop a high fidelity prototype, build a design system to aid development. 05.Test. Conduct real life user tests, evaluate design with the team and key stakeholders, obtain feedback. 06.Deliver. Incorporate feedback, complete design for final delivery.

01. Research

03. Create

02. Analyse

05. Test

04. Design

06. Deliver

PORTFOLIO 2019WORKABOUT ME04

CASE STUDIESPicking from a list of projects that I have worked on, I have selected 3 case studies that best showcase my most relevant and recent work in the field of User Interface and Experience Design.

01The Hiranandani Select app is a B2B mobile app for it’s channel partners for quick assistance & more

02Talent Dekho is a “video-first” B2C mobile platform that allows users to showcase their talent & represent local groups they belong to using short videos online.

03Flochat is a B2C evolved multi-messaging platform with unique audio and visual technology for post millennial users.

PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT

CHALLENGE

Create seamless collation of all offline client data from the field. Create a central repository accessible to users with the latest sharable marketing collateral. Incentivise sales.

WORK DONE

• Setting goals and objectives • Research interviews • User personas • Problem statement • Creating scenarios • Low-fidelity prototypes • Interactive wireframes • High fidelity design • Dashboard design • Usability testing • Final deliverables

06Date: 2018 Platform Mobile – iOS & Android.

Web – Dashboard


PROJECT OWNER: Hiranandani Group ( Top real-estate developers )

WHAT IS THE APP ABOUT? The Hiranandani Select app is a mobile app for its channel partners for quick assistance & more. A registered channel partners now has the means to inquire, check the status of the project and their customers and also look into special deals and promotions through this app.

WHAT ARE THE GOALS? The goal of the app is to provide a central repository for all reality collateral and a central processing unit for potential client form submission and status updates. Incentive sales via gamification.

WHO ARE THE USERS OF THE APP? Primary user: Sales team and Brokers.

01

Goals and objective are best understood from key stakeholders involved. I usually start by understanding what they see as the problem and what they envision the solution to be. In this case the key stakeholders were top level management

SETTING GOALS AND OBJECTIVES

07


Conducting interviews is essential in gathering information. Knowing what questions to ask, when to ask them and when to listen is key

For this project, apart form the top level management, I also conducted interviews with the end users aka brokers. This gave me a number of unique insights to the challenges which were not highlighted during internal briefing sessions. Understanding the end user’s goals and objectives is key to building a successful product.

RESEARCH INTERVIEWS

08

01


01

WHO THEY ARE

• Real estate broker / sales teams • Gender: Male and female • Age: 25 – 45 • Education: Graduates, Post Graduates

PAIN POINTS

• Travel time to and from the corporate office to submit and file forms.

• Low / bad mobile connectivity • Lack of access to sharable marketing collateral • Delayed gratification

WHAT DO THEY WANT

• Structured Process • Ease of form submission and filing • Instant gratification • Central repository for all marketing collateral

THEIR MOTIVATION

• Higher Incentives for more sales • Upto date with the latest features / building

openings and availabilities • Structure in reporting

HOW DO THEY CURRENTLY FIND INFORMATION

• Whats apps groups • Corporate office • Calling colleagues

USER PERSONAS

09


PROBLEM STATEMENT

Lack of a structured central control system for client data input, collation of information and updation of latest marketing collateral. Delayed instant gratification

“”

10

01


01

The best way to understand user behaviour is through creating scenarios as to when and why the user would interact with the product. This can be done via simple sketches to map out various touch-points to complete a task

CREATING SCENARIOS

11

PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT Low fidelity prototypes were created to quickly produce and test some broad

concepts. They are meant to be simple, yet give a birds eye’s view of the product characteristics.

LOW FIDELITY PROTOTYPES

12

01

PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT After choosing a concept, an interactive wireframe prototype was made

allowing us to better plan for visual hierarchy, the intended user behaviour and over all user experience

INTERACTIVE WIREFRAMES

13

01

PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT A high fidelity visual design was created which emphasises on visual

aesthetics and overall look and feel of the product. A design system was also created to aid development.

HIGH FIDELITY DESIGN

14

01

PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT A responsive web dashboard was created to be used as an admin panel to

track client status. It is also the central dashboard through which marketing collateral can be distributed to users.

DASHBOARD DESIGN

15

01

PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT Users are asked to complete tasks, typically while they are being observed by

a researcher, to see where they encounter problems and experience confusion. If more people encounter similar problems, recommendations were made to overcome these usability issues

Usability testing is a way to see how easy to use something is by testing it with real users.

Moderated usability testing along with focus groups methods were used for app usability testing. Card sorting and tree testing were used to test the dashboard navigation and experience.

USABILITY TESTING

16

01

PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT Mobile app for iOS and Android platforms. A web dashboard admin panel was

created to manage data collation and collateral distribution

FINAL DELIVERABLES

17

01

PORTFOLIO 2019CASE STUDYTALENT DEKHO

CHALLENGE

Reduce drop-offs. Relook at user journeys. Improve user engagement. Highlight unique app feature “battles”

WORK DONE

• Setting goals & objectives • User research • User personas • Examine data • User journeys • Problem Statement • Design sprint • High fidelity re-design • Usability testing • Outcome

18Date: 2018 Platform: Mobile – Android.

PORTFOLIO 2019CASE STUDYTALENT DEKHO Goals and objective are best understood from key stakeholders involved. I

usually start by understanding what they see as the problem and what they envision the solution to be. For this projects, the goals and objectives were already set by the key stakeholders.

PROJECT OWNER: Superlative Talent Media Private Limited

WHAT IS THE APP ABOUT? Talent Dekho is a “video-first” B2C mobile platform that allows users to showcase their talent and represent local groups they belong to, using short videos online.

WHAT ARE THE GOALS? To be a top contender in the hyperlocal regional mobile app talent/entertainment category.

WHO ARE THE USERS OF THE APP? Primary user: Passive users Secondary user: Active creators


19

02


USER RESEARCH02

User research was split into three parts. 1. Understanding the team’s vision. 2. Data driven research on current consumption and creation patterns by existing users. 3. Interviews with potential users. All three sets of users were taken into account when conducting for this phase of the project.20


WHO THEY ARE

• Post Millennials • Gender: Male and female • Age: 14-25 • Education: School / Colleges goers

PAIN POINTS

• No regional platforms • Repetition of content • No online “Talent” platforms available • No online competition platforms available

WHAT DO THEY WANT

• Endless feed of videos • Social engagement with friends • Engaging content

THEIR MOTIVATION

• Entertainment • Curiosity • Peer support

WHAT APP DO THEY CURRENTLY USE

• Tiktok • Helo • Sharechat • Snapchat

USER PERSONAS

21

02

PASSIVE USERS – CONSUMER


PAIN POINTS

• No platforms showcasing “talent” as a forefront • Bandwidth usage • No regional platforms • No online competition platforms available

WHAT DO THEY WANT

• To showcase their talent • To be seen and appreciated • To be the next movie star / stage singer • To be an influencer in their community

THEIR MOTIVATION

• Monetary gains • Fame and recognition • Become a local celebrity • To compete and WIN

USER PERSONAS

22

02

ACTIVE USER – CREATOR


• Video editors • Tiktok • Helo

WHO THEY ARE

• Post Millennials • Gender: Male and female • Age: 14-25 • Education: School / Colleges goers

01 EXAMINE DATA02

APP LAUNCHED - DEC 2018 to JAN 2019

PORTFOLIO 2019CASE STUDYTALENT DEKHO23

Examining data and usage patterns give use a clear pictures of what users are doing, where and why. In this graph we see the number of times the app has been launched. It shows unique users as well as the event count, which in turns can give us an average event count per user.

02 EXAMINE DATA02

VIDEOS WATCHED - DEC 2018 to JAN 2019

PORTFOLIO 2019CASE STUDYTALENT DEKHO24 This graphs shows unique users who viewed videos on the app. We notice a

high drop-off percentage in users due to a cluttered user experience.

USER JOURNEYS02


A user journey indicates how the user what interact with the app, what are the touch points they would encounter and their journey to fulfil their end goal / objective. Here we look at the existing user journey for both consumer and creators and immediately notice the many touch-points before the user gets to experience the essence of the app.

25

CURRENT USER JOURNEY


PROBLEM STATEMENT

Poor navigation and user experience“ ”

26

02

01 DESIGN SPRINT02

PORTFOLIO 2019CASE STUDYTALENT DEKHO The Design Sprint framework is based on the understanding of Design

Thinking. Design Sprint is a five-day process for answering critical business questions through design, prototyping, and testing ideas with final users and customers; basically, a way to solve design problems quickly.

DESIGN SPRINT

UNDERSTAND

SKETCH

DECIDE

PROTOTYPE

VALIDATE

27

INTRODUCING THE METHODOLOGY

02

PORTFOLIO 2019CASE STUDYTALENT DEKHO A competitive analysis is a way to collect and compare data about products

(and companies) in the marketplace. This method is often used to highlight strengths and weaknesses of products in order to make more informed decisions about your product strategy.

Competitive analysis is an essential step in understanding other products that occupy the same market share. For this project, we did a competitor analysis on a few products i.e TikTok, ShareChat, Helo.

We used this research towards the following:

• An overview of the product landscape • User demographics • Lists of product features • Evaluation of visual design language • Voice, language, and content

02 DESIGN SPRINT

28

COMPETITIVE ANALYSIS

03 DESIGN SPRINT02

PORTFOLIO 2019CASE STUDYTALENT DEKHO New user journey’s were identified to provide a better user flow. The number

of touch-points were decreased enabling a user to perform a desired action with the lease amount of friction possible. The user was only asked to login when wanting to perform an action, unlike the previous version.

NEW USER JOURNEY

29

Low fidelity prototypes were created to quickly produce and test some broad concepts. They are meant to be simple, yet give a birds eye’s view of the product characteristics.

04 DESIGN SPRINT02



30

Based on the new findings, new interactive prototypes were made to test the user flow and validate the experiment. Feedback is a crucial part of this step as it will help refine and better the experience

05 DESIGN SPRINT02


INTERACTIVE WIREFRAMES – CONSUMER FLOW

31

02


06 DESIGN SPRINTINTERACTIVE WIREFRAMES – CREATOR FLOW

32 Based on the new findings, new interactive prototypes were made to test the user flow and validate the experiment. Feedback is a crucial part of this step as it will help refine and better the experience

07 DESIGN SPRINT02

PORTFOLIO 2019CASE STUDYTALENT DEKHO A design sprint was hosted with 5 key personal from the team, from varying

departments. This was done to provide clarity on the vision of the app and the way to take it forward. A design sprint will help with getting all stakeholders aiming for the same vision and goal.

RESEARCH CONCEPT PROTOTYPE DESIGN

UNCERTAINTY / PATTERNS / INSIGHTS CLARITY / FOCUS

33

HOW IT HELPED?

HIGH FIDELITY RE-DESIGN02

PORTFOLIO 2019CASE STUDYTALENT DEKHO A high fidelity visual design was created which emphasises on visual

aesthetics and overall look and feel of the product. A design system was also created to aid development.34

USIBILITY TESTING02


Usability testing is a way to see how easy to use something is by testing it with real users. 1on1, live beta testing and eye tracking heat maps were used for this project. Heat maps are a great way to test visual hierarchy and to understand what elements draw the most focus

01 OUTCOME02

PORTFOLIO 2019CASE STUDYTALENT DEKHO OUTCOME: A clear increase in the DAU and MAU. Apart from an increase in

users, the number of event per user also saw an increase. Day 1 retention increased by 20%.36

APP LAUNCHED - JAN 2019 to APRIL 2019

02 OUTCOME02


VIDEOS WATCHED - JAN 2019 to APRIL 2019

OUTCOME: The number of videos being watched per user increased by 40% after the design restructure.

03 OUTCOME02


NEW FEATURE LAUNCHED - BATTLES

38 OUTCOME: New app feature “BATTLE” was introduced and saw a steady growth and consistency in usage.

04 OUTCOME02


ENGAGEMENT & SHAREABILITY

39 OUTCOME: In app share-ability become more evident which in turn lead to an increase in user engagement

PORTFOLIO 2019CASE STUDYFLOCHAT

CHALLENGE

Re-design existing framework and introduce new audio and video features

WORK DONE

• Setting goals and objectives • Market research • User personas • Design evaluation • Low-fidelity prototypes • Interactive wireframes • High fidelity design • Usability testing • Final deliverables

Date: 2017 Platform Mobile – iOS & Android.

40

PORTFOLIO 2019CASE STUDYFLOCHAT Goals and objective are best understood from key stakeholders involved. I

usually start by understanding vision and of the product and how they see themselves are a disruptive force in the market.

PROJECT OWNER: Yagerbomb Media Private Limited

WHAT IS THE APP ABOUT? Flochat is a B2C evolved multi-messaging platform with unique audio and video technology for millennial users. It also integrates multiple platforms under a single framework enabling users to book a taxi, movie tickets or order food.

WHAT ARE THE GOALS? To develop patented audio and video technology for millennials

WHO ARE THE USERS OF THE APP? Primary user: Millennials


41

03


Conducting interviews is essential in gathering information. Knowing what questions to ask, when to ask them and when to listen is key

A deep dive user research analysis was conducted for this project. Methods such as field studies, behavioural analysis, online surveys, face to face interviews were used. Both qualitative and quantitative are important research methods to gaining a clear understanding of the market and its users.

RESEARCH INTERVIEWS03

To view more interviews please click on the links below. Interview 1 Interview 2 Interview 3 Interview 4 Interview 542

https://youtu.be/D1eayZv0ep8

https://youtu.be/HU0k5m8pRcE

https://youtu.be/_LcC5pb810o

https://youtu.be/-O4JK8uPtaM

https://youtu.be/BTRa_L2fCo8


WHO THEY ARE

• Millennials • Gender: Male and female • Age: 16-28 • Education: School / Colleges goers/First jobbers

PAIN POINTS

• Lack of regional filters • Limited mobile storage space • Convenience

WHAT DO THEY WANT

• Convenience • An integrated social platform • Fun filters • Sharable content • Privacy

THEIR MOTIVATION

• Entertainment • Vanity • Save storage space • Keeping up with the latest trends


• Snapchat • Instagram • B-612

USER PERSONAS

43

03

DESIGN EVALUATION

PORTFOLIO 2019CASE STUDYFLOCHAT44 In order to know whether your design is a winner, you need to understand the

elements of good visual communication and judge the design against those rather than abstract, gut feelings.

03

PORTFOLIO 2019CASE STUDYFLOCHAT Low fidelity prototypes were created to quickly produce and test some broad

concepts. They are meant to be simple, yet give a birds eye’s view of the product characteristics.


45

03

PORTFOLIO 2019CASE STUDYFLOCHAT After choosing a concept, an interactive wireframe prototype was made

allowing us to better plan for visual hierarchy, the intended user behaviour and over all user experience

INTERACTIVE WIREFRAMES

46

03

HIGH FIDELITY RE-DESIGN

PORTFOLIO 2019CASE STUDYFLOCHAT A high fidelity visual design was created which emphasises on visual

aesthetics and overall look and feel of the product. A design system was also created to aid development.47

03

A/B testing (also known as split testing or bucket testing) is a method of comparing two versions of a product against each other to determine which one performs better.

01 USABILITY TESTING


A/B TESTING

48

03

02 USABILITY TESTING


1on1

49

03

Usability testing is a way to see how easy to use something is by testing it with real users. 1on1 and Unmoderated Usability tests were conducted for this project. Unmoderated are quicker and usually do not come with a basis,

FINAL DELIVERABLES

PORTFOLIO 2019CASE STUDYFLOCHAT50 A high fidelity visual design system was created to restructure the user

journey and introduce new app features. Drop-offs decreased by 20% and user engagement increase by 45%.

03

THANK YOU!

www.designshisign.com

[email protected]

linkedin profile

PORTFOLIO 2019CASE STUDIESUSER INTERFACE & EXPERIENCE DESIGN

http://www.designshisign.com

mailto:[email protected]

http://www.linkedin.com/in/yuvraj-bhalla

USER INTERFACE & EXPERIENCE DESIGN CASE STUDIES PORTFOLIO … · 01 DESIGN SPRINT 02 PORTFOLIO 2019...

Documents

Transcript of USER INTERFACE & EXPERIENCE DESIGN CASE STUDIES PORTFOLIO … · 01 DESIGN SPRINT 02 PORTFOLIO 2019...