user interface & experience design case studies portfolio … · 01 design sprint 02 portfolio...
TRANSCRIPT
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
PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT
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
PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT
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
PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT
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
PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT
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
PORTFOLIO 2019CASE STUDYTHE HIRANANDANI SELECT
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
SETTING GOALS AND OBJECTIVES
19
02
PORTFOLIO 2019CASE STUDYTALENT DEKHO
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
PORTFOLIO 2019CASE STUDYTALENT DEKHO
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
PORTFOLIO 2019CASE STUDYTALENT DEKHO
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
WHAT APP DO THEY CURRENTLY USE
• 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
PORTFOLIO 2019CASE STUDYTALENT DEKHO
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
PORTFOLIO 2019CASE STUDYTALENT DEKHO
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
PORTFOLIO 2019CASE STUDYTALENT DEKHO
LOW FIDELITY PROTOTYPES
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
PORTFOLIO 2019CASE STUDYTALENT DEKHO
INTERACTIVE WIREFRAMES – CONSUMER FLOW
31
02
PORTFOLIO 2019CASE STUDYTALENT DEKHO
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
PORTFOLIO 2019CASE STUDYTALENT DEKHO35
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
PORTFOLIO 2019CASE STUDYTALENT DEKHO37
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
PORTFOLIO 2019CASE STUDYTALENT DEKHO
NEW FEATURE LAUNCHED - BATTLES
38 OUTCOME: New app feature “BATTLE” was introduced and saw a steady growth and consistency in usage.
04 OUTCOME02
PORTFOLIO 2019CASE STUDYTALENT DEKHO
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
SETTING GOALS AND OBJECTIVES
41
03
PORTFOLIO 2019CASE STUDYFLOCHAT
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
PORTFOLIO 2019CASE STUDYFLOCHAT
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
WHAT APP DO THEY CURRENTLY USE
• 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.
LOW FIDELITY PROTOTYPES
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
PORTFOLIO 2019CASE STUDYFLOCHAT
A/B TESTING
48
03
02 USABILITY TESTING
PORTFOLIO 2019CASE STUDYFLOCHAT
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
linkedin profile
PORTFOLIO 2019CASE STUDIESUSER INTERFACE & EXPERIENCE DESIGN