Sarang
Shukla
I submitted this concept for a research organisation in Scotland currently researching and developing a product to improve mental health and the sleep quality by treating Seasonal Affecting Disorder.
An app to Improve sleep & to control eye mask that cures
Seasonal Affective Disorder
Mapping With Design Process
MATARIALISE
EXPLORE
UNDERSTAND
Empathise
Business Goal
& Requirenment
Problem
Statement
Stakeholder
Interview
Competitive
Benchmarking
Define
Information
Architecture
Pain Points
& User Aims
Persona and
user Journey
User Flow
& Task Flow
Ideate
Paper Sketch/
LowFie Wireframe
Highfie
Wireframe
Design
Iteration
User
Testing
Prototype
Functional
Prototype
Visual
Design
Design System
Visual Assets
Mockups / Design Documentation
Test
Design Iterations
for Improvements
Design
Discussion
User Testing
& AB Testing
Feedback
Analysis
Impliment
DevGromming Session
UX/UI Audit of Development
Development
Support
Design Asset
Preparation
Kickstart Project
Pain Points -
User BASE
-
Primary User-
-
These are the people suffering from Sessional Affective Disorder. and using and controlling the product (eye mask) from the mobile application.
-
-
Secondary User-
-
User suffering from the sleeping problems or suffering from the stress in life and looking for a mental peace and nirvana.
-
-
Tirtiary User-
-
Business people who collaborate with the platform inorder to provide their services like online yoga classes, mentalist who provide digital consultation.
-
Background Research
"Design a campaign to raise fund in-order to continue research and build an eye were product which can cure seasonal affective disorder and can improve sleep quality." A business Goal with a problem statement was given to me as a part of my masters UXD program. I decided to submit a professional case study by implementing end to end professional UX process and prepared a set of questions and asked my mentor to schedule a meeting with the client.
Defining Persona
I defined 5 persona based on the user research and stakeholder interviews to show case what is required as a-digital platform that can serve the needs and capable of addressing the pain points of all the Direct and Indirect users.
-
Stakeholder (Research Team and Investors)
-
Persona 1, Researchers
-
Persona 2, A business man.
-
-
User Segment (End User)
-
Persona 3, Old Women suffering from SAD.
-
Persona 4, Young Working Mom.
-
Persona 5, Yoga GURU looking for a platform to provide online classes
-
Defining Problem
During the Q/A session with Professor Stephan Westland we defined below problem statements.
-
Apart from the user who is suffering from SAD who else can be the potential user of product?
-
How to increase product awareness to create future demand of the eye mask?
-
Eye mask should be soft & comfortable and user can operate it with the mobile application.?
Competitive BENCHMARKING
-
Sleepmaskz
-
Dreamlights.
During the stakeholder interview i asked about competitors who are providing the same set of services or if they are inspired by any mobile app or website which is closer to the idea what they have in mind and thats how i got to know two major competitors.
I did a complete heuristics evaluation of both the competitors in order to know do's and dont's and what could be the key takeaways in order to build a better digital solution.
Campaign Design PROPOSAL
After having a good understanding on the clients requirements that came out during the UX research phase i proposed below ideas to launch a digital campaign to raise the eye were product awareness and to raise the funds to continue research on the product.
-
Digital Marketing on social networking sites.
-
Physical Kiosk to advertise the products in railway station and public gathering places like malls, petrol stations, hospitals etc.
-
Responsive WebSite to attract investor as well as for product marketing and raising funds by educating users about the benefits and by creating empathy.
-
An engaging mobile application with business and user enabled features.
Stakeholder Interval
-
Prepared a set of questionnaire to know bout business requirenemt, potential users, helped me to establish the foundation of the project.
-
It gave me insights such as business goals, technical constraints, usability problems, and it helped me to think about what all personas should i consider. what competitors i have to study etc.
-
Conducted interview via teems & google meet.
I scheduled a meeting with the client to know more about the expectation and to get an insights about the key stakeholder of the projects and i prepared my question for
-
Primary Stakeholder (Research Team)
-
Secondary Stakeholder (Investors)
Interview Q/A Session
-
First I Scheduled Interview with research team (Clients) to know about user base
-
After analysing the answers i defined the user base and and persona and prepared questionnaire for primary users by talking to people around me i identified suitable persons to consider them for user interviews to know there pain points and aims.
Customer Journey Mapping
Based on the user research and interviews i created customer journey of primary personas potential users of the app it helped me to understand users pain points and aims, how and when user will interact with the product. It also highlighted the potential digital touch points in users day to day life.
Competitive Benchmarking
During Interview client mentioned about two competitors who are providing the similar services by promoting and selling product online. I did heuristics evaluation of there websites. i analysed and studied what features they are offering and made al list of key takeaways and design mistakes not to repeat in order to build a better website and app which serves seamless User Experiences.
Few glimps of heuristics evaluation
Competitor 1
Competitor 2
Benchmarking Output Matrix
Usability
Aesthetics
Visual Hirarchy
IA
User Centricity
Navigation
Affordance
Keytakeways
Mistakes not to repeat
-
All products at one page .
-
Global Search option at global navigation.
-
User can buy easily from website
-
Products are nicely categorised.
-
All products at one page .
-
Global Search option at global navigation.
-
User can buy easily from website
-
Products are nicely categorized as mindful breathing, Heat & better and darkness matter.
Usability
Aesthetics
Visual Hirarchy
IA
User Centricity
Navigation
Affordance
Keytakeways
#Minimal Design & Show key information
-
Will Reduce cognitive load.
-
Proper use of white space
-
Most searched results.
-
Highlight user’s current location
#Good use of typography.
#Help/Assistance & Navigation
-
Categorized FaQ.
-
Contact and Support.
-
Highlight User Location.
-
Breadcrumbs.
Information
ARCHITECTURE
As per features that came out during benchmarking and interviews i started drafting the basic IA of the application which helped me to prepare the first draft of wireframes with the right logic as per the user flows. Later i did a small round user testing to check weather user can perform the task and find the content without any confusion and with few iterations i finalised the IA.
To minimise the turn around time and to get first user feedback I started white boarding the screens and presented the prototype with minimal changes i was able to move quickly to hi-fidelity wireframes
LOW FIDELITY WIREFRAMES
Conceptualisation
After couple of wireframe iterations IA and user flow and and scenarios are freezed, I proceeded with UI design the final screens in Figma, by following the brand guidelines and the design system.
FINAL APPLICATION UI MOCKUPS
Visual DESIGN
Building PERSONA
After carefully studying the user segments and stakeholders I defined 5 persona to show case user needs and Pain points.
-
Stakeholder (Research Team)
-
Persona 1, Researchers
-
-
User Segment (Investors)
-
Persona 2, A business man.
-
-
User Segment (End User)
-
Persona 3, Old Women.
-
Persona 4, Young Working Mom.
-
Persona 5, Curious User.
-
User & Task Flows
Once i validated customer journey with the clients, I created task flow and user flows for the primary user keeping the feature set in mind. It helped me to think about the logical flow of the application and how user can perform the intended task and use case scenarios by taking different decisions at certain points.
Usability Testing
-
Created prototype of the visual screens and conducted user testing session on google meet.
-
Prepared a set of task based scenario oriented questions to check users behavioral and emotional feedback
1. Defining Tasks
2. Facilitate
4. Test Report
3. Observe
I prepared questions to complete the primary task of the users.
Participants were briefed about the test and screens were recorded with their consent. Scenarios were given to observe how user complete the given task.
During the session, user navigation and user interaction with the prototype flow and their feeling about the UI and flow were thoroughly observed.
I prepared the notes about the individual user feedback observations, recommendation and did the changes in final visual mockups.
Usability Testing Process
Participant Segmentation
Suffering from insomnia
Young Mother
1
client and Professor
Research Team
Suffering from SAD
1
Old Lady
2
View Other Case Studies
Derived Product FEATURE SET