Mobile Website for DY Works | Graduation Project 2017 by Saumya Goyal

DEGREE PROJECT Website Design for DY Works Sponsor : DY Works, Mumbai

Volume : 1 STUDENT : SAUMYA GOYAL PROGRAMME : Bachelor of Design (B. Des)

GUIDE : CHAKRADHAR SASWADE

2017 COMMUNICATION DESIGN FACULTY (GRAPHIC DESIGN)

National Institute of Design Ahmedabad

The Evaluation Jury recommends SAUMYA GOYAL for the

Degree of the National Institute of Design IN COMMUNICATION DESIGN (GRAPHIC DESIGN)

herewith, for the project titled "WEBSITE DESIGN FOR DY WORKS" on fulfilling the further requirements by*

Chairman Members :

Jury Grade : *Subsequent remarks regarding fulfilling the requirements :

Activity Chairperson, Education

Copyright ÂŠ 2017-2018 Student document publication meant for private circulation only. All rights reserved. Bachelor of Design, Graphic Design, 2013-17 National Institute of Design, Ahmedabad, India. No part of this document will be reproduced or transmitted in any form or by any means including photocopying, xerography, photography and videography without written permission from the publisher, Saumya Goyal and National Institute of Design, India. Trademark names are used throughout this document. Rather than putting a trademark symbol in every occurrence of a trademark name, it is stated that the names are used only in an editorial manner and to the benefit of the trademark holder with no infringement of the trademark. Few photographs used in this document are sourced from the web and are used for representational purposes only. All illustrations and photographs in this document are Copyright ÂŠ 2017-2018 by respective people/ organisations. Edited and designed by Name: Saumya Goyal Email: saumyagoyal2020@gmail.com PLEASE NOTE: The colors shown throughout this document may not be the correct colors due to difference in digital colors on the screen and pigments used for printing this document. www.nid.edu Printed digitally in Ahmedabad, India. September, 2017. NATIONAL INSTITUTE OF DESIGN

ORIGINALITY STATEMENT

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 final graduation of any other educational institution, except where due acknowledgement is made in this graduation project. Moreover I also declare that none of the concepts are borrowed or copied without due acknowledegment. I further declare that the intellectual content of this graduation 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 graduation project (or part of it) was not and will not be submitted as assessed work in any other academic course.

I hereby grant the National Institute of Design the right to archive and to make available my graduation 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. 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: Saumya Goyal

Signature: Student Name in Full: Saumya Goyal Date: Signature:

Date:

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Dedicated to Mother and Father for giving me this beautiful life. Dedicated to my Sister for saving my life. Dedicated to my teacher and guide, Mr. Chakradhar Saswade, for being kind and crystal clear in his teachings. Dedicated to God, for always being by my side in the form of various people.

NATIONAL INSTITUTE OF DESIGN

MOBILE WEBSITE

FOR DY WORKS, MUMBAI User Experience and Interface Design

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

“To touch somebody’s heart with design.” -Stefan Sagmeister

NATIONAL INSTITUTE OF DESIGN

Contents 11

Acknowledgements

Preface

13 15 16 17 18

Introduction The Institute The Client Personal Introduction Why This Project?

19 20 21 22 23

Section 1: Registration and Groundwork Confirmation and Registration Project Proposal Redefined Project Timeline On UI/ UX

25 26 31 34 35 36 38 40 41 42

Section 2: Research Website Audit Competitive Analysis The Workshop P. E. T. Analysis Episodic User Journey User Personas User Journey and Sitemap Ideation Sketches Low Fidelity Wireframes

44 45 54 56

Section 3: Mood Board Explorations Concepts for the New Image The Infinite Phenomena Infinity in Nature

57 58 60 65

Section 4: Color and Composition Explorations Color and Shape Palette Back to the Basics Compositions on Infinity

Section 5: Layout Iterations

75 76 77 78

Section 6: Electric Shock The Realization The New Identity Color and Typeface

Section 7: The Final Interface

102 103 139

Section 8: Miscellaneous Explorations Desktop Explorations Visiting Cards

144

Conclusion

147

References

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

“Design is so simple, that’s why it is so complicated.” -Paul Rand

NATIONAL INSTITUTE OF DESIGN

Acknowledgements

This document has been possible due to the love and support of many people and many places. I would like to extend my gratitude to: My sweet college, NID, for engulfing me into the field of design thinking and honing my skills. Apart from education, the institute taught me valuable lessons for life thus making me a more sorted person overall. I thank all its students, places and situations for building an accommodative environment and for providing me the space, time and freedom to explore with my design projects to my heart’s content. My teachers at NID, for giving me their guidance and support. For not spoon-feeding me all the time and for letting me figure out some things myself. For being tenderly harsh as and when required. For giving freedom to think but also making me learn how to work with constraints. For being friendly and approachable. For being patient

with my impatience. Chakradhar, for being a teacher so knowledgeable and kind that I always felt immensely confident while executing my designs. For being absolutely dedicated to imparting his precious knowledge generously to the students. For clarity and crispness in his feedback supported by factual backing as to why something does/ does not work. For accepting me as his student and guiding me through one of the most important design projects of my life. Tarun, for his frank feedback throughout my course at NID. For teaching the module called ‘Elements of Composition’ in first year (Foundation, 2013) that got me inclined towards Graphic Design. For fairly critiquing my work through all the subsequent juries and telling me which aspects to improve upon. DY Works and my team, Team Digital, for giving me the opportunity to work on this

project and introducing me to how the industry works. For letting me meet new people from various fields with new ideas and perspectives towards life.

to expand my boundaries. For opening their diversely beautiful minds in front of me and inspiring me to keep learning constantly.

Vivek Menon, for clarifying my doubts always. For being a brilliant competitor and an even brilliant friend.

My teachers and friends in France, for making my student exchange program a brilliant learning experience. Especially, Monsieur Adrien Cuingnet for teaching me Motion Graphics and Madame Sonia Da Rocha for being an excellent teacher of Typography.

Harshika Jain, Muskan Jain and Vaishnavi Kandwal for being my friends, mothers and sisters. For taking care of me and giving me honest feedback on various stages of the project. Saumya Gupta, for giving me the courage to do the right thing. For being my friend and an excellent inspiration to work harder calmly. For listening to me from miles away. All my friends and batchmates at NID for shaping me into a refined individual through the time spent with them. For being brutally honest sometimes (/most of the times) while feedback sessions, which challenged me

Mom, Dad, Sister and God for being my rock solid support and for staying by my side through thick and thin. Cities of Ahmedabad, Mumbai and Bangalore for gently embracing me in their charm; and for providing excellent work opportunities and countless memories.

My flatmates in Mumbai and Bengaluru. Especially, Mimansa Tripathi for meeting me by coincidence or by destiny and then inspiring me every day to work to my highest potential. Kasturi Amma, for making delicious nutritious food that was my fuel away from home. Dua Lipa and OneRepublic for their music, Uber for VIP transit, country of Italy for its pizza that kept me going. SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Preface

Hello, World! My country is called India. With so much diversity in nearly everything that the mind sometimes gets amusingly boggled. And when it comes to graphic design, the boggle of the mind is mind-boggling. Why? Because of India’s huge population and rich diversity. So many people, so many design perspectives and so very many creative abilities. There is lot of experimentation, mix-andmatch, failure and success and lots and lots of beautiful design. In the winters of 2016, I got a NATIONAL INSTITUTE OF DESIGN

golden opportunity through the student exchange program to explore European graphic design for an entire semester at a French design-school called the École Supérieure d’Art et de Design de Reims, situated in Reims, France. In Europe too, there is a lot of experimentation, mix-andmatch, failure and success and lots and lots of beautiful design. But the core difference between European countries and India is that in the current scenario, a substantial percentage of European (and western) graphic design is “good design”, as agreed universally. While in the case of India, in the current scenario, a substantial percentage of graphic design is “bad design”, as agreed universally.

So what makes any design “good design”? I’ve been trying to find the answer since the past four years when I had started taking formal education in design at one of the world’s most prestigious design schools i.e. the National Institute of Design, India. And I did get some answers. But not enough answers. Yet. So, when this project of “redesigning” a firm’s website was offered to me I grabbed it immediately and registered it as my Graduation Project. An opportunity made of pure gold. An open challenge to myself. To redesign would mean to convert a supposedly bad/

obsolete design into good design. Do I possess the ability to do that? Will I succeed in doing so? The quest to find that answer was the essence of what kept me motivated throughout this sixmonth journey.

INTRODUCTION

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

“Ethusiasm propels the world.” -Victoria Erickson

NATIONAL INSTITUTE OF DESIGN

The Institute: The National Institute of Design

Source: http://www.nid.edu/Userfiles/photos/29/DSC00010.JPG

The National Institute of Design (NID) is internationally acclaimed as one of the foremost multi-multidisciplinary institutions in the field of design education and research. Through three campuses in Ahmedabad, Gandhinagar and Bangalore, NID offers professional education programs at Undergraduate and Post Graduate level with five faculty streams and 18 diverse design domains. NID has established exchange programs and ongoing pedagogic relationships with more than 55 overseas institutions. NID has also been playing a significant role in promoting design. NID is a unique institution with problem solving capabilities, depths of intellect and a time tested creative educational culture in promoting design competencies and setting standards of design education. The rigorous development of the designer’s skills and knowledge through a process of ‘hands on, minds on’ is what makes the difference.

Knowledge Management Centre (KMC), NID Paldi Campus, Ahmedabad. SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

The Client: DY Works

Alpana Parida, Managing Director

Jagpreet Sandhu, Creative Director

Boris Gomes, Head of Digital

Arjun Panwar, Marketing

DY Works is a human-centric business design firm that helps businesses lead at the speed of change. Working at the intersection of Business, People and Culture, they create solutions that are deeply rooted in human beliefs, psychology and behaviour. Their work pivots on design thinking as the fulcrum for approaching business challenges, allowing them to uncover new opportunities.

Branding and later merged with Yellow design as DY Works, they have grown to become one of India’s leading design thinking firms. Today, the world is in the midst of permanent and profound changes in the cultural and consumer landscape of the world, remodeling consumer attitudes and expectations.

and yet, so fragmented. So individualistic, and yet so collectivist. So liberated, and yet constantly yearning for our roots. These dualities and conflicts have disrupted entire ecosystems, be it political, social or economic. Linear ways of thinking and doing business are no longer relevant in a world that diverges and converges, only to diverge again.

creating new ways of thinking, interrelationships and global awareness. Today’s consumers are blasé, questioning, promiscuous, seeking the new – constantly. The fleeting attention spans are a way of life, and businesses that banked on loyalty are finding it hard to predict next year’s sales figures.

Founded (1997) as DMA NATIONAL INSTITUTE OF DESIGN

Never before has the world been in as much flux as today - we have never been so connected

Technology is driving society at a pace unparalleled in history,

The speed of change in today’s world is fuelled by the blurring of boundaries caused by technology and innovation.

Consumers today inhabit an ever-connected, ever-changing ecosystem – making it imperative for businesses to identify newer opportunities that allow them to engage with consumers in a meaningful way. At DY Works, they help businesses identify and build opportunities that create disproportionate impact.

Personal Introduction I am Saumya Goyal who used to be a straight-A student in all the classes in school. Now I am not. But I am definitely more sorted in my brain and content in my heart. I chose design without knowing much about it. And I am so glad I did. Because I feel that design, apart from making us more informed, makes us a better person, more humble, more considerate of others. It refines us as well as our surroundings. Don’t you feel the same?

C’est Moi, Creative Intern

Till the end of class 12 CBSE Board Examinations, I did not know which field should I choose for higher studies. I got a very high academic score and easily got through various commerce colleges of the very prestigious and highly sought after Delhi University. But I was also preparing for Law, Management and English Hons. entrance examinations simultaneously. I applied for NID too as my schoolmates had said that I “drew well”. I miraculously cleared the written-test, studio-test and the interview without any coaching, which left me feeling like an absolute design-genius. Genius? I laugh.

Begin the first year of college, I felt the exact opposite of that. I was sitting amidst the finest design students of India (and NRIs too). They all were the cream of the nation. But I felt like I was in the lowest creative-ability rung. Oh, so filled with confidence I had been when I had gotten selected. But soon I realized that everybody here was talented to the last cell in their bodies. No more did I get soaring high grades. I was an average design student. Struggling. All the time. Studying from books was easy for me. But creating mesmerisingly beautiful as well as utility based designs out of thin air? It felt like magic that I desperately craved to learn. The first year i.e. Foundation taught me how to learn, unlearn and relearn. From sleepless nights of making color-wheels, flowers of life, cross-sections of exploded cubes, architectonic spaces; adjusting one pixel space in a composition made out of black and white dots to going to a village of Gujarat and mapping the whole village out by live sketching, the first year was a real eye opener as to where I stood. But it was important. Solid training is what leads to smooth results. I worked hard and got the department of my choice i.e. Graphic

Design which falls under the faculty of Communication Design. Why did I choose Communication Design? Let me tell you that most conflicts, misunderstandings and wars that happen between people/countries are because of either miscommunication or lack of communication. Why do lovers/spouses fight? Why don’t a son and a father get along? Why does one nation want to drop a bomb on another? Poor communication is the root cause behind all of this most of the times. If I learn how to communicate with clarity and impact I can avoid misunderstandings in my life. If I make the act of communication my profession then I can help others avoid conflicts. Who knows that in the future my effective communication can stop a nation from bombing another nation? That is why I chose Communication Design. The initial years in Graphic Design made us equipped with knowledge of color, composition and layouts, typography, image making, packaging, branding and photography which serve as essential tools to execute the ideas in our heads onto paper, digital screens or any other medium. The later years

taught us about motion graphics, publication design, information design and user experience and interface design. Each semester’s end was marked by a major Design Project that would enable us to identify a problem from various walks of life and then come up with an effective communication design solution for that. Through the course I have addressed problems in the field of the Indian Railways (food packaging on-the-go); designed a typeface for Bengali for the shortage of typefaces in vernacular languages; designed emoji/stickers for LINE design challenge catering to Indian users especially women; branded Prime Minister’s “Uniting India” exhibition; and done other projects that cover the diverse branches of graphic design. The only branch that I did not get to explore to my heart’s content was User experience and User Interface design. So when I got a project involving UI/UX, a new door to possibilties was opened for me in the field of communication design. And since then I have been head over heels in love with my Graduation Project and UI/UX.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Why this project?

When I got the first smartphone of my life I saw a pre-installed app called the Google Play Store in it. It seemed like the mother of all apps, literally giving birth to baby apps. I started installing and deleting new apps every day. Some were games while some were highly useful in day-to-day life. Being impressed by their utility I became slightly interested in how they were made. When I came to NID, I got the opportunity to study Graphic Design under the umbrella of Communication Design. This stream included modules mainly around Composition, Color, Typography and Motion Graphics. I underwent these modules and somewhere along the way came across the term “UI/ UX Design”. At first it NATIONAL INSTITUTE OF DESIGN

seemed like a foreign term to me. But later, after delving a little deeper into it I realised that it is that branch of Communication Design that deals with designing enriching experiences for users and making interfaces that help the user and the product to interact with each other. My old love for installing, deleting and reinstalling apps came back, along with new found love for designing websites. Backed with 3.5 years of Graphic Design knowledge that would serve as a solid base, I now felt well-equipped to design apps whose vast spectrum I had once craved to explore. And lo! I got a project! My project was to redesign the desktop website of a design firm. Later, the firm realised that today’s population prefers using smartphones more as

a phone proves to be a very easily accessible and affordable platform. Thus, my design brief was redefined to designing the mobile version of the website. This was exactly what I had wished for. Hence, this project.

SECTION 1

REGISTRATION AND GROUNDWORK

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Confirmation

Registration CONTEXT AND DESIGN BRIEF DY Works, Mumbai recently acquired Idiom, Bangalore and the two design-centric organisations are coming together to create a joint offering. Hence, one must understand the strategic and symbiotic relationship of the two organisations and arrive at what would be the joint offering of the two agencies across Mumbai and Bangalore. Thus, the project brief is to reimagine and redesign the website of DY Works.

NATIONAL INSTITUTE OF DESIGN

Project Proposal

Page 1 of 2

GRADUATION PROJECT PROPOSAL

CONTEXT

DY Works, Mumbai recently acquired Idiom, Bangalore and the two design-centric organisations are coming together to create a joint offering. Hence, one must understand the strategic and symbiotic relationship of the two organisations and arrive at what would be the joint offering of the two agencies across Mumbai and Bangalore. Thus, the project brief is to reimagine and redesign the website of DY Works.

BACKGROUND STUDY

For a website to be redesigned it is needless to say that thorough research and immersion are pre-requisites. Thus, - Deep analysis of the existing website; - Deep analysis of the competitors websites; - And research and analysis on the great websites of the world, both in terms of UI and UX, have been carried out till now. - A workshop has also been conducted inviting all the top officials and stakeholders of the company asking them which direction must the company take and what would be its new image.

OBJECTIVES

• • • •

Extensive research in Web and App design domains. Delving deep inside the field of User Experience (UX) involving creating user personas, taskflows and wireframes. Learning User Interface (UI) design and coming up with iterations for the website. Most importantly, creating a meaningful website that caters to the needs of the target group and seamlessly provides solutions to their problems.

Page 2 of 2

BUDGET ESTIMATE

Since it is a web-based project, there are no material/ machine expenses. Yet,the following expenses will be incurred during the course of the project: 1. the cost of travelling for the purpose of guide visits (Air fare INR 8,000 *3 = INR 24,000); 2. the cost of final graduation document (roughly INR 3,000); 3. contigencies (roughly 10% of {24,000+3000}= INR 2,700) 4. the demand draft by sponsor to NID (INR 5,000); 5. and the stipend (INR 60,000* 6 months = INR 3,60,000) 6. Hence, the total = INR 3,94,700/-

END DELIVERABLES

The end deliverable would be a website for the company with its most important pages, navigation systems and other important UI and UX elements.

PROBLEM SETTING

•

• •

The problem/ research question is to crack the shortcomings of the existing website and roll out the new website with a fresh and rejuvenated image. The new direction that the firm wants to take must be laid out clearly. Keeping the merger of the two organisations in mind, the newly designed website must convey the objectives and prowesses of both the companies.

Student Saumya Goyal

Final Graduation Project Guide Mr Chakradhar Saswade

Sr. Designer | Faculty, Communication Design | Coordinator, Information & Interface Design | R & D Campus NID, Bengaluru | +91-9480-34-36-37

Coordinator Dr Tridha Gajjar

REDEFINED BRIEF DY Works initially planned to merge with Idiom Design but later this merger was cancelled. Also, the firm realised that today’s population prefers using smartphones more than desktops because a phone proves to be a very easily accessible and affordable platform. Thus, my design brief was redefined to designing the mobile version of the website for DY Works.

Date

Associate Sr. Faculty | Programme Coordinator, Graphic Design | Paldi Campus, NID, Ahmedabad | +91-79-26629 646

METHODOLOGY

The methods employed would involve research, workshops, interviews and surveys, creation of user personas, user journey mapping, information architechture and site maps, wireframing and user-interface generation. This would be followed by user-feedback and rounds of corrections and iterations and parallel documentation, till the final outcome is achieved.

PROJECT TIMELINE

(Year 2017)

Mar1

Mar15

• Research • UX- Personas, Taskflows, Wireframes • User Feedback and Corrections • UI- Iterations,

Apr1

Apr15

May1

May15

Jun1

Jul 15

STRATEGY • Research • User Experience- Personas, Taskflows, Wireframes

• User Feedback and Corrections

• User Interface- Iterations, User Feedback

Feedback • Documentation

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Redefined Project Timeline

(Year 2017)

• Research • UX- Personas, Taskflows, Wireframes • User Feedback and Corrections • UI- Iterations, Feedback • Documentation

NATIONAL INSTITUTE OF DESIGN

Mar 1

Mar15

Apr1

Apr 15

May 1

May 15

Jun 1

Jul 15

Aug 1

Aug 15

Sept 1

Sept 15

On User Experience and Interface Design

User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users. User experience design includes elements of interaction design, information architecture, user research, and other disciplines, and is concerned with all facets of the overall experience delivered to users. User interface design (UI) or user interface engineering is

the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals (usercentered design). Fundamentals of Gestalt psychology and visual perception give a cognitive perspective on how to create effective visual communication. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions

and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs. Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered on their expertise, whether that be software design, user research, web design, or industrial design. SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

“Never be afraid to try something new. Remember amateurs built the Ark, professionals built the Titanic.” - Anonymous

NATIONAL INSTITUTE OF DESIGN

SECTION 2

RESEARCH

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Website Audit Before everything else, a thorough audit and analysis of the existing website were made. The weak points of the site were mapped page-wise initially. Broadly, it was observed that the website had a lot of content in the form of text and images but they lacked hierarchy. There was visual clutter and image treatment was not cohesive.

PAGEWISE WEBSITE AUDIT HOME PAGE

- needs a powerful hero image - no feel of a design-centric firm - fix illegibility - use carousel/ slider - clutter increases cognitive load - eliminate some elements - fix photography - chose a better grid - very meek and weak image

TEAM PAGE - text is long, monotonous - need for hierarchy in text - photographs need croppingÂ NATIONAL INSTITUTE OF DESIGN

WORK PAGE - explanation of projects is too long - the tile icon is too small (project viewer) - needs high quality project shots

AFFILIATES PAGE - pixelated color-images - mangled proportions - why a border around some images? - some text illegible

PRACTICES PAGE - good opening image - boring text - use hierarchy - alignments need to be reworked - images are of varying widths

BLOG PAGE - illegible, distracting elements - choose better grids - stretched images

EXPERTISE PAGE - no difference from other pages - purely monotonous text - lacks hierarchy Similarly, all the major pages of the existing website were assessed. SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

CLUTTERED NAVIGATION BAR

TOO MANY SUB MENUS

TOO MUCH HARD SELLING

NATIONAL INSTITUTE OF DESIGN

BUT,

I was advised that carrying out a holistic audit spanning across all the pages of the website and then categorizing those findings under semiotic, navigational and experiential elements would yield richer and more meaningful information.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Cross Category Website Audit

SEMIOTIC

NAVIGATIONAL

EXPERIENTIAL

• fix illegibility • needs powerful hero image • eliminate some elements • choose a better grid • text is unusually long and monotonous • need of hierarchy • fix photography- images have mangled

• use carousel / slider where appropriate • place calls-to-action(CTAs) at correct

• feel of a design-centric firm missing • throughout the website lots of cognitive-

proportions, fix stretched images

• fix color • borders around images are not required • rework alignments • fix the varying widths of image-boxes • tile-icon is too small • work-explanation is too long and not properly categorised

• remove distracting elements • create sufficient difference between

various pages so as to eliminate confusion • color palette is very dull • fix the font size and choose better typeface combinations • lack of breathing space i.e. less negative space and too many distracting elements • too much unnecessary content

NATIONAL INSTITUTE OF DESIGN

places, sometimes they are missing sometimes they are not required • make an internal side-scroll bar visible to the user so as to show where in the page he is • back-button, previous-button, nextbutton etc should be used and should be sufficiently prominent

load due to clutter, overwhelming feel due to too much information on one page • lacks aesthetics • create sufficient difference between various pages to avid confusion • photography of team does not give a sense of their true selves, looks like any other model-photoshoot • highly monotonous experience overall due to lack of differentiation and hierarchy • too much hardselling due to awards and achievements being stuck on every page

Competitive Analysis 1 Andrew Jackson’s <willdesignfor.co.uk>

SEMIOTIC

NAVIGATIONAL

EXPERIENTIAL

• pastel color schemes is soothing • politely assertive typography • enough contrast between various projects

• bi-directional navigation i.e. both

• clean feel due to minimal elements • very simple and easy to grasp • enhanced convenience in navigation due

due to usage of differently colored backgrounds • lots of breathing space (negative space) • some text on projects is illegible • some projects require zoom-in shots • some options not visible when background is black

horizontal and vertical scrolls are active • usage of arrow keys to scroll is active which make navigation very easy • very less calls-to-action (CTA) buttons

to arrow keys and simple format

• soothing experience for eyes • central focus of project with no distractions or clutter

• minimum cognitive effort due to very

less elements and least number of CTAs

• straightforward and polite

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Competitive Analysis 2 Fabernovel’s <institute.fabernovel.com>

SEMIOTIC

NAVIGATIONAL

EXPERIENTIAL

• bold and thin typography makes the text

• side-scroll helps to keep track of one’s

• the visual language and the look and the

prominent, confident and polite • micro-interactions are on point • finite color palette of just two colors works well • there is color coding on the careers page according to job requirement which adds to ease and convenience

NATIONAL INSTITUTE OF DESIGN

location in the website • calls-to-action (CTAs) are at appropriate locations • vertical navigation is very natural due to learned behaviour over time • each project has a window of its own as overlay and a close button so it is convenient to view the project in full size without being redirected to another page

feel correspond to their philosophy

• straightforward, bold and confident image is projected

• clarity of thought is emerging • micro-interactions give a richer and wholesome experience

• instead of usual menu terms like “about”,

“work” etc. they have defined their own terminology which gives a newer and better experience • the color palette gives a wise and mature look to the website

Competitive Analysis 3 Big Youth’s <bigyouth.fr/en>

SEMIOTIC

NAVIGATIONAL

EXPERIENTIAL

• the tile/ card structure of presenting

• header bar is on the side which tells

• very youthful feel • bold, loud and confident • enthusiastic due to bright colors • excitement and passion • flashy elements look childish • the whole brand/ website comes off as a bit too young and not wise,

information (be it images, text,videos, etc.) works well as huge chunks of information has been neatly arranged • two highly contrasting typefaces, one serif and another san-serif sync well with each other • bold usage of color is a brave and confident move • the color palette is not restricted, this at times creates visual confusion, clutter and jarring visual atmosphere • too much cognitive effort due to many headers, CTAs and links • the strikethroughs might have a negative effect subconsciously • body text is illegible at places due to backdrops clashing with text • clever usage of basic shapes on the expertise page to explain and present complex domains easily

where the user is on the website • the burger menu adds one extra click • projects-page has proper “guiding arrows” that help in easy bidirectional navigation • CTAs are at correct places, but in excess

yet with a lot of energy and a promise to work passionately in the near future

• disruptive and out-of-the-box • trendy and “cool” • a bit overwhelming • fun experience due to interesting micro-interactions • contact-page form is a friendly game-like experience • an amalgamation of clean visual experience with intentional chaos and playful visual clutter

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

The Workshop STAKEHOLDER OPINION

An understanding of the stakeholders’ opinions of the company was created with regards to user-experience, as UX substantially involves emotional process.

THE WORKSHOP

A workshop asking the top management certain questions about the new spirit, directions and goals of company was conducted.

WHY WORKSHOP

Through the stakeholders’ answers, a base for information architecture and hierarchy was developed.

CONTENT BUCKETS

What content blocks would go on each page was decided based on the tally marks and subsequent hierarchy obtained from all the primary research.

NATIONAL INSTITUTE OF DESIGN

P.E.T. Analysis (Persuation, Emotion and Trust) Persuasion, emotion, and trust are critical factors for creating successful online interactions. The growing reliance on e-channels makes an engaging customer experience more important than ever. While traditional user-centered design focuses on designing for usability, it is now essential to leverage the science of PET to influence users. Whether it is a website, application, or product is informational, functional, or transactional, PET design teaches how to motivate people to make decisions that lead to conversion.

Browser Feel

Navigation Feel

Reputation Building

Tone

• • • •

• Engagement • Gratification

• • • • •

• • • •

Attitude

Motivators

Facts

Contrast

• • • • •

• • • •

• • • • • •

• • • •

User Friendly Engaging Impressed Procedural

Confidence Mindfulness Strategic Progressive Receptive

Goal Oriented Hands-on Clarity Project Manifesto

Project Manifestos Differentitation Client List Thought Leadership Social Validity

Clear Visual User Friendly Thoughtful Intentful Metrics

Savvy Fluent Confident Collaborative

Capabilities Consulting Intellectual Differentiation

Categorisation

Common Methods

Authority

Associations

• Markets • Projects/ Case Studies

• Eclectic • Agile • Adaptive

• • • • • • •

• • • • •

Emotion

Trust

Projects Culture Manifesto/ Impact Procedure Matrics Testimonials Accolades

Problem Solvers Opportunity Finders Pride Sector Agnostic Business of Design

Pursuation SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Episodic User Journey (Storyboard) The firm can broadly have two kinds of users - either clients who would like to avail the firm’s services or job seekers who would like to contribute in the firm’s services.

Below, I have tried to make a storyboard of the two major kinds of users. This would help in creating user personas.

USER 1: FRESH GRADUATE/ JOB SEEKER

NATIONAL INSTITUTE OF DESIGN

USER 2: CLIENT SEEKING THE FIRM’S SERVICES

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

User Personas THE CLIENTS Persona 1: Indian Client

NATIONAL INSTITUTE OF DESIGN

Persona 2: International Client

THE JOB SEEKERS Persona 3: Marketing Graduate

Persona 4: Design Graduate

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

User Journey and Sitemap

most probable route by client most probable route by job seeker points of conversion Home

About Us (A)

Expertise (E)

Work (W)

People (P)

Contact (C)

Expertise W

W C

Work E

About Us

P C

C W

People E W

About Us

P W

P E

A P

C E C

P C

A C

Contact E

People A

E C

A C

C E C A W

People

Contact P

Work A

Expertise

About Us

Expertise W C

A C Work A

Contact

C A

C Contact

DEFINING USER JOURNEYS Permutations and combinations of all the possible paths that a user could take through the website were charted. Later, the most viable routes (based on previous experience and sheer logic) were short-listed. NATIONAL INSTITUTE OF DESIGN

C A

Ideation Sketches PEN AND PAPER I sketched out the ideas that I had in mind onto paper. These are some snippets of the same. Ideas were selected and then digitized to get a cleaner feel to understand the basic skeleton of the website.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Low Fidelity Wireframes

LOW FIDELITY WIREFRAMES

USER TESTING

Or blueprints for the UI were sketched out keeping in mind the experience as well as the aesthetics.

A working prototype using the wireframes itself was made to point out mistakes and shortcomings. A sample of 5 people within the organisation and 5 outside was used to test the prototype.

These were the initial wireframes for testing.

NATIONAL INSTITUTE OF DESIGN

Wireframes Post User-Testing

POST FEEDBACK A general feedback that almost all the participants of the sampling gave was that the navigation bar situated at the bottom came in the way of scrolling. It was observed that they accidentally touched an option on the navigation bar

which led them to another page much to their annoyance. Hence, I though of a vertical navigation bar rather than a horizontal one. This vertical bar was also tested by positioning it on various corners and edges of the phone’s screen. Finally, it was placed on the top right corner of the screen where one does not touch by

mistake while scrolling. When another round of feedback was carried out, the participants found it very easy to navigate. They also said that this is a new and interesting placement as they had not seen such a design for a navigation bar before.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

SECTION 3

MOOD BOARD EXPLORATIONS

NATIONAL INSTITUTE OF DESIGN

Concepts for the New Image

DY Works wanted to roll out with a new image. Hence, a concept needed to be created that would serve as the base for the visual language of the website. Following are the conceptual mood boards explored.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

FUTURISTIC

NATIONAL INSTITUTE OF DESIGN

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

FULL CIRCLE

NATIONAL INSTITUTE OF DESIGN

INFINITY SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

MIRRORS

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Selected Concept: Infinity After presenting my concepts in front of the team the concept of “Infinity” was chosen by the Creative Head, Jagpreet and the Head of Digital, Boris. I was asked to delve deeper in the metaphor of infinity to find out where else it exists and which phenomena are similar to the concept of infinity.

NATIONAL INSTITUTE OF DESIGN

I N F I N I T Y

and beyond

Barrierless Thinking I noted down all the words that come to mind when one thinks of the word “infinity”. For some people, infinity is related to continuum. Others also think of it as a mathematical theory. Some relate infinity to spatial feelings like vastness. Some other associate it with emotions like calmness or overwhelmingness.

VAST

UNLIMITED CIRCLE

Infinity

GENEROUS FREEDOM

LENGTH

BOUNDLESS

CONTINUITY

CALM

SURPLUS PEACEFUL

EMPTY

ENDLESS

ETERNITY MATHEMATICS

SEAMLESS

ABUNDANCE

TIME

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

The Infinite Phenomena These are some of the images that come to mind when one thinks of infinity or phenomena that are close to infinity, endlessness or prolonged continuity.

O U R O B O R O S

NATIONAL INSTITUTE OF DESIGN

I N F I N I T E

S T R U C T U R E S

M O B I U S

S T R I P

I N F I N I T E

F R A C T A L S

I N

F R A C T A L S

N A T U R E

P I

2 2 / 7

3 . 1 4

S I E R P I N S K I

T R I A N G L E

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Infinity in Nature

My mentor suggested me to find out instances of infinity or close to infinity that exist in nature. The ocean, forest and the sky were such instances. With a vast marine life; flora and fauna, and unending depths and heights respectively, these instances are nearly close to infinity.

T H E

O C E A N

T H E

S K Y

The vastness of the ocean. Its depths and area. The winds blowing over it. The horizon. Forests spanning across millions of acres of land. Mountains covered with dense layers of vegetation. Heights of the sky. Breeze. Millions of stars, galaxies and the multiverse. Constant cycle of life and death. Being born, being dead, being reborn. Continuity of space and time.

NATIONAL INSTITUTE OF DESIGN

T H E

F O R E S T

L I F E

A N D

D E A T H

SECTION 4

COLOR AND COMPOSITION EXPLORATIONS

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Color and Shape Palette I proceeded with deriving colors and shapes from the elements of ocean, forest and sky. These are the explorations that emerged.

When thinking of the calm ocean, stable shapes like a squares (both dynamic and static) and horizontal lines came to mind.

NATIONAL INSTITUTE OF DESIGN

Coniferous forests bring out triangles. Vertical lines come to mind when trees are looked at individually.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Back to the Basics In order to decide the color palette for the new website, I had to recall color theory which I had studied during the first year in college. I tried to derive palettes from every category and weighed their pros and cons. Apart from this being part of the project, it also served as a very good revision for me.

Complementaries The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring. Complementary colors are tricky to use in large doses, but work well when you want something to stand out. Complementary colors are really bad for text.

NATIONAL INSTITUTE OF DESIGN

Analogous They usually match well and create serene and comfortable designs. Analogous color schemes are often found in nature and are harmonious and pleasing to the eye. Make sure you have enough contrast when choosing an analogous color scheme. Choose one color to dominate, a second to support. The third color is used (along with black, white or gray) as an accent.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Monochromatic In addition to its versatility, a onecolor palette can benefit the design creating a harmonious, visually cohesive look. It doesnâ&#x20AC;&#x2122;t draw attention to itself, but lets the content shine. It can help associate brands with a specific, memorable color. Instead of making the design even busier and confusing with a lot of colors, a one-color palette can help make a layout look cleaner and more organized.

NATIONAL INSTITUTE OF DESIGN

Duotone This kind of a palette that is restricted to only two colors is minimal and easy to apply. It gives off a psychedelic vibe if the colors are very saturated and contrasting. If the colors being used are toned down and subtle then the overall design looks soothing and clean.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Fluorescent These color-schemes typically have bright colors, mostly neons. The colors are very bold and are usually against a dark background. Often they give a glowin-the-dark effect due to the stark contrast that they produce. These colorschemes should be used carefully as they can sometimes be jarring to the eyes if used in excess. However, when used sensibly they have the power to attract the maximum amount of attention in the least time.

NATIONAL INSTITUTE OF DESIGN

Compositions on Infinity

I created abstract compositions keeping in mind the idea of infinity. The purpose of creating these abstractions was to test out the derived color-palettes on them. The colored compositions were placed adjacent to each other in order to compare various color combinations.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

SECTION 5

LAYOUT ITERATIONS

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR

ABABABABABAB

ABABABAB

ABAB

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE

#f197b1

NATIONAL INSTITUTE OF DESIGN

#84a8e6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

After exploring color and compositions, I moved on to layouts. I tried to integrate color, text, images, shape elements in a single layout to get an idea of how it would look and feel as a whole.

Lorem ipsum dolor sit

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT

ABABABABABAB

ABABABAB

ABAB

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE

#f7b973

#0b0028

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR

ABABABABABAB

ABABABAB

ABAB

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE

#ff7376

NATIONAL INSTITUTE OF DESIGN

#00067a

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR

ABABABABABAB

ABABABAB

ABAB

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR

#ea4e7d

#96dbb3

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR

ABAB

ABABABABABAB

ABABABAB

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR

#e6232c

NATIONAL INSTITUTE OF DESIGN

#071932

SECTION 6

ELECTRIC SHOCK

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

The Realization: Difference Between Academics and the Industry

I was experimenting with mood boards and colors and compositions. But suddenly one day, I was informed that there was a separate team called the Identity Team, that had been working in parallel. This team would come up with the new color palette for DYâ&#x20AC;&#x2122;s brand and take all the decisions related to color and typography. At first, I thought that all my efforts and work that I had been doing for the past went worthless now. But later I realized that their is a difference between academics and actual industry. In an ideal academic environment we tend to follow

NATIONAL INSTITUTE OF DESIGN

a wholesome process of design where we come up with certain concepts and develop mood boards. Then we derive colors, layouts and subsequently the visual language through them. Next we proceed to implement the designs in our heads onto paper, get feedback, iterate more, finalize and so on. But the industry works in a different way. Since projects are usually not individual projects, a lot of people are involved and so many factors need to be taken into consideration. Sometimes firms/clients need just a part of a project to be done by one team and other parts are distributed to other teams. So works gets

divided into chunks and various people handle various aspects of the project. The teams have to coordinate between each other to achieve the common goal on time. This happens often and I learnt this while working on board. And the work that I had already undertaken did not go waste at all. It added to my learning and reasoning skills. It helped in uncovering that how a project is built from scratch when absolutely no design guidelines have been laid down. So, coming back to the project, the Identity Team suggested a color palette and typeface that

would be used henceforth in all its branding elements, website, collateral and other things. Following these guidelines I proceeded with my design iterations with a brand new spirit.

The New Identity EXISTING IDENTITY (LOGO)

SUGGESTED IDENTITY

FINALIZED IDENTITY

This was DY’s existing brand mark. The wanted to break free from its image and wanted to emerge with a new spirit. Also, it wanted to do away with the term “works” and just wanted two letters i.e. DY.

The Identity Team suggested this logo initially. The degree symbol on top suggests the degree of impact. However, the circular holding unit was seen as a restrictive element by many. The new philosophy of the firm was about moving ahead in a constantly changing environment, thus being adaptive and agile.

The team modified the previous logo and came up with this finalized version of the new logo. It contains an ever-changing “blob” that conveys the firm’s agility and ease of adapting to change. It was also suggested that the new logo would be a “dynamic logo”, where the blob could be replaced by any other image/symbol/shape. The degree symbol and the logotype would however would stay. This would also show that the firm is highly adaptive.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Finalised Color Scheme

MUTED BRICK RED

TONES OF GREY

Warm and approachable, rooted to culture.

Strong, wise, neutral, suitable for body text blocks.

#d65b63

#8a8a8a

Finalised Typeface

Geometria Light Regular Bold NATIONAL INSTITUTE OF DESIGN

BY GAYANEH BAGDASARYAN, VYACHESLAV KIRILENKO, 2013 Geometria is a typeface of modern clean shapes that is well-suited for continuous reading, and it sets remarkably well. At the same time, it can be friendly, even flirtatious. Its distinct personality combines seeming opposites. At times it may appear serious, at times playful.

SECTION 7

THE FINAL INTERFACE

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Home Page // Landing Screen // Iterations

Lorem ipsum dolr sit mit amiuo helenju khim fditer orfedt tim greo. brid saawil plojfer tek. Mijk ulsum kinert swen. Orenb drin kilsoh willhfn. Hdnjed sshewn jfdhf oolfl jlell, girej. Uildj diol aalp bern vsweh jfjr. Plaawoi heeb vjerp webcfo poserb jder polzxn.

INNOVATING OPPORTUNITIES AT THE SPEED OF CHANGE

Home

NATIONAL INSTITUTE OF DESIGN

About

Work

People

Contact

VERTICAL NAVIGATION BAR A new format for navigation was designed. The nav-bar rests at the top right corner of the screen as a permanently fixed element. The lower half of the screen would be used for scrolling and calls-toaction.

OPENING VIDEO MICROINTERACTION Once the user clicks the “play” button, the top half of the screen would be engulfed by an introductory video of the firm. The text “Innovation...change” would slide downwards, and align itself next to the paragraph in the gray block.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Home Page // Services // Iterations

NATIONAL INSTITUTE OF DESIGN

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

RING SLIDER The user can slide the ring over the field of expertise of his choice. The description changes accordingly below.

BLOB BUTTON The central blob (inspired from the logo) serves as the call-toaction to view projects related to that field.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Difference Page // Iterations

NATIONAL INSTITUTE OF DESIGN

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

DIFFERENCE FROM OTHERS The firm wants to lay emphasis on the fact that it is different from the branding and advertising agencies out there. Hence, a separate section dedicated to “Our Difference” was designed.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Work Page // Iterations For the depiction of the projects, instead of showing pictures of actual work directly I chose to show only a glimpse of the project so as to intrigue the viewer. So, I selected a significant element from each project and stylized it a bit to be shown as the face of the project. These are those elements that correspond to each of the projects/case studies that would go up on the project page.

NATIONAL INSTITUTE OF DESIGN

Projects: Dyna, Dotshot, Everyuth, Haldiram’s, Cropin, House of Tea, Combiflam, Banjara, CEAT, Bustan, Mom, House of Tea, Jaago, Lickables, Mother Dairy, Pragnya, Safari, PGD, Parachute, Mutti, Prabhat Volup, Safari, Swiss Tempelle, Tata Water Plus.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

EXTERNAL AND INTERNAL VIEW The first frame shows how the work page will look like on landing. The second frame appears when the user clicks on a specific project of his choice.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

People Page // Iterations

NATIONAL INSTITUTE OF DESIGN

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

GLIMPSES OF LIFE The firm wants to show snippets from its peopleâ&#x20AC;&#x2122;s lives. Hence, the page was designed in such a way that social media links are provided in an interesting manner.

SIDE BAR The firm preaches of a flatstructure throughout its management. Thus, a sidebar was proposed with a shuffle function. The shuffler shuffles profiles in a random order irrespective of the managerial hierarchy.

NATIONAL INSTITUTE OF DESIGN

Contact Page // Iterations

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

VINTAGE DIALER Taking inspiration from old telephones, a rotate-able dialer was designed.

VOICE NOTE FEATURE These days sending a voicenote by the click of a button on phones has become so convenient that it felt natural and important to include the same as an option.

NATIONAL INSTITUTE OF DESIGN

101

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

SECTION 8

MISCELLANEOUS EXPLORATIONS

NATIONAL INSTITUTE OF DESIGN

103

DESKTOP EXPLORATIONS Apart from designing the mobile-version of the website, I explored the space of a desktop screen also. I made the following explorations and iterations keeping in mind how the website would look should the company need to expand its site on computer screens in the future. The former explorations are based on the new color scheme given by the company itself, while the latter are those which did not have a pre-decided color palette or typography.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

105

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

107

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

109

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

111

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

113

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

115

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

117

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

119

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

121

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

123

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

125

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

127

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

129

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

131

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

133

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

135

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

Desktop Exploration

137

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Desktop Exploration NATIONAL INSTITUTE OF DESIGN

139

VISITING CARDS Also, I tried to explore some other aspects of the firm’s identity. These include the company’s visiting cards. I tried to be fearless in the usage of color. Generous amounts of contrasting colors have been used boldly to give the firm a bold and confident image.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

141

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

NATIONAL INSTITUTE OF DESIGN

143

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

Conclusion

The past six months taught me a lot of things- both about design and life in general. I absolutely rejoice when I look back on my decision to have chosen a project related to user experience and interface design. When I began the project, I used to think creating websites and apps is all about their visual appeal and beauty. But when I started working on this project I learnt that the visual aspect is only a part of the whole process. User experience or the way a user feels when traversing through the site is what matters primarily. For that one needs to research a lot on the types of users itself. The

NATIONAL INSTITUTE OF DESIGN

aspirations, needs and problem of the users need to be scrutinized through a clear, unbiased and powerful lens. Post that a series of steps or the user journey need to created. This journey should be as easy and hassle-free as possible involving the least number of steps. Later, the information needs to be arranged in a sensible manner thus creating a sound information architecture. After that, wireframes need to created highlighting the basic structure of the site. These should be tested thoroughly among a sample of users and their feedback should be incorporated in the next round of wireframes. Once all these research-based,

145

experiential and navigational factors are in place only then and only then should one proceed with the visual language of the site. Typographical and color decisions, alignments and spacing, micro-interactions and animation come into play at this phase of design. Iterations for the actual interface are made and tested among users. And in this way the final design is reached. Having learnt that through this internship slash graduation project, I am immensely elated at the skills and work experience that I have gained. When I begin any project I love to give my all to it so as to bring it to an appropriate end. I wish I had the

chance to be there till the end of this project but nonetheless I am glad that I got to be a part of it. It taught me time-management, team-work, adaptation to a changing environment, crisp communication skills and many other things.

absolute honour for me to design the website of an entire company and giving it a distinct identity in the market. The company is considering the design as one of its options but nonetheless to contribute for this process was in itself a feeling of pride and joy.

Working in the industry taught me that one needs to learn from others who are from the various professional fields. It gave me a chance to meet new people and form deep friendships. Owing to this project I also got a chance to stay in the “city of dreams” i.e. Mayanagri Mumbai. I explored the city and have collected some beautiful memories. Regarding the project, it was an

In conclusion, I would like to say that craving for knowledge, one must always keep learning new things everyday. To be able to work together peacefully, communicate effectively and waking up enthusiastically every day is the ultimate key to success and happiness.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

References

BOOK REFERENCES:

WEB REFERENCES:

IMAGE SOURCES:

Norman Donald. The Design of Everyday Things. USA: Basic Books, 1988.

“The awards of design, creativity and innovation on the internet” <https://www.awwwards.com/>

Krug Steve. Don’t Make Me Think. USA: New Riders Press, 2000.

“Typography Cheatsheet: A comprehensive guide to using proper typographic characters, including correct grammatical usage.” <https://www.typewolf. com/cheatsheet>

http://zdnet4.cbsistatic.com/ hub/i/r/2014/08/27/8c7c15b62da9-11e4-9e6a-00505685119a/ resize/1170x878/14d2cccce9a0f4da891f26a859277e88/iphone-002brand-642x481.jpg

Weinschenk Susan. 100 Things Every Designer Needs to Know About People. London: Pearson Education, 2011. Lupi Georgia, Posavec Stefanie, Popova Maria. Dear Data. UK: Penguin Books, 2016. Garrett Jesse James. The Elements of User Experience: User-Centered Design for the Web and Beyond. UK: Pearson Education, 2010.

NATIONAL INSTITUTE OF DESIGN

“Font Recommendations & Lists” <https://www.typewolf. com/recommendations> “Flawless Typography Checklist” <https://www.typewolf.com/ checklist> “UI Interactions of the week” <https://medium.muz.li/uiinteractions-of-the-week-912bc9fede203>

http://68.media.tumblr. com/17c094002876e67bc81f5d5e7fd8be1a/tumblr_ogjp90BFR71u4untlo1_1280.jpg http://ww2.hdnux.com/photos/42/62/36/9119637/3/rawImage. jpg https://img00.deviantart. net/465c/i/2013/283/7/2/podolski_9_by_riikardo-d6pxibq.jpg https://i.pinimg.com/736x /7b/25/25/7b252545a05aaa800ca822a06d949327--orange-photography-still-photography.jpg

https://i.pinimg.com/736x/fe/b5/82/ feb5826322efb3f86d62bf7fff7d8bfb--art-reference-graphic-designers. jpg https://i.pinimg.com/736x/8b/17/ fe/8b17fe421482f88fa71e055135fee589--mandala-black-and-white-mandala-background.jpg https://i.pinimg.com/236x /8c/62/27/8c6227e638ba49a2a3484ae7550b7399.jpg https://i.pinimg.com/736x /9d/4f/5a/9d4f5a379272cd34bfb22e42a6306ca7.jpg https://d3e2hj6q1cbgk3.cloudfront. net/arqsqs/letaaark4.jpg https://i.pinimg.com/736x/58/ ff/d3/58ffd3623177d4a0dfb32076b0772617.jpg

https://i.pinimg.com/736x/0c/0a/82/ 0c0a82165fff4bb35bc3bd63ef96ac89--polaroid-palette.jpg http://4.bp.blogspot.com/j1e7P7K-N64/UclGDLvbz_I/ AAAAAAAABVI/qz68R55iVu0/ s1600/Week+4-Lighting+&+Color+004.JPG https://i.pinimg.com/236x /51/81/33/51813327fca051291a22dbc03f170a7a--tattoo-ideas-quiver. jpg https://eprakone.files.wordpress. com/2016/10/infinity-loop.jpg https://i.kinja-img.com/gawker-media/image/upload/s-f3akmwVt--/c_scale,f_auto,fl_progressive,q_80,w_800/ unvqpqh3luve5ahosawl.jpg https://s13.favimcom/610/160305/

147

aesthetic-alternative-blue-ice-cream-Favim.com4056668.jpg https://www2.shutterstock. com/blog/wp-content/uploads/ sites/5/2014/05/img28.jpg https://pbs.twimg.com/media/Ckv12BmWYAAHdOH.jpg https://i.pinimg.com/originals/72/47/76/724776de3ee231ea821ae061e72bdce3.png http://68.media.tumblr.com/c782e61b10ec51380cc6b243472ac805/ tumblr_mxqc55Cxym1r9rsb6o1_ r1_1280.jpg https://wallpapersontheweb. net/9502-abraham-lincoln/ https://i.pinimg.com/originals/ d0/de/be/d0debe2834e47fb-

8dec69a395977267d.jpg https://uploads.disquscdn. com/images/f7f8f79cb07f71aa34d6165d2c1d95c3d9c00899c9822ca08207b1114f9d7feb. jpg

wp-content/uploads/2013/11/virgin21.jpg https://indiabioscience.org/media/ articles/art_IS_mar2017_SaneLab2. jpg

http://pre03.deviantart.net/9daf/th/ pre/i/2013/145/3/4/futuristic_clock_ by_kolegapl-d66ivv6.jpg

http://nd06.jxs.cz/823/357/ d9e806899f_102012931_o2.jpg http://3.bp.blogspot. com/-6YEUmpGdp3o/T8at1U65ZHI/AAAAAAAAAU4/ f4R25Gps08I/s1600/mao_bebe.bmp https://i.pinimg.com/736x/cd/5e/54/ cd5e54fb9608df582c22e931a6c4278a.jpg

https://oss.adm.ntu.edu.sg/ a160025/wp-content/uploads/ sites/823/2016/10/warm.jpg

http://www.rainbowfamiliesps.org/ wp-content/uploads/2017/06/building-links.jpg

https://i.pinimg.com/originals/24/ fc/5e/24fc5ee11726287d16e1d2ed521971c0.jpg http://www.yourprivateitaly.com/

https://i.pinimg.com/736x/d6/32/ ac/d632acabb604db7623e9ec649fdcf6cb--creative-pictures-photography-projects.jpg

https://i0.wp.com/digital-photography-school.com/wp-content/ uploads/flickr/259878644_166ffee54b_o.jpg?resize=717&ssl=1

http://static.tumblr.com/02cd57d8a42bdcc5300830c19dc1691e/ lage1uu/Uo6nbibvp/tumblr_static_cslgteooinwc88sg4okkc4www_2048_v2.jpg http://www.hdfondos.eu/preview/ get_photo/24319/1280/768 http://fc-oc.com/wp-content/ uploads/2017/01/Family-Connections-1920.jpg https://t13.deviantart.net/ RS-6InZzaa76TSbj5VWiQeEluVA=/fit-in/700x350/filters:fixed_height(100,100):origin()/ pre15/bc5f/th/pre/i/2012/074/6/1/ black_and_white_tempest_by_pillemaster-d4nrvac.jpg http://photobucket.com/gallery/ wp-content/uploads/2013/11/virgin21.jpg

https://indiabioscience.org/media/ articles/art_IS_mar2017_SaneLab2. jpg http://nd06.jxs.cz/823/357/ d9e806899f_102012931_o2.jpg http://3.bp.blogspot. com/-6YEUmpGdp3o/T8at1U65ZHI/AAAAAAAAAU4/ f4R25Gps08I/s1600/mao_bebe.bmp https://i.pinimg.com/736x/cd/5e/54/ cd5e54fb9608df582c22e931a6c4278a.jpg http://www.rainbowfamiliesps.org/ wp-content/uploads/2017/06/building-links.jpg https://i.pinimg.com/736x/d6/32/ ac/d632acabb604db7623e9ec649fdcf6cb--creative-pictures-photography-projects.jpg http://static.tumblr.com/02cd57d8a42bdcc5300830c19dc1691e/

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017

lage1uu/Uo6nbibvp/tumblr_static_cslgteooinwc88sg4okkc4www_2048_v2.jpg http://www.hdfondos.eu/preview/ get_photo/24319/1280/768 http://fc-oc.com/wp-content/ uploads/2017/01/Family-Connections-1920.jpg https://t13.deviantart.net/ RS-6InZzaa76TSbj5VWiQeEluVA=/fit-in/700x350/filters:fixed_height(100,100):origin()/ pre15/bc5f/th/pre/i/2012/074/6/1/ black_and_white_tempest_by_pillemaster-d4nrvac.jpg http://photobucket.com/gallery/ http://s645.photobucket.com/ user/mollyinblack/media/Summer-Sky-13.jpg.html http://3.bp.blogspot.com/_ovcnz1OJgDA/TRw7Z33lwkI/ AAAAAAAAATo/pJptMXEDpIU/ s1600/j0e0l0.jpg https://cdn-images-1.medium.com/

NATIONAL INSTITUTE OF DESIGN

max/1200/1*Xjq33zNFLdzhpFBb2ggS6A.jpeg http://www.pearltrees.com/s/ background/image/fd/68/fd687d63058916175e9939056fc798a0.jpg http://puretechhealth.com/images/ homeslide2.jpg http://www.trbimg.com/img5995e8ea/turbine/la-tr-eclipse-darkplaces-to-see-20170816 http://2.bp.blogspot.com/-DVEXrzF6E2o/UclEDdFyQeI/ AAAAAAAABUw/PQGofcffzrg/ s1600/complimentary4.jpg https://i.ytimg.com/vi/3JtP8XM05sg/maxresdefault.jpg http://www.matematiksel.org/ wp-content/uploads/2016/11/infinite_stairwell_span02-1.jpg https://i.pinimg.com/736x/cc/ e7/69/cce7695e71fa6ae755d91dfd-

7f00279a--data-visualization-visualisation.jpg http://tuonglaivietnam.weebly.com/uploads/5/6/7/9/56798189/5838036_ orig.jpg https://anythinghorror.files.wordpress.com/2015/07/horror-game011. png?w=1200 http://furkannesli.com/wp-content/ uploads/2016/07/ynhevsklszminvlaivvk.jpg https://www.prismnet.com/~dierdorf/mobius.jpg https://lh4.googleusercontent.com/ proxy/2VSOkf4m4Dejqui8Tz8f5e6iEINmsJtIn48OyivQNEtH05LOzJYEsq6kulZoY5VVTOp3K78VnHqLpSbZdk4nWSN6nsMP9EzprykO16HGhBKUdc4VOypgUq-6fLjLDYmxz8GNXspS8xUb1oqWk4UonAhgyZzJ4yU3FQMjXg6F=w1200-h630-p-k-no-nu https://impoesiable.files.word-

press.com/2016/04/missing-puzzle-2880x1920.jpg http://cdn.playbuzz.com/cdn/ dd61d597-863d-4f40-827697880dfcf5e9/58e96b3b-d58b-4b3ab6dd-4121dd9ec7a6.jpg http://ghostpresenter.it/wp-content/ uploads/2016/08/Ghost-Presenter-10-tecniche-per-mantenere-concentrazione-durante-una-presentazione.jpg http://d.ibtimes.co.uk/en/ full/1425834/transparent-samsung-galaxy-s6.png http://cdn.rsvlts.com/wp-content/ uploads/2015/02/Screen-Shot-201502-25-at-11.10.04-AM.png http://s.fishki.net/upload/ post/201503/30/1483945/39011c5411faac2d85e3f37081456e6a.jpg https://munin.buzz/wp-content/ uploads/h5p/content/10/images/file-

590703ac9d149.jpg https://www.cloudynights.com/ uploads/monthly_03_2017/post233044-0-91807100-1489315548. jpg http://lukaszkroenke.net/content/ tree_2.png https://plus.maths.org/issue55/features/kormann/triangle.png https://cdn.meme.am/cache/images/ folder247/15022247.jpg https://i.pinimg.com/736x/bc/a7/ e8/bca7e83238e16a9a3fca0fe87fb5fbdf--pink-blossom-cherry-blossoms.jpg http://cdn.wallpapersafari. com/68/14/xtrV76.jpg https://www.pexels.com/

149

COLOPHON This document has been written and designed by Saumya Goyal. This document has been set in: Adobe Caslon Pro Designed by Carol Twombly. Released by Adobe Originals Typekit Foundry. ITC Avant Garde Designed by Herb Lubalin and Tom Carnase. Released by International Typeface Corporation.

SAUMYA GOYAL • WEBSITE DESIGN • B. DES GRAPHIC DESIGN • DEGREE PROJECT 2017