User Experience and Visual Identity For Lechal | Diploma Document 2013

134
STUDENT : SURABHI MANCHALWAR PROGRAMME : Under-Graduate Diploma Programme DIPLOMA PROJECT USER EXPERIENCE AND VISUAL IDENTITY FOR LECHAL Sponsor : Ducere Technologies, Hyderabad GUIDE : RUPESH VYAS COMMUNICATION DESIGN FACULTY ( GRAPHIC DESIGN) National Institute of Design Ahmedabad 2013

description

A detailed documentation of my final graduation project done at Ducere (Hyderabad).

Transcript of User Experience and Visual Identity For Lechal | Diploma Document 2013

Page 1: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR | GRAPHIC DESIGN 2009 | UGPD 08

STUDENT : SURABHI MANCHALWAR

PROGRAMME : Under-Graduate Diploma Programme

DIPLOMA PROJECT

USER EXPERIENCE AND VISUAL IDENTITY FOR LECHAL Sponsor : Ducere Technologies, Hyderabad

GUIDE : RUPESH VYAS

COMMUNICATION DESIGN FACULTY ( GRAPHIC DESIGN)

National Institute of DesignAhmedabad

2013

Page 2: User Experience and Visual Identity For Lechal | Diploma Document 2013
Page 3: User Experience and Visual Identity For Lechal | Diploma Document 2013

The

Eval

uati

on J

ury

reco

mm

ends

MU

RALI

KRI

SHN

A M

ENO

N f

or t

he

D

iplo

ma o

f th

e N

ati

onal

Inst

itute

of

Desi

gn

IN V

ISU

AL

COM

MU

NIC

ATI

ON

(TO

Y D

ESIG

N &

DEV

ELO

PMEN

T)

here

wit

h, f

or t

he p

roje

ct t

itle

d "

USE

R EX

PERI

ENCE

AN

S V

ISU

AL

IDEN

TITY

FO

R LE

CHA

L "

on f

ul!

lling

the

fur

ther

req

uire

men

ts b

y *

Chai

rman

Mem

bers

:

*Sub

sequ

ent

rem

arks

reg

ardi

ng f

ul!

lling

the

req

uire

men

ts :

Regi

stra

r(A

cade

mic

s)

Page 4: User Experience and Visual Identity For Lechal | Diploma Document 2013

I hereby declare that this submission is my own work and it contains no full or substantial copy of previously published material, or it does not even contain substantial proportions of material which have been accepted for the award of any other degree or diploma of any other educational institution, except where due acknowledgement is made in this diploma project. Moreover I also declare that none of the concepts are borrowed or copied without due acknowledgement. I further declare that the intellectual content of this Diploma Project is the product of my own work, except to the extent that assistance from others in the project’s design and conception or in style, presentation and linguistic expression is acknowledged. This diploma project (or part of it) was not and will not be submitted as assessed work in any other academic course.

Student Name in Full:

Signature:

Date:

ORIGINALITY STATEMENT

Page 5: User Experience and Visual Identity For Lechal | Diploma Document 2013

I hereby grant the National Institute of Design the right to archive and to make available my diploma project/thesis/dissertation in whole or in part in the Institute’s Knowledge Management Centre in all forms of media, now or hereafter known, subject to the provisions of the Copyright Act, only after Lechal Insoles and the Lechal Android Application are launched. I have either used no substantial portions of copyright material in my document or I have obtained permission to use copyright material.

Student Name in Full:

Signature:

Date:

COPYRIGHT STATEMENT

Page 6: User Experience and Visual Identity For Lechal | Diploma Document 2013
Page 7: User Experience and Visual Identity For Lechal | Diploma Document 2013

Firstly, I would like to thank National Institue of Design for the education and exposure I recieved in the last four years. I would like to express my gratitude for all the people who helped me make this project possible.

My Project Sponsors, Ducere Technologies, for believing in me and for giving me this opportunity and. Krispian Lawrence (CEO of Ducere Technologies), for being so understanding,patient and for always respecting the design processes and the methodology I followed. Venkat Rao, for his motivation and guidance throughout my project.

My Project Guide, Rupesh Vyas, for his insightful feedback, motivation and guidance. I would like to thank Suresh Immanuel, Tarundeep Girdher, Tridha Gajjar, Anil Sinha and other Graphic Design faculties for their timely guidance and feedback through the years.

At Ducere, the Design team- Venkat, Abhisek, Jyoti, Tejas & the Engineering Team- Vinod, Ameya, Pavan, Dp, Vijay, Sukanya, Suresh, for sharing their knowledge and lovely experiences. Johan and Aisha for their help with all the paper work and for taking care of the stationary logs; Swaroopa for the refreshing coffee and lunch breaks and for greeting me adorably every morning.

I would specially like to thank Jyoti Anand, for approaching me for the project and for bearing with my amateur cooking and also consuming my non edible rotis with a smile. Sukanya Venkatram for the daily Pani Puri-Sneakers breaks, Tejas Rode for all the knowledge and experiences that he has shared with me and

ACKNOWLEDGEMENTbeared with my obssessive need to organise and keep things neat. Gaurav Duggal for always entertaining us with his informative and yet, ‘ozzum’ videos.

Among friends, I am grateful to, Vidushi Singh, Rahul Sahu, Devanshi Saksena, Asmina Shaikh and Mohita Janabandhu for being my support pillars always and motivating me thorught. I would also like to thank Ankit Kumar, Aman Thanaram, Prayas Rokde, Mrunmayee Namjoshi and Kanishka Kumari for making my guide visits comfortable and memorable, my Graphic design Batchmates and seniors for being friends and mentors unlike any others.

I would specially like to thank the Saksena Family for all the love and for always making it feel like home, Sushma Aunty and my friend Devanshi for all the motivation and support during the documentation process.

I would like to acknowledge my family for all the love, support and blessings. I would like to thank my Aai, for being the source of my ‘energy’ and Papa, for being so calm and patient everytime I called him frantically with problems and for helping me solve each one of them, Rachit for being the most awesome entertainer, mood changer and an amazing sibling.

THANK YOU.

Page 8: User Experience and Visual Identity For Lechal | Diploma Document 2013
Page 9: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN

National institute of design (nid), established in 1961, is internationally acclaimed as one of the foremost multi- disciplinary institutions in

an autono- mous body under the department of industrial policy & promotion, ministry of commerce & industry, government of india.

The institute currently consists of three campuses, each hosting separate courses:

established on 19 july 2004 to move the postgraduate courses from the heritage campus

Paldi, AhmedabadIndia

Rupesh Vyas is a Senior Faculty in Communication Design, Head of Information Technology at NID. In recent past he has been also Coordinator of Graphic Design and Information and Digital Design. He is taking lead role in developing Information and Interaction Design as emerging domain under Communication Design and IT Integrated Design Disciplines at NID. He has special interest in strategic design innovations

Senior Faculty, Communication DesignHead Information TechnologyNational Institute of Design

MY GUIDE | RUPESH VYAS

I am an undergraduate Graphic Design student from the National Institute of Design interested in visual communication. I have a special interest in illustration, publication design, branding and information architecture. I am extremely passionate about music and food.

MYSELF | SURABHI MANCHALWARGDPDGraphic Design (2009)National Institute of Design

ABOUT

Page 10: User Experience and Visual Identity For Lechal | Diploma Document 2013

DUCERE TECHNOLOGIES

Ducere was started in 2011, by two tinkerers and friends, whose passions were to contribute to this world. At Ducere, Anirudh and Krispian came upon an idea that would take the world by storm. Graduates from MIT and the University of Michigan, Ann Arbor, these two individuals love to experiment with design and engineer products. Their innovative strategy is that their products are intuitive, non-obtrusive, and easy on the pocket. Today, Ducere and LeChal has been recognized globally as a pioneer and an innovative brand in wearable technology. Where affordability,

your needs are developed. They have a strong team of people who are passionate about what they do and are working hard to strive to bring a change and a paradigm shift into how things work.

(Left) Krispian Lawrence, Co-founder & CEO(Right) Anirudh Sharma, Co-founder & CTO

DUCERET E C H N O L O G I E S

Ducere believes that technology should integrate into one's life without the hassle of a being a device. They continuously envision new ideas and develop user friendly technologies for people from all walks of life. Theyhave a line-up of amazing products that perfectly embody fashion, design, and technology.

PROJECTSPONSORS

Page 11: User Experience and Visual Identity For Lechal | Diploma Document 2013

The work culture in Ducere is very different than places I have worked before. It has a mixture of proffesionals and student interns from different engineering and design backgrounds. The only thing common in them is all of them strive to innovate. They dont work, they tinker.

very brilliant ideas are born while the team relaxes with a indoor cricket match or a jamming session on a warm afternoon. Brainstorming sessions

was quite encouraging and helpful.

encouraging children to tinker and innovate. In these workshops, children get basic lessons about Ardinos, basic electronics, design thinking, product design, etc. The kids are then set free to create whatever they want to with these skills and understanding. This results in some very creative and smart products that the children come up with on their own. This kind of an experienced based learning is what Ducere aims at. This theory not only works for kids, it also works the other way around. At any

code or making a new product just for fun!At Ducere one can feel free to express their wacky ideas and concepts. Every idea is given equal encouragement and respect.

WORK CULTURE AND TINKERING

Page 12: User Experience and Visual Identity For Lechal | Diploma Document 2013

CONTEXT

Ducere Technologies is an innovative start-up that has introduced various ground breaking innovations for which it has gained tremendous recognition. Their innovative strategy is that their products are intuitive, non-obtrusive, and easy on the pocket.They have a strong team of people who are passionate about what they do and are working hard to strive to bring a change and a paradigm shift into how things work.

BACKGROUND STUDY

Le Chal is an interactive footwear for people from all walks of life. Any smartphone running the voice enabled Le Chal app connects with Le Chal via Bluetooth. Set or speak your desired destination in the phone and you are good to go. The shoe (right or left) where the vibration is felt indicates which way to go. Though initially designed with the visually challenged in mind, Le Chal can be used by anyone. Currently, in the process of being tested at the world renowned L.V. Prasad Eye Institute, in

SCOPE OF WORK

Developing the graphics and branding for the Le Chal Footwear product line.

Research Phase I : 1 week

Research Phase II : 1 week

Conceptualisation - Identity: 2 weeks- Case studies- Concept Generation- Concept Visualisation - Identity: 6 weeks

- Concept Finalisation- Concept Validation

- Colour

Conceptualisation and Visualisation: 6 weeks -Website Layouts-App Layouts-Promotional Material-Infographics-Identity Extensions

METHODOLOGY AND TIMELINE

PROJECTPROPOSAL

DELIVERABLES

IdentityBranding and CollateralsLe Chal App LayoutsPromotional MaterialInfographics

Page 13: User Experience and Visual Identity For Lechal | Diploma Document 2013

the visual identity design for Lechal, a wearable technology brand which is an offshoot of the mother company Ducere Technologies. Lechal is

under the brand name Lechal. This meant that a clearler picture for the brand architecture was needed. This is one of the main problem areas

team at Ducere understand the brand that Lechal is. Once this was done, the brand personality was developed and nurtured. Every aspiration and vision that Kris had for the brand was paid attention to. Afterall, we were together giving birth to a new brand. Fashion or wearable technology is a relatively new and innovative domain of technology and lifestyle. Once the foundation was set, I worked on the Visual Identity for the brand.

The second and more intense part of my project was to design the user experience and interactions for the Lechal Android Application. The design process for this assignment was very precise and detailed. I worked closely with Tejas Rode, an interaction designer from IIT Guwahati.

essential parts of our design process. Developing an application for the smartphone, but for the blind seemed like a challenge in the beginning. But this constraint lead to the opening up of a lot creative solutions and implementation of design thinking.

PROJECTSYNOPSIS

Page 14: User Experience and Visual Identity For Lechal | Diploma Document 2013

In a ground-shattering innovation that revolutionized the way people perceived the blind world, an IT engineer from Rajasthan Technical University, Anirudh Sharma, has designed a shoe for the blind as an attempt to facilitate their transition towards normalcy: Le Chal. The

boundaries for the visually challenged all over the world by pragmatically

Workshop hosted at COEP, and was featured in MIT review in August 2011. The blind needn't do anything more than simply orally relay their commands regarding the destination and the android device takes care of the navigation. The pioneering mind of Anirudh Sharma that is to be credited for the success of Le Chal works with the motive of empowering the blind to ascend to a whole new platform of not only liberation from their physical dependence, but also societal acceptance.

THE IDEAFOR LECHAL

Visually impaired people suffer greatly when it comes to mobility and they have to depend on someone for directions or to alert them to obstacles. Even a walking stick can only be of limited help. So how about a shoe that can help people go places? Lechal is a footwear that connects with your smartphone, and guides you to your destination through vibrations that are intuitive and non-obtrusive. Initially designed for the visually challenged, LeChal has quickly transformed itself into a brand of interactive footwear for people from all walks of life.

Le Chal, means “take me there” in Hindi. The team from Ducere are working

problems that the blind usually face when they navigate is orientation and direction, as well as obstacle detection. They’ve crafted the

by the shape of the footwear, and it vibrates to guide the user. LeChal Lite is a sleek pair of insoles that can be inserted into any footwear. Designed to accompany the cane, LeChal Lite overcomes two primary drawbacks of the white cane i.e. orientation and navigational directions It’s so intuitive that if I tap on your right shoulder, you will turn to your right; if I tap on your left shoulder, you turn to your left.

LeChal+ are boots made for much more than walking. Designed to perfectly complement the white cane, LeChal+ are shoes that assist you with navigation, orientation, and obstacle detection. The team believes that this product will not just be helpful for blind users, but also engaging and fun to interact with for sighted people. Both the shoe and the insole are equipped with high end technology that assists the user in navigation, orientation and commuting. Currently, in the process of being tested at the world renowned L.V. Prasad Eye Institute, in Hyderabad,

Page 15: User Experience and Visual Identity For Lechal | Diploma Document 2013

Le chal takes us one step closer to a utopian society where the blind can lead their lives with ease and comfort.

Page 16: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Introduction

Project Overview

VISUAL IDENTITY

1.0 Information Collection

2.0 Analysis And Synthesis

4.0 Concept Generation and Finalisation

CONTENT

19

29

42

Page 17: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 17

USER EXPERIENCE

5.0 Information Collection 2

7.0 Story Boarding

8.0 Rapid Prototyping

10.0 Wireframing

Conclusion And Learning

Bibilography

75

95

105

109

129

Page 18: User Experience and Visual Identity For Lechal | Diploma Document 2013

VISUAL IDENTITYFOR LECHAL

Page 19: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 19

1 INFORMATIONCOLLECTION 1

1. Developing a common vocabulary

4. Analysis of Existing Logo

2. A brand and its components

Page 20: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Engineers speak a totally different language than what designers speak. Theirs is fairly technical and logical, while designers speak a language

common vocabulary that would help us communicate ideas to each other. Communicating the intricacies of design thinking and branding to a bunch

we started understanding each others ways.I started by expaining my methodology and sharing my timelines with the team. As most of the team members were not acqauinted with the design

team. On the other hand, the lechal team expained to me about the past work done on the product and current enhancements that are being done. This information was quite technical with some concepts which I was not aware of. Hence, I decided to do a small research on these subjects to have a better understanding of the product.

1.1 DEVELOPING ACOMMON VOCABULARY

Haptic technology, or haptics, is a tactile feedback technology which takes advantage of the sense of touch by applying forces, vibrations, or motions to the user. This mechanical stimulation can be used to assist in the creation of virtual objects in a computer simulation, to control such virtual objects, and to enhance the remote control of machines and devices (telerobotics). It has been described as "doing for the sense of touch what computer graphics does for vision". Haptic devices may incorporate tactile sensors that measure forces exerted by the user on the interface.

WEARABLE TECHNOLOGY

Wearable technology, tech togs, or fashion electronics are clothing and accessories incorporating computer and advanced electronic technologies. The designs often incorporate practical functions and features, but may also have a purely critical or aesthetic agenda.

and the history and development of wearable computers. With present computing, wearable technology share the vision of interweaving technology into the everyday life, of making technology pervasive and interaction frictionless. Through the history and development of

The decreasing cost of processing power and other components is encouraging widespread adoption and availability.

HAPTIC TECHNOLOGY

Conc

epts

I le

arnt

Page 21: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 21

1.2 A BRAND &ITS COMPONENTS

WHAT IS A BRAND?

To understand branding, it is important to know what brands are. A brand is the idea or image

connect with, by identifying the name, logo, slogan, or design of the company who owns the idea or image. Branding is when that idea or image is marketed so that it is recognizable

certain service or product. Branding not only to builds brand recognition, but also builds good reputations and a set of standards to which the company should strive to maintain or surpass.

WHAT IS AN IDENTITY?

One major role in brand image of a company is its identity. Mostly, identity design is based around the visual devices used within a company, usually assembled within a set of guidelines. These guidelines that make up an identity usually administer how the identity is applied throughout a variety of mediums using appropriate colour palettes, fonts, layouts, etc. These guidelines ensures that the identity of the company is kept coherent, which in turn allows the brand as a whole to be recognisable.

An identity can be :The logo StationaryMarketing collateralsApparel designSignageMessages and actionsOther communicationsAnything visual that represents the business

WHAT IS A LOGO?

A logo is a perspicuous glyph or symbolic, identifying mark that conveys origin, identity, or ownership. The main function is to draw out recognition. The object of a logo is to act as a

a desired thought or feeling, and to generate a desired emotional response. A thought-provoking logo design can strengthen your brand image and corporate identity, giving you a psychological advantage over your competition. Your logo is the core of your corporate identity,

company or organization.

Page 22: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

WHAT ARE THE DIFFERENT TYPES OF LOGO DESIGN?

ICONIC/SYMBOLIC

They use imagery that conveys a literal or abstract representation of your organization. Symbols are less direct than straight text, leaving room for broader interpretation of what the organization represents. Icons and symbols are compelling yet uncomplicated images that are emblematic of a particular company or product. In order for a symbol to be a truly effective logo, it should conform to these maxims:

Instantaneously recognizable.Memorable.Clarity when reproduced in small sizes.Can be illustrative in nature, either concrete or abstract.

LOGOTYPE/WORDMARK

Also known as a “Word mark", a Logotype incorporates the brand name into a uniquely styled typeface treatment. Every typeface conveys a slightly different impression upon the intended audience. Typeface treatments can also include hand-drawn letters, characters or symbols that have been rendered in such a way as to intrigue the eye and capture the interest. Images can also be integrated into a logotype, often to great visual effect. Of prime consideration when selecting a logotype or wordmark is legibility and ease of recognition, even when reduced to the size required for printing your business cards.

COMBINATION MARKS

brand image one wishes to project for their company or organization. Concise text can complement an icon or symbol, providing supplemental clarity as to what the enterprise is all about.There are integrated and stand alone combination marks. For instance, Starbucks logo has the text with the graphic integrated, whereas the AT&T logo has the icon separate from the text.

WHAT IS A GOOD LOGO?

What makes a good logo? A good logo is distinctive , appropriate, practical, graphic, simple in form and conveys an intended message.

An affective logo is SimpleMemorableTimelessVersatile

Page 23: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

FOOTWEAR BRAND LOGOS

NIKE

Simple ‘swoosh’A shape that connotes both movement and forcefulness.Nike obviously wants this image, because their motto “just do it” communicates the same sentiment. Appropriate and recognizable worldwide.

ADIDAS

Simply a mountain-like triangle made of three bold shapes. The triangle is the strongest shape in geometry Mountains imply strength and achievement. Simple, bold logo

PUMA

Incorporates its name into its logo, although in a more obvious way. A puma in mid-jump. Accurately captures the cat’s feeling of movement and strength. Overly simpleRecognizable brand Simple and timeless.

CROC’S

Logo is timeless. Croc’s are thus named because they are tough and water resistant. Crocodiles are known for being aggressive and dangerous, this can be an especially

for a company that is family-friendly. Only the crocodile’s smiling head is shown, ina friendly manner.

1.3 CASE STUDIES

Page 24: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Most of the logos are either combination marks or logotypes.Brands that focus more on the technology aspect have very simple sans serif typefaces.On the other hand, brands which want to portray their brand as fashionable use a mixture of modern serif and clean san serifs.

WEARABLE TECHNOLOGY BRAND LOGOS

Page 25: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 25

SPORTS BRANDS

Sports brands generally use combination marks as logos.Red and blue are dominant colors over all brands.Logotypes use Modern San Serifs or Geometric and slab serif fonts.

Page 26: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

FASHION BRANDS: COMBINATION MARKS

Fashion Labels that use combination marks generally use modern serifs mostly.Most of the brands are named after designers and the logotype is in all caps very often.Logo’s of fashion brands are generally single coloured as that can

Page 27: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 27

These brands generally use modern serifs with a high contrast in the strokes.San serif typefaces are stylised to break the monotony.

FASHION BRANDS : LOGOTYPE

Page 28: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Uses devanagri handlettering style.Use of ligatures.Devanagri letter ‘cha’ used in the logotype.Baseline is not strong.

Individual characters look broken.

1.4 ANALYSIS OFTHE EXISTING LOGO

A screenshot from the promotional video from www.duceretech.com

Page 29: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 29

2.0 ANALYSIS &SYNTHESIS

1. Scenario Building

5. Sports Vs Fashion Brands

6. Brand: Ambition + Action + Impact

8. Factors affecting the Logo

7. Analysing the Brand Name

9. Selecting the type of Logo

Page 30: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

BRAND WORKFLOW

basic keywords and questions.

2.1 SCENARIO BUILDING

Page 31: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

I met Krispian Lawrence, one of the CEO's of Ducere

Lechal and the footwear product to me. This made it clear that Lechal was not just a footwear brand, but a new brand under Ducere that would deal with all kinds of wearable technology products. This changed my perception of the brief and the scope of work to be done entirely. I worked out a brand

his perception of the brand, preferences, references, materials, production, etc.

2.2 REDEFINED BRIEF

Page 32: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

From the initial discussions with Kris and other team members, I came up with a set of keywords for the brand. These keywords were then expanded, cross linked and eliminated.

2.3 KEYWORDGENERATION

Page 33: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

Page 34: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

To be recognised as a Wearable Technology Brand all over the world.Insight driven product developmentDiverse Product PortfolioTo deliver innovative product solutions that enable people to realise their potential thorugh the application of technolgy.

Lechal’s products will help people stay connected to eachother, activites and things they love.Not let technology overpower the brand as technolgy exists to serve people ans not the other way around.‘People Inspired Products’New logo should symbolise Lechal’s commitment to take inspiration from people and acknowledges the connection between people and the experiences they value the most.

ACTIVESTRONGENERGETIC

AMBITION

ACTION

IMPACT

Based on the keyword generation process, I shortlisted few keywords and developed this brief case study of Lechal. It is a outcome based on the aspirations that Krispian has for the brand, the pathbreaking product line up and the hardworking team and their commitment towards innovation.

2.5 LECHALCASE STUDY

Page 35: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

The identity of any brand will only be effective if the logo is used correctly in all of its collaterals and products. As Lechal was a wearable technology brand, it had a lot o variation in the material of the collaterals

the different ways in which the logo will be used and what oter factors like material, color and size of the collateral that will will have to be considered while designing the identity.

2.6 FACTORS AFFECTINGTHE LOGO

Page 36: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

The Lechal team had a couple of intense discussions and brainstorming sessions about the kind of brand that we aspire Lechal to be and what kind of a logo will suit its purpose the best. After a lot of pondering, the team decided to that a combination mark would be a good choice for the following reasons:

Lechal has gained worldwide recognition for the pathbreaking product that it is going to launch. Although it needs recognition and remembrance by the potential users as a wearable technology brand. The word ‘Lechal’ needs to be emphasised enough to make a mark on the user’s mind.An icon is also as important for the Brand Lechal as is its name. The products that Lechal plans on launching, vary drastically in sizes. It wont be feasible to incorporate the Logotype alone on smaller sizes. Also, an Icon is much easily registered in one’s mind than text alone.

2.7 TYPE OF LOGOFOR LECHAL

Page 37: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

3.0 IMAGE COLLECTION

1. Color

2. Visual Language

Page 38: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

3.1 IMAGE COLLECTIONCOLOR

Page 39: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 41

3.2 IMAGE COLLECTIONVISUAL LANGUAGE

Page 40: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

4.0 FORMGENERATION

1. Form Explorations

5. Typography

2. Idenity Routes

7. Final Visual Identity

Page 41: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

INITIAL EXPLORATION BASED ON KEYWORDS

The form generation process went hand in hand with the information collection process. As and when I would get inspired or get keywords

graph sheets. Concepts were then approved by Krispian and I would take

of iterations in terms of conceptualisation, varitation in forms and also sometimes this process made us rethink on the perception of the brand.

4.1 FORMEXPLORATIONS

LC EXPLORATIONS

I started looking at every single letterform of the word lechal and started creating forms with these letters and some with combinations of these letters like 'Le' and 'Lc'.

Page 42: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

LE : DIFFERENT MEDIUMS

LC EXPLORATIONS

Page 43: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 45

EACH LETTER AT A TIME

Page 44: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

EXPERIMENTING WITH GRIDS

Once the concept was decided, I started thinking about all the various application and collaterals. After looking at the various applications like small electronic gadgets, fabric products etc, I thought making the form modular or grid based would help keep the interactions with these products interesting and engaging. For example, if the icon is grid based, the charging levels on a charger could be shown by lighting up the small units of the identity. Below are few examples of the explorations that were made. But later this idea was not taken forward as this would distort the perception of the brand and the logo in the user’s mind. Looking at a half lite logo is not very appealing.

Page 45: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 47

This was a very important exercise that I did. All the concepts made in the previous stage were collected and reviewed by the team members. Notes were taken down regarding forms and concepts. Finally a couple of concepts and forms were selected to be taken forward.

FORM SELECTION 1

Page 46: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Most of the forms that were selected

very engaging, clean, easy to interpret and

dynamic.The forms nontheless

needed a lot of

but this was a good way of reviweing what the team wanted logo

brand.

SELECTED FORMS

Page 47: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 49

VECTORISATION OF SELECTED FORMS

Page 48: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Page 49: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 51

TECHNOLOGY BRAND

HAPTIC FEEDBACK

VIBRATIONS

DOTS

WEARABLE TECHNOLOGY + FASHION

ABSTRACTION

METAPHORISM

MINIMALISTIC

DYNAMIC

MODULAR

ACTIVE + ENERGETIC

Page 50: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

CONCEPT 1: THE COMPASS NEEDLE

CONCEPT 2: THE ‘LC’ BOOMERANG

CONCEPT 3: THE HAPTIC WAVE ‘LE’

Icon is simple and cathyRelates with the name ‘Lechal’.Mostly interpreted with positive metaphors.Less ‘tecky’.

Icon is simple and cathyRelates with the name ‘Lechal’.Mostly interpreted with positive metaphors.Less ‘tecky’.

Looks Delicate and Decorative.Neither too technological or fashionable.Looks like a skyline or a logo for a architecural company.

FORM SELECTION 2

Page 51: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

Once the forms were selected, I presented thwo identity routes with a total of 4 visual idenity options along with their application on collaterals to the team and had them reviewed. Typeface used for these iterations is Gotham Regular

IDENTITY ROUTE 1

DESIGN FOCUS :This brand expression is inspired by the intuitiveness of lechal’s

KEYWORDS:IntuitiveGrowth MovementDirectionGuidanceActive

4.2 IDENTITY ROUTES

DESIGN FOCUS:This brand expression is inspired by the fresh innovative products made by lechal for a better and comfortable lifestyle for the users.

KEYWORDS:

MovementGuidanceIntuitiveInnovationMove forward

IDENTITY ROUTE 2

Gotham RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Page 52: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

VISUALISATION 1

A COMPASS NEEDLE

- It shows the right path- Intuitive- indicates growth and movement

Page 53: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 55

Page 54: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

VISUALISATION 2

A COMPASS NEEDLE + GRIDS

- suggests direction- indicates growth and movement

Page 55: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 57

Page 56: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

VISUALISATION 3

ARROWHEAD + ORGANIC

- suggests direction- indicates growth and movement

Page 57: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 59

Page 58: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

VISUALISATION 4

ARROWHEAD

- suggests direction- indicates growth and movement

Page 59: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 61

Page 60: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

4.3 FINALREFINEMENT

The concept behind this form was that, just like a compass needle directs one to his/ her destination, Lechal will do so too. Also, it is not only relevant for the shoes or the insoles, but other wearbale technological products also, that Lechal will produce and guide people to a better

using circles with radii that were in the golden proportion. Using the golden proportion ensured that the form looked balanced and pleasant to the eye.

FORM REFINEMENT

Page 61: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 65

1

11

2

3

4 445

6

6

the golden ratio (scaled down) icon

1

3

4.4 THE FINAL FORM

using circles with radii that were in the golden proportion. Using the golden proportion ensured that the form looked balanced and pleasant to the eye.

FORM STRUCTURE

Page 62: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

FINAL FORM

10mm

100mm

Page 63: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 67

4.5 TYPOGRAPHY

Prime Regular Gotham Regular

Rough Icon

Prime Regular

Page 64: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Prime RegularGotham Regular

Visual Corrections

Adjusting the Kerning

Page 65: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 69

4.6 CONFIGURATION

here the icon is emphasised the most.

Page 66: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

4.7 FINAL IDENTITY

Page 67: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 71

Page 68: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Page 69: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

Page 70: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

LECHALAPPDESIGN

Page 71: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 75

5.0 INGORMATIONCOLLECTION 2

1. Introduction

5. Blindness

4. User Structure

2. The Team

6. Visual Impairment

8. Android Overview

7. Crash course at Braille

9. Case Studies

Page 72: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

The Lechal Android Application is the only interface that connects the

the wholesome interaction and experience of the user with the product. The basic interaction medium of any android application is visual, haptic or audio. The visual interface or the Graphic User interface is the key medium that dominates the interaction patterns. But since our end users are visually impaired or completely blind, the haptic and gesture based interactions had to be given more emphasis. The application needed to be designed in such a way that the visually impaired people get a wholesome and satisfying experience of navigation without even realising the need for a GUI.

The user exeperince of the Lechal Insoles have been designed to be intuitive and as natural as possible. Hence the interaction design of the Android Application should not only compliment this experience but also enhance it. The Lechal team feels that this kind of an interaction is one of a kind and that it should be designed with a fresher outlook. Lechal is not just a product or a moblie application, it is an entirely new and different way of navigation and user experience system.

How to make a new experience the best experience one has ever had? This is exactly what the Lechal team has been pondering upon since the idea was born. Here are few insights that I have gathered from our inital brainstorming sessions:

The one thing that the entire lechal team believes in is that as our users are blind or visually impaired, our app needs to be more like a virtual friend creating a brain map for the user. It should not be dependant on any one of the interface interactions that will make the design restrictive.

alternatives that can replace touch based gestures making the design usable and comfortable for the visually impaired!While using our product, the user should never feel that it is specially designed for people with vision related disablities. The users should never feel controlled by the app or the product. They should always feel empowered while using Lechal.

ROLE OF THE APP IN THE DESIGN SYSTEM

VISION

LECHAL: A NEW EXPERI-

5.1 INTRODUCTION

Page 73: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 77

The team that worked on the lechal android application were Krispian Lawrence (CEO), Venkat Rao (Vice president of Ducere Technologies), Vijay Kumar and Devi Prasad (Android App Developers), Gaurav Duggal (Hardware and Software Engineer), Tejas Rode (Interaction Designer) and myself.

with such varied expertise. This assignment taught me how to bridge the gap between the designers, engineers and developers. Tejas Rode and myself worked very closely on the interaction design and the information architecture for this android application.

5.2 THE LECHAL TEAM

Page 74: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

DEFINING THE PREREQUISITES

USER EXPECTATIONS

to use our product:User should own a smart phone (android OS)User should know how to use a computer and internet

User should own closed shoes.

Here is a list of the key points that we want our users to expect from the Lechal Application:

IntuitiveNatural interactionEasily adaptableTrustworthy Non obstructive No need to learn new software/ hardwareMinimum interactions, not too much engagement, more sense of freedom.

way around.One stop app (multi tasking with the app)Independent of the touch interfaceInteraction should be independent of any imagery. (Considering blind users)

5.3 GETTINGSTARTED

Page 75: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 79

Lechal was essentially designed for the blind users, but the team envisiones it to be of great use for sighted users too. Following are the kind of users that lechal will be catering to:

Completely Blind UsersPartially Blind UsersSighted Users

As the users are so diverse. their needs and expectations from the application and the product are going to differe. They are going to use the same product for different purposes. They will decide the goal of the product according to their needs. Hence there is a desperate need to know what the users want from the product. Needs and goals of the users are an essential part of the app building process. It is important to understand their constraints and their allowances. hence a research on the various kinds of blindness was necessary.

TYPES OF USERS

USAGE OF APP BY DIFFERENT USERS

VISIONVision is the state of seeing. It is controlled in the occipital lobe of the brain where the cerebral cortex processes visual information. Rods and conesPerception of color begins with specialized retinal cells containing pigments with different spectral sensitivities, known as cone cells. In humans, there are three types of cones sensitive to three different spectra, resulting in trichromatic color vision.

5.4 USERSTRUCTURE

Page 76: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Blindness is the condition of lacking visual perception due to physiological or neurological factors. Total blindness is the complete lack of form and visual light perception and is clinically recorded as NLP, an abbreviation for “no light perception.” Blindness is frequently used to describe severe visual impairment with residual vision. Those described as having only light perception have no more sight than the ability to tell light from dark and the general direction of a light source. Legal blindness (which is actually a severe visual impairment) refers to a best-corrected central vision of 20/200 or worse in the better eye or a visual acuity

side vision that is so reduced that it appears as if the person is looking through a tunnel).

MOBILTITY

MOBILTITY TOOLS

1. WHITE CANE

Many people with serious visual impairments can travel independently, using a wide range of tools and techniques. Orientation and mobility

independently in the home and the community. These professionals can

may use often, such as the route from one’s house to a convenience store. Becoming familiar with an environment or route can make it much easier for a blind person to navigate successfully.

Tools such as the white cane with a red tip - the international symbol of blindness - may also be used to improve mobility. A long cane is used to extend the user's range of touch sensation. It is usually swung in a low sweeping motion, across the intended path of travel, to detect obstacles. However, techniques for cane travel can vary depending on the user and/or the situation. Some visually impaired persons do not carry these kinds of canes, opting instead

Still others require a support cane. The choice depends on the individual's vision, motivation, and other factors.

5.5 BLINDNESS

Page 77: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 81

A small number of people employ guide dogs to assist in mobility. These dogs are trained to navigate around various obstacles, and to indicate when it becomes necessary to go up or down a step. However, the helpfulness of guide dogs is limited by the inability of dogs to understand complex directions. The human half of the guide dog team does the directing, based upon skills acquired through previous mobility training. In this sense, the handler might be likened to an aircraft's navigator, who must know how to get from one place to another, and the dog to the pilot, who gets them there safely.

Some blind people use GPS for the visually impaired as a mobility aid. Such software can assist blind people with orientation and navigation, but it is not a replacement for traditional mobility tools such as white canes and guide dogs.Technology to allow blind people to drive motor vehicles is currently being developed.

2. GUIDE DOGS

3. OTHER TOOLS

Page 78: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

COLOR BLINDNESS

Visual impairment or low vision is a severe reduction in vision that cannot be corrected with standard glasses or contact lenses and reduces a person’s ability to function at certain or all tasks. The World Health

Low vision 1 is a best corrected visual acuity of 20/70.Low vision 2 starts at 20/200.

Blindness 5 is no light perception at all.

Color blindness is the reduced ability to perceive certain colors, usually red and green. It is a hereditary defect and affects very few tasks. Contrast sensitivity describes the ability to distinguish one object from another. A person with reduced contrast sensitivity may have problems seeing things in the fog because of the decrease in contrast between the object and the fog.

5.6 VISUAL IMPAIRMENT

Page 79: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

BRL: BRAILLE THROUGH REMOTE LEARNINGhttp://www.brl.org/intro/session02/abcs.html

Braille is writing system which enables blind and partially sighted people to read and write through touch. It was invented by Louis Braille (1809-1852), who was blind and became a teacher of the blind. It consists

Some frequently used words and letter combinations also have their own single cell patterns.

There are a number of different versions of Braille:

starting to read Braille.These letters are arranged to show how they are related: the middle row is the same as the top row with an extra dot in the bottom left corner. The bottom row is the same as the middle row with extra dot in the bottom right corner. W was an afterthought and

used in French.

alphabet, punctuation and contractions. The contractions are employed to

printed page. Books, signs in public places, menus, and most other Braille materials are written in Contracted Braille.

also in literature to a limited extent. It is a kind of shorthand, with entire

version of Braille.Braille has been adapted to write many different languages, including Chinese, and is also used for musical and mathematical notation, chess, computing, science

5.7 CRASH COURSE AT BRAILLE

1

2

4

5

6The braille cell

Page 80: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

The braille alphabet has a fairly logical algorithm or “pattern” to its

ten cells must be memorized. The other letters of the alphabet can be “calculated”, although it is probable that with time you will memorize all

THE BRAILLE ALPHABET

THE PERKINS BRAILLER

not generated by computer). The Perkins brailler has nine keys: the six keys corresponding to the six dots, a space bar, a backspace key, and a paper advance/line feed key. In addition, it has a thumb-lever to move the typing head back to the beginning of a line. Dots are made by pressing one or more keys simultaneously, following this pattern:

1. 2.

4. 5. 6.

Page 81: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 85

BRAILLE WRITING DEVICES

Three most commonly used devices for producing braille:

1. Slate and Stylus 2. Perkins Brailler

THE SLATE AND STYLUS

The slate and stylus is the oldest device used to produce braille, an invention of Charles Barbier. A simple device, its main advantage is its portability. Slates come in basically two sizes: 27- and 41-cell width. Slates are basically two pieces of metal, connected by a hinge. The top metal piece serves as a guide for the stylus, a sharp metal awl held by a wooden handle. The back metal plate contains indented braille cells, which further serve to guide the stylus in the embossing of braille dots.The main disadvantage of the slate and stylus is one of orientation. Since you are embossing the dots into the paper, it stands to reason that the

than on the left. Similarly, when writing, one needs to write from right to left, rather than from left to right. This is so when the paper is turned over to expose the upward dots, the braille is in a left-to-right order.

How to use a slate:

1.open the hinge like a book2.push the left edge of the paper squarely against the hinge

4.when ready to move to the next four lines, remove the paper from the slate5.align the top pins of the slate with the previously punctured bottom guide pins6.when embossing, press the stylus into the paper in as near a vertical manner as possible to ensure a clean dot (slips are easy to make, especially for beginners. If you slip, use your eraser to press the dot back into the paper)

Page 82: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

A mobile operating system (mobile OS) is the operating system that controls a Smart phone, tablet, PDA, or other device. Modern mobile operating systems combine the features of a personal operating system with touch screen, cellular, Bluetooth, Wi-Fi, GPS mobile navigation, camera, video camera, speech recognition, voice recorder, music player,

features.

Android is a Linux-based operating system primarily designed for mobile devices such as smart phones and tablet computers. It is developed by

the initial developer of the software, Android Inc., and later purchased it in 2005 and was unveiled in 2007. Google releases the Android code as open-source. Google Play is an online software store developed by Google for Android devices. An application program (“app”) called “Play Store” is pre installed on most Android devices and allows users to browse and download apps published by third-party developers, hosted on Google Play. As of June 2012, there were more than 600,000 apps available for Android, and the estimated number of applications downloaded from the Play Store exceeded 20 billion.

The operating system itself is installed on 400 million total devices.Developers write primarily in a customized version of Java. Apps can be downloaded from third-party sites or through online stores such as Google Play (formerly Android Market), the app store run by Google. Android became the world’s leading Smart phone platform at the end of 2010. The goal of the Android Open Source Project is to create a successful real- world product that improves the mobile experience for end users.

5.8 ANDROID OS OVERVIEW

Page 83: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 87

CATCH NOTES

Basic note-taking and memo app. Compatible with Google’s latest voicerecognition software.It can transcribe natural speech in real time. Great for budding novelists

INPUT: Speech OUTPUT: Text

GPS app that has been adapted for blind users. It rotates the map, so that the top of the screen is always in front of the user.Vibrates when a street is being crossed. Using this map, users can touch the screen to explore their surroundings. Ariadne GPS can be used anywhere that Google Maps covers.

INPUT: Screen GesturesOUTPUT: Phone Vibrations and Audio

ARIADNE GPS

YOUR MAGNIFYING GLASS

Utilizes the phone’s camera, to zoom in

invert the colours, light up the page with

the image onto your Google Drive to view later.

INPUT: Screen GesturesOUTPUT: Text and Image Files.

5.9 CASE STUDIES

Page 84: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

TalkBack is an application that is part of Google’s Android Accessibility Service.Designed to help blind and visually impaired users with using their mobile devices. TalkBack will greatly help blind people hear what they are trying to do with their mobile phone as the app will tell them the item that they have just selected or

TALKBACK

MessagEase Keyboard is a smart and fast way to type full text on your Android phone.Users of the application can type lightning-fast messages by using only one hand or

The app is straightforward so that users

MESSAGEASE KEYBOARD

picked. The app can also read texts aloud and every movement the user makes on her or his phone is carefully being monitored and spoken by the app.

INPUT: Screen GesturesOUTPUT: Audio Tones and Speech

With MessagEase, users can accurately type words as the keyboard has large letters that can easily be seen.

INPUT: MessageEase KeyboardOUTPUT: Text

Page 85: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 89

NoLED

It is made for walking and using public transport. It constantly updates the user on their location – even down to the house number they’re walking past, and vibrates if they’re going the wrong way.

OUTPUT: Phone vibrations and Audio

WALKYTALKY

1. NoLED is an interesting application that

a dedicated LED but visually impaired people, as well.

2. icons or dots on the screen to help users

the app will display glowing icons of

different colors corresponding to the application.

4. This is very useful for users who have a

icons can help users easily distinguish their missed alerts.

Page 86: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

which offers this interesting new feature of virtualizing any individual you like and

command. Most exciting feature of this app is that it is available in a range of accents, from Australian to US English. FIP App is a blend of virtual friend and

It uses natural language technology of iSpeech to perform a multitude of tasks ranging from text messages

FRIEND IN PALM

GEORGIE

Georgie is a smartphone app designed for blind people, by blind people. It has recently been launched in the UK. vLeading UK provider of hardware and software to the blind, visually impaired and those with learning and reading

Birmingham on 17th and 18th July.

to transforming photos into a virtual communication tool. FIP uses the state of the art voice recognition technology which gives the user a hands free experience to perform various tasks and integrates it with

any action the user expects it to perform.

INPUT: Voice OUTPUT: Text & Audio

Screenreader and available exclusively through Sight and Sound Technology, the app is built

day-to-day obstacles like catching a bus, reading printed text and knowing their exact whereabouts in unfamiliar areas.

Page 87: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 91

Tasks more commonly associated with smartphones like using Twitter, reading text messages and using a camera have also been updated to ensure ease of use and accessibility for visually impaired people for the

Georgie makes use of Google’s Android operating system and existing Samsung phones like the Samsung XCover or the Motorola Defy + JCB 2,

buttons on an uncluttered screen, voice feedback whenever the screen’s touched and an innovative way to select the desired option also make the basic functions of the phone easier to use for visually impaired people, as well as those unfamiliar with modern technology.

As standard, Georgie comes with features to let users dial a number with the voice assisted touchscreen, manage contacts, use speech input to send text messages and tag previous routes or hazards (such as potholes or low hanging branches) using the navigation apps. A variety of additional apps are also available for purchase in three packages; Travel, Lifestyle or Communicate. These packages have been designed to increase functionality and support different aspects of daily life that

for £24.99 each and include a range of additional features.Some important feautures of Georgie: Remember places, use ful landmarks or hazards you pass on your journeys, tell you the direction and distance to them and speak them as you pass by.

Page 88: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

These case studies proved to be really important for our design process as we got to know of the opportunities that these applications are using and what is the scope and the extent to which one can explore. Some of the apps use brilliant concepts that the team thought would we very useful for our application too.

Voice to Text Conversion.The Lechal app should be like a friend to the user and it should have a personality of its own. Hence the language and the accent of the Speech will be really important.It should not use much of the GUI gestures as that leads to ambiguity for the visuallly imapired users.The app should be able to tag small obstacles, potholes and also useful landmaarks.The user should be able to share routes with other Lechal users.The app should be as handsfree as it can be to give the vlind user a hassle free experience.

ANALYSIS OF THE CASE STUDIES

Page 89: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

6.0 NEEDFINDING

4. Analysis

Page 90: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Designers intuitively understand that needs are important. They know that they do their best work solving people’s problems when they clearly understand what those problems are. However, an understanding of people’s needs can be leveraged across an entire business activity, providing value beyond the development of any single product.

values, and to get design insights.

NEEDS LAST LONGER THAN ANY SPECIFIC SOLUTION

Solutions come in and out of favor faster than the needs they serve. Because people’s needs endure longer than solutions, we focused on satisfying those needs rather than on producing ourapp and insoles. Focusing on needs encouraged the team to continue innovating better ways to serve those needs, independent of current solutions.

NEEDS ARE OBVIOUS AFTER THE FACT, NOT BEFORE.

People become acclimated to their problems, often developing work-arounds to circumvent a need. In doing so, they can become oblivious to the need’s existence.

Research that relies on the customer’s description of a situation may never uncover the need. Because many needs are apparent only after they’ve been solved.

6.1 NEEDFINDING

Page 91: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 95

WITH SIGHTED PEOPLE

intention of realizing what to observe when we actually meet our target users. Pavan, Gaurav, Ameya, Krispian and myself took part in this

GAME 1: DRINK AND PEE

GAME 2: ANSWER THE PHONE

1. On the way mark the places that you recognise.2. From the starting point, go to the water Cooler.

Fill a glass of water and drink it.4. From to the water cooler navigate yourself to the toilet.5. Come back to the starting point.

1. From the starting point reach the place where the phone is ringing.2. Answer the call. End the call.

Send a Message.4. Go back to the Starting point.

6.2 NEEDFINDINGACTIVITIES

Page 92: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

GAME 3: DRAW WITH YOUR FEET

GAME 4: TRUST EXERCISE

GAME 5: STAIRWAY TO HEAVEN

1. One person will give directions to the blind person.2. Make the blindfolded person navigate around the space without

being hit by any obstacles.Make the person open and close doors.

1. Go up and down the stairways.2. Try using the lift and its buttons.

Return to Starting point.

1. 2.

Page 93: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 97

Familiarity Known routes are easier to follow on one’s own. Familiarity with the phone/device plays an important role. Familiar places/objects act as reference points to build a mental map. The user tries to associate/compare a new situation with standards. Nature of instructions/feedback Excess instructions are not necessary, timely validation is enough. User gets confused on unexpected/absence of feedback. Accuracy becomes important as the target gets closer. Users trust their intuition more than the instructions, but otherwise they follow the instructions religiously, and are at times over dependent on them. Overlapping/excess feedback is hard to comprehend. Spatial ability It’s possible to get back on track even after disorientation. They have a good sense of space/angle. Similar reference points are confusing. The user is cautious at every step while climbing stairs.

device. Users’ response There is a prompt response to the instructions. Leg gestures are unnatural, consume a lot of energy and the users may lose their balance.

OBSERVATIONS

Page 94: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

WITH VISUALLY IMPAIRED USER

We had an informal talk with Seshu Babu who is completely visually impaired shortly after birth. We learned about interesting moments in his

crossing a road, walking on footpath/on rough terrain. The objective was to see his comfort level in known/unknown locations/situations.

Page 95: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 99

white cane and how he manages to walk comfortably in different terrains. We also noticed how he climbs up and down the stairs. The white cane is used to detect the height of the stairs.

Page 96: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

OBSERVATIONS

work.Works as a telephone operator.Uses a Braille watch. Accesses Braille libraries. Prefers a single mobile phone model. Keeps the mobile phone at the same place at home to locate easily. Uses voice output on smart phones. Finds British accent easier to understand than American. Finds exact location of people based on the direction of their sound. Determines the height of steps using cane. Steps down using the right leg if the cane is in the right hand. Finds steps ‘entertaining’. Can detect manholes while walking on the footpath. Builds a very good mental map of the area, and takes very accurate turns. Conscious of the kind of vehicles on the road, through their sound. Holds the cane horizontally while crossing the road. Estimates the terrain using the cane, feel the edge of the road. Feels the ‘centre of gravity extending’ due to cane. Reorientation is easy if there are sudden obstacles on known routes. Good with bus numbers, but prefers auto rickshaws. Loves radio, music and movies. Problematic! Not very comfortable with computers. Uses mobile phone to only make and receive calls. Does not like to carry it while traveling. Walking on the road increases anxiety and tension. Hates drainage/water on the road. People are unhelpful and inaccurate, which is

Hates speed breakers on the roads. Does not use earphones, they are uncomfortable. Wire/ placement of earphones are an issue. Never been to an ATM Bargains with auto rickshaw, pays Rs 50 to 80 for a 4 km trip. Workaround/Surprising!

uniform, in which case it is easy to climb down. Could detect slight unevenness in footpath tiles. Needs the app to be able to detect such unevenness. Likes playing Scribe Uses normal typewriter Finds Mumbai more receptive than Hyderabad Finds TV mundane

Page 97: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 101

We visited LVP to have a look at the environment in which partially and completely visually impaired people learn basic skills like cooking, etc. It gave us an insight into the kinds of objects they are familiar and well versed with. Manish guided us around the place. He saw him using a

6.3 VISIT TO L.V. PRASADEYE INSTITUTE

Page 98: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

L.V.PRASAD EYE INSTITUTE , HYDERABAD

Signature guides

Stickers on lids and big typography to help blind and VI users locate objects.

Braille Writing Pad

Use of high contrast in the kitchen for visually impaired people.

Door handles are painted with high contrast for VI users.

Visually impaired person looking at his phone with a magnifying glass.

Page 99: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

OBSERVATIONS

IT room is the place where they learn to use the computer. The following software is used in them. Jaws: to read out the text on the screen and to navigate the

MAGic: to increase the contrast of the screen and make text very large. Kruzweil: to scan text and convert it to BrailleThey also learn communication skills here with the help of a sighted person. Two of the partially visually impaired were working on an online ‘help portal’ that can be accessed by anyone. A Kids room had unique toys to teach basics of Braille. Braille typewriter Braille slate Taylor frame to learn mathematics Telescope training //multiple disability training room //audio room //kitchen

L.V.PRASAD EYE INSTITUTE , HYDERABAD

Page 100: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

6.4 NEEDFINDINGANALYSIS

They are not very comfortable with computers. So there should not be much dependence on the computer for using the shoe.The phone is mainly used to make and receive calls, and the users normally avoid carrying it around. So minimum input should be required by the app, especially on a touch screen phone.The software Jaws uses only the arrow keys to navigate/grid based navigation. We can use the volume button to navigate through the grid! That makes it easy for the users to build a mental map of the app.There should be a way to mark drainage water, ditches, speed breakers, manholes, etc on the map. So that when the user comes there the next time, it becomes easy to walk.There should be minimum dependence on people around. There should be a way to validate what people say.Avoid using earphones.Should be able to tell the distance travelled in a bus/auto, bus number.The users hardly visit ATM, etc. They should be kept aware of the places on the way, like banks, restaurants, etc.Entering text should become fast in the app as the user becomes an expert. We can use prediction etc.It should be easily possible to phone call someone relevant in case of emergency.The user loves radio, music, movies. We can have our user-manual as an audio movie.They wake up early and take a stroll. We can keep automatic practice sessions with our shoe every morning.As an add-on, it should be possible to save telephone numbers, texts, record telephone calls, etc.Information about the current time could be given by haptic feedback.Haptic feedback can be augmented with a Braille cell which will give additional information to the user. The user can also read normal text without blocking his ears.Feedback about the user’s current location and journey status should be constantly available.A database of bus numbers and nearest bus stops/auto stands should be available.

The screen should have high contrast, easy to recognize graphics and huge text.An app community of visually impaired people can discuss their own experiences of walking on a road and upload them easily using the phone. We could map this with the GPS location/Google Latitude, and whenever other users come to that location, they can get the information.Information on number of steps.The app should be able to give the orientation with respect to the road.The interface should be very natural without requiring much effort in processing the feedback, especially when the user has to pay attention to the stick too.Accelerometer gestures like shaking could be used.Conn’s task properties could be used while designing feedback.Weather information could be provided.Using a grid screen guard for training might help.We could have check points to remember the person’s path as he travels. We can reorient the person to the destination depending on whether he has deviated away from the path beyond a particular threshold.If the show fails, we could use the mobile haptic feedback to replace the feedback from the shoe. We could have different tactile patterns for the left and right shoes.In case of emergency, we can send an auto message to a care taker.We can constantly monitor variables like battery life, and make sure that the user has acknowledged it.

the app where he/she will input common locations, personal details, email address, etc.

Page 101: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 105

UNDERSTANDING THE POSSIBILITIES

The story boarding process started with a short exercise where Tejas and I sat down and brainstormed about all the possibilities and opportunities that we could seize. We charted out opportunities starting from the inital interactions with the application to the point where a user gets used to the application.

LEARNING/ TRAINING

and customise the settings for the app.A Training Module: Practise lessons can help new user to get acqainted with the Lechal App.Display Settings: High contrast display and Large fonts will be more suitable for VI (Visually Impaired) Users.

INTERACTIONA handsfree experience will be desirable so that VI User can navigate easily with his/ her whitecane.The user should not be over engaged with the app to a point that he/she gets distracted from the primary task that is navigation.Grid based navigation will be much easier for creating mind maps for VI users.

7.0 STORYBOARDING

SCOPE/ ACTIVITIESWeather Updates can be useful for the User before starting the journey.

VI users should be able to record conversations.The app should be adaptable for expert users, as instructions can be uneccesary for expert users.Tagging Speed breakers and Obstacles should be possible.

BACK UP/ CRISISDuring crisis situations, the App should not induce panic in the user.Mobile haptic feedback should be very handy in crisis situations.In case of an emergency, the user should be able to send a message to their emergency contact.

Page 102: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

SIMPLE COMPUTATION CHART

After discovering the various opportunities for the app, we decided to make a simple computation chart, which would help us create a much

STEP 1: INPUTThe user inputs the location

STEP 2: CONFIRMATION

STEP 3: PROGRESSThe app gives detailed directions at every point in the journey.

STEP 4: EXCEPTIONIn crisis situations, the app takes the user to the nearest known location.

STEP 5: MODIFICATIONThe app can modify the route if the user decides to stop at a another location on the way.

STEP 6: END

Page 103: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 107

PERSONA 1

Satya praksh is Family Oriented person, and likes to socialise and spend time with his family. His dialy navigation is a mixture of known/ unknown and indoor/ outdoor routes. He uses the public transports very often. Here is a simple journey map that illustrates his daily navigation routes.

Page 104: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

PERSONA 2

Some important notes from the Journey map:

COMMUTING

should be changed.

END OF JOURNEYAneeds to go to a new place?Routine based suggestions Adding timers to certain routine based locations.

PERSONA 2: John DoeIMPAIRMENT: Completely BlindFluent in English and Braille.Mobility Guide: White Cane

Page 105: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 109

8.0 RAPIDPROTOTYPING

1. App Insole Relationship

5. Charging the insoles

4. App Setup Analysis

2. Basic Screens and their Relationship

6. Braille Input

Page 106: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

was made to undersatnd the relationship between the app and insoles. In this chart we determine the availability and functions of each of the components at different circumstances.

CASE 1:When the App is running, but insoles are not connected via bluetooth to the appOUTPUT: Mobile haptic feedback and audioINPUT: Only thorugh app

CASE 2:When the App is not open, but insoles are on.OUTPUT: Insole Haptic FeedbackINPUT: No Input

CASE 3:When the App and insoles, both ar on and connected.OUTPUT: Insole Haptic Feedback, Mobile Haptic Feedback and Audio FeedbackINPUT: Audio and UI inputs through the phone..

8.1 APP-INSOLERELATIONSHIP

APPLICATION INSOLES

ON OFF ON OFF

Page 107: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

VERSION 1

The version 1 of the setup module was a very rough prototype.It has three tabs:

PROFILE: Here the user inputs his/ her personal details like name, email, age, emergency contacts etc. Height is an important information that the app will need to determine the distance at which the user will hold his phone.

PREFERENCES:Here the user customises the app settings like

Threshold distance. (Threshold Distance: It is the maximum distance the user can walk.)Display Settings: Font Size, color, Background color, etcShoe Vibration IntensityApp VolumeAccent: US/ UK

ANALYSIS:

the user’s impairment or his mobility device preferences.Along with the accent, the user should be able to choose the Voice of

Page 108: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

Inputting impairment and mobility deviceOther disabilitiesAdding one more Emergency ContactCustomising App Voice

Introducing Themes: Adjusting background and font colors easily.

VERSION 2

Page 109: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 115

VERSION 3

Information heirarchy was changed.

that user does not have to go through a tiresome list of settings.Controlling the speed of the app voice was also introduced.Sliders were introduced in this design so that user does not have to input numbers every time.

Page 110: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

VERSION 4

developed for the settings page.

ANALYSIS:

After making this mockup the team released

process would be confusing for even a sighted person.

The team was not very sure that they wanted to make the VI user dependant on another person for the downloading and installation of the app.

sample icon

Selecting mobility guide Changing app preferences

Selecting kind of impairment

Page 111: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 117

DESIGN VALIDATION

discouraged to use the app.

There can be a better way knowing what type of impairment the user have. By asking the users about their impairment, the app will make the

should not make the VI users feel that the app is specially made for blind users. Instead it should be so intuitive for anyone that poor eyesight or blindness should not come in the way of enjoying the Lechal experience.

The team then started to think about alternatives for asking the user about his impairment. One of the good ideas was to develop a small visual game for the user which should be played while the lechal app

bursting ballons by touching the screen will help the app know what kind of impairment the user has. The user gets three chances to burst a baloon. This is a just a temporary idea which needs to be worked on.

8.4 APP SETUPANALYSIS

Page 112: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

The pair of insoles contain specially designed batteries which last upto

these batteries. The process for charging the insoles is as follows:

First remove the batteries from the battery slot towards the heel side of the insoles.Insert the batteries into the charge and let it charge completely.The charging levels can be checked from the lechal app or by just

then makes beeping sounds indicating the charge level. This way the user need not go and touch the charger everytime to check the charging level. This user interaction/ gesture was introduced keeping in mind VI users. Usually in battery chargers, the battert level is indicated by small lights. This was not suitable for our target users.Once the batteries are charged, remove them from the charger and insert them back in the shoes.Turn on the Lechal app and establish the insole-app bluetooth connection.Lechal Insoles are ready to be used!

8.5 CHARGING THE INSOLES

Page 113: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 121

8.8 JOURNEY NAVIGATION

reaching the destination.

MY PLACES

PLACE 1

PLACE

PLACE

In order of frequency

JOURNEY INFO

DASHBOARD

EXIT

DASHBOARD

GESTURE

To start journey , click START or do the gesture.

NOTIFICATIONS

CANCEL L ATER START

ORIENTATION

DIRECTIONS

DESTINATION

MY PLACES

NEW PLACE

MISSED INSTRUCTIONS

Page 114: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

8.9 INPUT & OUTPUTOPPORTUNITIES

Page 115: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

9.0 DEFINING PALETTES & PATTERNS

1. Palettes and Patterns

2. Assigning Functions

Page 116: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

9.1 PALETTES & PATTERNS

VOLUME BUTTON GESTURES

SCREEN GESTURES

INPUT PALETTE

FUNCTIONS

U

D

UPPER VOLUME BUTTON

DOUBLE TOUCH

PRESS ONCE

LONG TOUCH

PINCH OPEN

X 1

LOWER VOLUME BUTTON

DRAG

LONG PRESS

PINCH CLOSE SWIPE TOUCH

X L

U U

U

U U

U

D

D

D D

D

X 1 X 1

X L

X L X L

X L

X 1 X 1

X L

: YES : UP: SELECT

: SELECT: NEXT

: NO : DOWN

: BACK

SET 1 SET 2

For all phone gestures, Long press and leave after completion of task.

The volume button input method is one of the most conviniet and brilliant ways of input for a smartphone that

the team came up with. This enables not only

blind but also the old and uneducated people to use a complex layered OS just

by using 2 buttons. The functions of these buttons

are only activated when the Lechal app is on. If

the user wishes to use this input method as a default,

by changing the android settings and selecting this

as default.

Page 117: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 125

FOOT GESTURES

VOICE INPUT

GUI

TAP (FRONT & BACK)

HEEL UP & HOLD

SWIPE (RIGHT, LEFT, FRONT, BACK)

JUMP

DOUBLE TAP

TOES UP AND HOLD

KICK (FRONT & SIDE)

LOWER VOLUME BUTTON

ACCELEROMETER GESTURES

TAP IT

WAVE YOUR HAND

FALL

DOWN-UP

UP-DOWN + LEFT RIGHT

TURN DOWN

KNOCK- KNOCK

SHAKE

SLASH

RIGHT TO LEFT SWIPE

TWIST

PULL UP

BRAILLE INPUT

AUDIO

LIFT THUMB

DOUBLE TAP

THUMB BAR

RIGHT TO LEFT SWIPE

LONG PRESS

Page 118: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

AUDIO TONES

The Audio output of the app is a very important part of the entire lechal experince. There are two types of audio outputs : Audio Tones and Speech

list end tones, etc. Speech is the app voice which is also customisable. Every time the user navigates down/ up to an option, the app reads out the content in the selected option.

The output patterns can be broadly categorised as:

HAPTIC FEEDBACK

There will be two kinds of haptic feedback that the user will recieve. One from the phone, and the other from the insoles. The phone haptic

gestures.

NOTIFICATION

NAVIGATION

SELECTION

START UP

A

C

B

D

OUTPUT PALETTE

Page 119: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 129

10.0 WIREFRAMING

1. Creating Flows

2. Developing Linear Flows

5. Need for a GUI

4. Final Flow

6. Comparing GUI Visual Langauages

Page 120: User Experience and Visual Identity For Lechal | Diploma Document 2013

10.1 CREATING FLOWS

detailing out small modules and started converting them into simple

in a software called ‘balasmiq Mockups’. This software is very easy to use

the developers, Vijay and Durga Prasad.

The developers would then create very simple functional mockups for us to test. The UI or graphical elemnts were not relevant at this stage. The

app was using the android feature of converting text into speech at this stage. Visual mockups were made for the sole purpose of the validation of

validated by the designers and Krispian. This process ensured that there is no communication gap between the desgning and coding process. Design

In this prototype the basic structure of the app was made in balasmiq.

from the START-UP to the JOURNEY INFO via NEW PLACE.The main

Shake phone to Start upBeep after every transition of ScreenApp reads out the selected option

STEP 1: CREATING PAPER PROTOTYPES

STEP 2: CODING AND IMPLEMENTATION

STEP 3: VALIDATION

1ST PROTOTYPE

REVIEW

The start up gesture works perfectly and is very convenient.Beeps are too loud and unpleasant.The transition of screens is not very apparent.End of the list is not recognisable.The volume button functions are not very intuitive

Page 121: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

1ST PROTOTYPE

VOLUME BUTTON FUNCTIONS

U

U

D

D

X 1

X 1

X 1

X 1

: YES

: UP

: NO

: DOWN

Page 122: User Experience and Visual Identity For Lechal | Diploma Document 2013

End of list tones were introduced.

2ND PROTOTYPE

REVIEW

End of tone list if detectable yet unpleasant.Back button is redundant.

Page 123: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

10.2 DEVELOPINGLINEAR FLOWS

LIST BASED NAVIGATION

NEED FOR REDEFINING PATTERNS

After reviewing all the previous mockups, the team strongly felt that until

person to create a mental map of the app. Hence we started pondering upon the ways by which we could almost eliminate lateral navigation and

mockup with blindfolds. This gave us very relevant insights.

by eliminating lateral elements asa much as possible. Along with the

transitions. This made it easier for the developers to understand the junctions in the list.

For the paperprototypes, the volume button funtions were:

These functions were not really intuitive. Selection of an item was ambiguous. We decided to apply a different set of functions to the next mckups and then review it. The new volume button functions are:

U

U

U

D

D

D

X 1

X 1

X 1

X 1

X 1

X 1

: YES

: UP

: UP

: NO

: DOWN

: DOWN

U D X L : SELECT

Page 124: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

10.3 LINEARFLOW

Tone + Greetings + StatusConnect to insoles (if not connected)My places Home

Journey info Begin journeyPhone goes in pocket

Tone + Status Contact helper Mute feedback Replay last feedback Tag location Orient yourself Nearest bus stop Modify journey Change destination End journeyNew place Common places Restaurants Hospitals Hospital 1 Hospital 2 Input a place Braille Voice

Re-enter Route 1 Route 2 Journey info Begin journey (Same as before)SettingsPreferences Font size Color themes White on black Red on green Orange on blue Customize app voice Male (if female, and vice versa) Speed Very high N o r m l V e r y L o w Volume Vibration intensity Insole vibration Mobile vibration Maximum walking distance 1000 600 200 User details Name Help

REVIEW

Going back is a little confusing.

Volume should be maximum by default.

To go to the back page, the user needs to go to the item on the top of the list > tone> press > backThe speech is not converted from the text, but

how it feels to have a natural voice.

KEY FEATURES

Page 125: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

10.4 FINALFLOW

Page 126: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

to design the module for the sighted users. But while brainstorming for the GUI, the team realised that when the user is in some crisis, any sighted person should be able to help the user out. Hence a simple GUI is necessary for the app even in the version of lechal made for the blind users. This can be an optional feature of the app. Two routes were explored as sample layouts for the GUI. These layouts are made with high contrast and big icons to make it readable for users with low vision. These two concepts are explained properly and compared to each other further.

10.5 NEED FOR A GUI

Page 127: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

10.6 COMPARINGGUI

Page 128: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

FURTHER DEVELOPMENT

NEED FOR A DIFFERENT DESIGN FOR SIGHTED PEOPLE

10.7 WHATNEXT?

reviewed. After this, the GUI will be designed and the interactions will

comfortable for the blind users.

The needs and goals of a sighted person are very different than a

be conducted for sighted users. This will result in observations and validation of assumptions. With this knowledge the teamw ould then

version. Development and testing will follow. Also, the user interface for sighted people will have to be different, visually pleasant and a little more engaging. If the interface is kept too simple, sighted users might

Page 129: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

CONCLUSION &LEARNINGS

This project has been all about amalgamation, disintegration and

I was the only graphic design intern there. Bridging the gap between designers and engineers was something that kept me occupied for a while during the early stages of my project. Consciously trying to bridge the gap dint work well. But as the project matured, I realised how people from different backgrounds can come together and create wonders. Its not about bridging the gap between people. Its about respecting the difference that exists between two kinds of people, respecting their thought processes, methodologies, work philosophies and their time. Innovation never happens in isolation. One needs to break the barriers and be open to making mistakes, new outlooks and to dynamic work scenarios.

The two parts of my project have made me dwelve into two different sides of myself. Creating the visual identity was not just a symbol design exercise for me, but it also taught me a lot about wearable technology. This is an emerging sector in the fashion and technology industry. However, Lechal proved to be even more unique. What they have in mind, is not just art that people can wear; It is much more than that. They make people inspired products. They are always very closely related with their users, and always involve the users in the design and testing processes. This part of the project was more challenging from the brand thinking point of view. Visualising a new stream of engineering was a very engaging and informative process.

The second part of my project was to design the information architecture, user experience and interaction for Lechal. This is something that I have

scared and even intimidated by the process itself. When I started, I did not know how to go about it. But somehow, it all unfolded slowly in my head. In no time I was fully immersed in the project. The entire design process feels like a mind map in my head now. This project has been a source of so many learnings for me. I got an opportunity to learn about braille, meet visually impaired people and get to know how they live their lives. I learnt how to collect complex information, organise it and then simplify it.

Page 130: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

BILBLIOGRAPHY

WEB REFERENCES

Top 10 Shoe Company Logoshttp://www.bonigala.com/top-10-shoe-company-logos

Wearable Technologieshttp://www.wearable-technologies.com/

Wearable technology - Wikipedia, the free encyclopediahttp://en.wikipedia.org/wiki/Wearable_technology

Anirudh Sharma | touchaddict » Le Chal: A haptic feedback based shoe for the blindhttp://anirudh.me/2011/06/le-chal-a-haptic-feedback-based-shoe-for-the-blind/

The Evolution of Tech Companies’ Logos - Neatoramahttp://www.neatorama.com/2008/02/07/the-evolution-of-tech-companies-logos/

adidashttp://www.adidas.co.in/

Nuubohttp://www.nuubo.com/

Shoes That Tweet (Yes, Really!) | Ecouterrehttp://www.ecouterre.com/shoes-that-tweet-yes-really/

Brand Thinking and Other Noble Pursuits by Debbie Millmanhttp://debbiemillman.com/brandthinking/

Brands A-Z | Lookhttp://www.look.co.uk/fashion-brands

Fastrack - Largest & Trendiest Youth Fashion Brand in Indiahttp://fastrack.in/

Nike.com (IN)http://www.nike.com/in/en_gb/

Branding Served :: Galleryhttp://www.brandingserved.com/search?search=branding

Braille-Inspired Design for The Blind | Design for Good | Big Thinkhttp://bigthink.com/design-for-good/braille-inspired-design-for-the-blind

Why all designers need to understand color blindness Designer Blog

understand-color-blindness/

Page 131: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009 141

Android for the blindhttp://www.codefactory.es/en/products.asp?id=415

Eyes-Free Android: Walking About With A Talking Androidhttp://eyes-free.blogspot.in/2010/10/walking-about-with-talking-android.html

Belkin - Wolff Olinshttp://www.wolffolins.com/work/belkin

Modular graphics | Design Indabahttp://www.designindaba.com/news/modular-graphics

Maximize Your Senses - VisionAwarehttp://www.visionaware.org/section.aspx?FolderID=8&SectionID=115&TopicID=519

How to Walk with a Guide - VisionAwarehttp://www.visionaware.org/section.aspx?FolderID=8&SectionID=115&TopicID=515&DocumentID=5805

Braille Studio: Experience design for the blind and visually impaired.http://braillestudio.com/

Apple iPad accessibility features - part 1 - low vision - YouTubehttp://www.youtube.com/watch?feature=player_embedded&v=5KnVBYDWlkQ

Assistive Technology ~ Applications for the Blind (Part 1) - YouTubehttp://www.youtube.com/watch?v=lQbSoO5kjLA

Blind and Visually Impaired Users Gain Independence with Georgie smartphone app.mp4 - YouTubehttp://www.youtube.com/watch?v=ErBLv2wzmII

Sight and Sound Technologyhttp://www.sightandsound.co.uk/shop/

High-Tech Assistive Technology for the Blind - YouTubehttp://www.youtube.com/watch?v=fYTukkBHYEk

Perkins/APH Brailler, The NEXT GENERATION - YouTubehttp://www.youtube.com/watch?v=7h5jIQepOuM

Human-Computer Interaction | Courserahttps://www.coursera.org/course/hci

Balsamiq | Balsamiqhttp://balsamiq.com/

Google Glass - Homehttp://www.google.com/glass/start/

Best Voice Assistant Android App Of ALL Time: Friend In Palm- Siri For Android - YouTubehttp://www.youtube.com/watch?v=GMVRzqumUW0

Page 132: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT

DOCUMENTS

INTERVIEWS

Sahu, AbhishekInfformation Architecture for NUDGE (mobile application) / Abhisehk Sahu (Diploma)

Sharma, RakeshInformation Architecture of NEtwear Administrator/ Rakesh Sharma (Diploma)

Seshu BabuPersonal Interview

Page 133: User Experience and Visual Identity For Lechal | Diploma Document 2013

SURABHI MANCHALWAR GRAPHIC DESIGN GDPD 2009

TYPEFACES USED

PT sans

Neuzeit Grotesk Bold Cond

Page 134: User Experience and Visual Identity For Lechal | Diploma Document 2013

NATIONAL INSTITUTE OF DESIGN DIPLOMA PROJECT