The Remodel Story @Onio Design | Graduation project

MUMBAI

GRADUATION PROJECT

The Remodel Story @Onio Design, Pune A re-branding project

Mentored by, Ms. Susmita Das and Mr. Prakash Khanzode Project by, Shreya Bangard MUM13FC23 Fashion Communication 2013-2017

In partial fulfillment of the requirement for the degree of Bachelor in Design and hereby certify that in the judgement of the following jury, it is worth of acceptance.

Jury members - Names and Signatures 1.

2.

3.

4.

5.

6.

7.

8.

Signature of the Course Coordinator

Graduation project 2017 The Remodel Story @Onio Design

By Shreya Bangard Fashion Communication 2013-2017

Signature of the mentor

under the guidance of ME

The Remodel Story Like all the products, Design too has an expiry date and thus, it never lasts forever. My project also reflects the same theory, where I have tried to revamp the communication deliverables of Onio Design, Pune. So in short, its a story of a brand adapting to the changes in the industry and thus upgrading itself to keep its sparkle shining.

“You can’t stop the waves, But you can learn to surf.”

-Anonymous

Graduation Project 2017

The Remodel Story

1

Acknowledgment I have completed my Graduation project under the able guidance of my mentor, Mr. Prakash Khanzode, Co-Founder & Principal Designer, Onio Design, Pune. He always motivated me to learn more and use my skills and abilities to the core. He always pushed me towards delivering better results. I thank him for all his indispensable advise, healthy criticism and support throughout my internship in the firm.

I’ll have failed in my duty if I do not acknowledge the esteemed scholarly guidance, assistance and knowledge that I have received from the Fashion Communication department towards the fruitful completion of my project.

I am also thankful to all my colleagues at Onio Design for their suggestions and to help me keep going, despite of all the challenges.

Mere acknowledgment may not redeem the debt I owe to my parents for their direct/ indirect support during the entire course of my project.

2

Graduation Project 2017

The Remodel Story

3

Abstract Whether you are a large ‘Fortune 500’ company or a local convenience store - change is constant. Many people adopt the ‘If it ain’t broke, don’t fix it’ approach; while this may apply perfectly to machines, it is not recommended for a service providing company.

And also, if updates are approached in an ad hoc fashion, one will find himself multiple steps behind, making the eventual change harder, longer and more expensive to implement.

Now, given that updates are inevitable, this project deals with updating the communication deliverables of an old and existing firm.

It was recently that the firm realised how drastically the global and national scenario has changed in the design world and how their audiences have changed. Keeping what the audiences and well the as the market expects, these deliverables are re-designed.

4

Graduation Project 2017

Straight from the firm Onio Design Pvt. Ltd. is a Product Innovation and Strategy Consulting firm based in Pune. With over 19 years of work in innovation domain, spread across several continents, verticals, brands, services and products, Onio is now focused on making the globallocal innovation connect for emerging markets.

Onio firmly believes that innovation, for real, needs emerging markets that can provide winning ideas for the world.

Onio augments the client’s innovation program with propriety techniques of advanced consumer-culture research, rapid product visualization and realization process.

Consumer Durables, Consumer Electronics, Lifestyle Accessories, Design for Mobility and Design for Sustainability are few areas of Onio’s expertise.

The Remodel Story

5

Prakash Khanzode Co-Founder & Principal Designer

Introducing my mentor A walking encyclopedia of mechanical engineering, Prakash Khanzode, is a visionary who firmly believes in the concept of innovation. Being an alumni of VJIT, Mumbai and NID, Ahemdabad; he now leads the product design and engineering team at Onio Design. Using his keen Engineering & Design skills he aims to make Onio an innovation spearhead - which can deliver a solid innovation advantage for their customers. With more than 18 years of experience in the industry, he now has a strong hold over simplicity in terms of problem solving, concepts, engineering, execution and most product design and development dimensions.

“Infusing maximum innovation by making Product Innovation a prime mover for businesses in the rapidly evolving scenario in India.�

6

Graduation Project 2017

Inside this document

01

Website Design 1. Timeline 2. Brief received 3. Glimpse at the competitors 4. Formulated theory 5. SWOT analysis 6. Grid systems & screen resolutions 7. Wrong with Onio’s current website 8. Pixel allocation 9. Fonts & Colours 10. Service model 11. Navigation bar design 12. Website pages design

8 10 11 23 26 27 32 34 35 36 44 46

02

Brochure Design 1. Timeline 2. Folding types 3. Size & paper specifications 4. Cover page design 5. Spread design 6. Left hand pages 7. Right hand pages 8. Back cover design

88 89 90 91 92 93 95 97

03

Certificate Design 1. Timeline 2. Explorations 3. Certificate design

88 98 99

The Remodel Story

7

04

Other Projects 1. Onio’s new year greeting GIF 2. AltReal branding

102 104

05

My learning experience 1. My learning experience

108

06

Bibliography 1. Bibliography

109

8

Graduation Project 2017

Got the brief

Went on to know the reason due to which they felt the need to change their communication strategy.

Researched about their competitors and their customers (both Product Design and Design Strategy firms)

Based on the above Research, I formulated a theory to categorize these different firms and figured out where Onio resides.

I further studied about the essentials while designing a User Interface.

I also went to find out the grave mistakes/ wrongs in the Onio’s current website.

Finally I went on to design the grid that the design will follow.

The Remodel Story

9

Website design Timeline My Graduation Project started somewhere in the first week of February 2017 and I worked on the website design for approximately 2 months. This timeline roughly indicates the order of my activities during this period.

Once I was done, I thought of creating a Demo website with workable links to explain the navigation.

Once completed, I realised there was a confusion between two tabs, so to solve this, I designed a service model.

At last, the actual designing of the website started.

Then, I decided on the colour palatte and the fonts that I would use.

10

Graduation Project 2017

Brief received Onio always had this image of working on projects that are mammoth both in terms of time consumed and company involved. When they recently realised that audience still have this perception, Onio decided to reconstruct its brand image. The first and the foremost step to do this is to validate the deliverables that the brand uses to communicate with its audience because these are the things that reflect the brand’s policy and create the brand persona in their minds.

The two extensively used deliverables used at Onio are its Website and Brochure.

Brief Analysed The moment I received the brief, I went on to question my mentor about why they think that Onio’s brand image needs to be revamped? Can’t it just be altered a little? What does he think of the target audience of Onio? Once I was clear about his vision, I got a rough idea of he expected of me. He wanted me to alter the brand image to meet the dynamics of the new age audience (so that the brand can provide them with all the information that they seek in from brands like Onio) while still retaining its age old customers and meeting their expectations.

The Remodel Story

A quick glimpse at the competitors This section includes a study of all the competitors and all the brands internationally dealing with same kind of projects as Onio (Design Research & Product Design firms). I have studied about how they communicate their brand philosophy and display their projects on their website and who actually are their audience. I further analysed the things that they are doing right on their respective websites and what attracts the most amount of attention, so that I could keep these points in my mind and use it later while designing Onio’s new website. Also, specifically for Product Design companies, I studied how they have organised and showcased their ‘Services’ section; this was done mainly because I was confused about how to represent the diverse services provided by Onio compactly and clearly.

11

12

Graduation Project 2017

Ideo 1. Create suspense/ curiosity 2. Update their website almost everyday 3. Presenting information in unusual and interesting ways 4. Telling stories about their projects and also explaining their strategies through their success stories 5. Expressing strongly through visuals 6. Attention grabbing and catchy headlines for their articles/ website tabs 7. Follow the current visual communication trends which is reflected in their website as well.

8. Keep themselves active on social media, informal interaction with audience

Fjord 1. Engage viewers with videos of how they work/ their philosophy – this makes audience more connected to the company 2. They believe in telling/ showcasing rather than hiding what they are doing – customers get to know in and out of the company 3. Simple/ easy to use website layout; simple head names and minimal head 4. More of visuals; less of text 5. They have done research projects other than their client projects and devised outcomes/ processes for design which can help other consultancies as well.

The Remodel Story

13

Design Research companies

Fitch 1. Attractive website with good UI/UX design – creates a positive and design oriented image of the company 2. Landing page tells a lot about the company and what they do 3. Using a lot of visuals instead of too much text 4. Sharing their CEOs chats/ talks which are relevant to their busiess and which might also interest the target audience

McKinsey 1. Clarity - Clear guidelines about what they are looking for as employees and also why the clients should choose them other others 2. Writing articles about the changes/ things that affect their business and also using these insights in their real time projects 3. Segregation of articles based on the country/ city they are relevant to

Graduation Project 2017

INDI Design 1. POOL MAGAZINE – advertise themselves through their magazine 2. Update about the upcoming events they will participate in 3. Updates their blog and social media pages regularly 4. Vision/ Mission section – important for audience/ clients to know the same

Tangerine

Lokus Design

1. Detailed description and execution of their work/ projects 2. Minimal website with relevant and important tabs 3. Communication through visuals and videos 4. Making audience feel that they care about each project and every project is special to them

1. Organised way of showcasing their portfolio – brand wise division as well as service wise divisions available 2. Minimal use of colours in their website (3 colours) – makes it pleasing to the eyes and builds clarity 3. Minimal and interlinked tabs – makes browsing easy

The Remodel Story

15

Lemon Design 1. Cut the crap – To the point information; landing page is all about their work, which audience/ clients are interested in looking at.

2. Different section where one can exclusively view their work, along with detailed description about their project, challenges and solution.

Tata Elxsi 1. Updates about upcoming events that they’ll participate in and the latest news pieces about the company 2. Developing trends for future and sharing it with the audience – trying to dominate the design industry and show that they care about what is happening around the society 3. Landing page of the website talks about the best of their projects and the awards/ achievements they have won.

16

Graduation Project 2017

The major takeaways from the benchmark study

1. Keep updating everyone about what you are doing – everyone is interested in knowing the latest things happening within your company.

2. Keep in touch with the audience informally through social media – be everyone where they are.

3. Use of more visuals than text – more impactful and interesting.

4. Share the views of the existing clients with everyone, so they know exactly what you are doing and enables more trust within the new audience.

5. Don’t just write about you and your work; write about the society, changes happening around; for this will strength relations with the viewers.

6. People should get an insight about your company; can share making videos, pictures, team etc.

7. Do not confuse/ overburden the viewer with too much information – to the point and crisp information.

8.Provide viewers with easier ways to contact with you and always revert back!

Use minimal colours thus making browsing easy and also pleasing for eyes.

The Remodel Story

Product Design companies

UD LAB Location – Gujarat Services they provide – Consumer products design, industrial products, machine tools and medical devices 1. Services Tab available – very short description of services provided by them – just like an introduction; for further information one will need to contact them.

TEQZO CONSULTING Location – Bangalore Services they provide – Product design, Industrial Products and Product innovation 1. Very less detail about what they do.

2. Just introduction of the services they offer.

3. Things become a little clear once you check their portfolio/ work.

18

Graduation Project 2017

Studio ABD Location – Bangalore Services they provide – Strategy, Product Design, Packaging and Graphic design 1. Services and process tabs are combined together – creates more impact and better understanding.

2. Each item in the process is what they offer as their services as well.

3. Very clear indication of what they do.

Tycka Location – Bangalore Services they provide – Product Design 1. No clear indication of what services they offer.

2. Tabs include product categories that they design or have designed.

3. Once you open the product category, only then the services that they offer are visible.

The Remodel Story

19

Mozaic Location – Goa Services they provide – Product Design and Architecture 1. Categorization is based on the products that they designed and not the basis of the services provided.

Divine Factory Location – Jaipur Services they provide – Product Design 1. No clear indication of what services they provide.

2. Once you view their portfolio, then it is somewhat clear about what they do; but that too its one’s own interpretation.

Empoise Location – Bangalore Services they provide – Product Design, UI, UX 1. No mention of what services they provide.

2. Just a portfolio with detailed description of their work.

20

Graduation Project 2017

Foley Design Location – Bangalore Services they provide – Packaging Design, Product Design, events and Graphic Design 1. No ‘Services’ tab.

2. Under ‘work’ tab there are a few divisions on the basis of services they provide.

3. Basically, services are explained through the work they do.

Bang Design Location – Bangalore Services they provide – Product Design 1. No ‘Services’ tab.

2. Work/ Portfolio divided on the basis of categories of products.

3. Two categorization – industry and expertise

The Remodel Story

21

Lucid Design Location – Bangalore Services they provide – Product Design, Website design, Graphic Design, Packaging and App Design 1. Services section hidden inside ‘work’ tab.

2. Clear distinction between different services and brands.

Ticket Design Location – Pune Services they provide – Product Design, Packaging, UX, Prototyping 1. Detailed description of the services provided by them.

2. Capabilities- Services tab; makes navigation and exploration easy

22

Graduation Project 2017

Conclusions drawn from the benchmark study

1. ‘Services’ and ‘Work’ tabs play a crucial role in a consulting or design website as they provide clear idea and direction to the viewer.

2. Most of the Indian product design websites just showcase their work and forget to mention the services provided by them.

3. This leaves viewers to an open interpretation and a lot of confusion.

4. Also, the companies have no clear idea about what the main heads and sub heads on the websites should be, which is leading to missing out on information or repeating of information.

The Remodel Story

Theory formulated on the basis of the above Research Once the research/ benchmark study of the competitor brands was over, me and my mentor tried to decode their strategies and the kind of audience they are trying to reach (based on the content and the way navigation was designed). After this, we formulated a theory and tried to implement the same theory on Onio and determined where and how we want to position our brand.

We tried to consolidate all these companies into 2 types, namely, 1. Fishing Net boats, these are the companies that already know what the end product of the project will be and they will catch anything and anyone that they find needs them.

They usually deal with short-term projects.

They deal with the heads/ owners of companies who are interested in the number of sales.

2. On the other hand, there are Hook boats, who dive deep in the ocean to find their clients and don’t really know what the end product of the project will be (it can shape into anything, based on Research and other things that they discover).

They deal with long-term projects.

They deal with the middle managers of a company who are interested in the number of projects.

23

Graduation Project 2017

Categorizing the above mentioned companies in the theory COMPANY Ideo Fjord Fitch Mckinsey INDI Design Tangerine Lokus Design Lemon Design Tata Elxsi

TYPE OF BOAT Hook Fishing Net Hook Fishing Net Fishing Net Hook Hook Fishing Net Fishing Net

WORK THEY DO Consumer research and study, Digital and system design UI/UX, Graphic Design Retail - Visual Merchandising (mostly) Analysis, Design, Marketing Branding, Product Design, Brand strategy Small spaces like aircrafts, portable hotels (mostly) Branding solutions Packaging, Retail Design solutions, Graphic Design Branding, Product Design, UI/UX, Consumer strategy

*All the Product Design companies are mostly Fishing Net boats because clients come to them with what they want these companies to do and such companies have limited options to tweak things; all they can do is explore multiple options in the same product that they are given to design.

The Remodel Story

25

Where are we positioning Onio in this scenario Onio was a hook boat but with time it realized that this philosophy was making them lose on small but potential customers, so this is why Onio now has chosen to act as both a fishing net boat as well as a hook boat. The hook boat will still continue to hunt for the large and philanthropic customers while the fishing net boat will dive in to find out other small players that they can consult.

So, what will consumers now expect of Onio First of all, Onio needs to communicate the change in strategy (that they are planning to adopt) to all the existing clients and make sure they notice the change. This means that their entire communication collaterals need to reflect the change they are willing to talk about.

1. These existing clients will want to know the new strategy and Onio needs to make sure they understand the same.

2. The marketing collaterals should talk about the change; including the brochures, pamphlets, website, blog, social media pages etc.

3. Onio should upload some case studies to support the change.

Second of all, Onio needs to make sure that the newbies/ potential clientele should know about the revamped Onio’s strategy.

1. The first thing that they will visit is Onio’s website; the landing page should talk about their new approach.

2. They should feel like Onio can help them, now that they have changed their strategies.

3. There should be enough data available on the website to support this change.

4. There should be an organized portfolio so that they can refer to the same in order to build trust and confidence with Onio.

26

Graduation Project 2017

T O W S

Threats 1. Can lose the exclusive and unique identity.

2. Survival issues

Opportunities 1. Can attract new clientele 2. Extend the services to more potential areas/ fields

Weakness 1. Lack of experience with smaller clients and projects.

Strength 1.Experience in the fields which were earlier unexplored 2. Business expansion

SWOT analysis of Onio adopting this new theory Here, I have compiled all the positives and negatives of the situation when Onio plans on adopting this new theory where they will act as both the Hook Boat and Fishing Net Boat; maximising their reach and their risk at the same time.

As the analysis also suggests that its a good risk to take as the strengths and opportunities outnumber the weakness and threats. So, finally it was concluded that it is a good idea to adopt and that is when I started working on designing the website.

The Remodel Story

Grid systems and screen resolutions to follow while designing a website This section contains the research that I conducted to check out the most popular grid systems and screen resolutions that are followed worldwide. This also helped me finalize the style and the dimensions that I thought would be perfect for designing a website for Onio. This source of all this information is Internet; mostly blogs and Google Analytics.

While struggling to finalize the best screen resolution for the website, I kept a few questions in my mind; Q1. What browsers do people use the most?

Q2. On what kind of devices?

Q3. What is their screen resolutions?

Q4. How much space is taken by the browser toolbars?

Q5. What all things I need to adhere to in order to make things easy for the developer?

27

28

Graduation Project 2017

Screen resolutions To answer the first three questions, I went straight to W3Schools who roughly have 45 million visits and is one of the world’s largest web developer site.

According to them these are the last 6 months statistics (which I referred) for the most common web browsers used and the devices that they are used on;

2017

Chrome (%)

IE/ Edge (%)

Firefox (%)

Safari (%)

Opera (%)

February

74.1

4.8

15.0

3.6

1.0

January

73.7

4.9

15.4

3.6

1.0

December

73.7

4.8

15.5

3.5

1.1

November

73.8

5.2

15.3

3.5

1.1

October

73.0

5.2

15.7

3.6

1.1

September

72.5

5.3

16.3

3.5

1.0

2016

*This data is collected from worldwide users.

2017

Win10 (%)

Win8 (%)

Win7 (%)

WinXP (%)

Linux (%)

Mac (%)

Mobile (%)

February

32.2

10.5

33.6

1.0

5.7

10.5

6.2

January

31.7

10.7

33.8

1.0

5.7

10.3

6.3

December

30.9

11.1

34.4

1.0

5.6

9.8

6.4

November

30.2

11.0

35.5

1.1

5.6

10.3

5.9

October

29.6

11.1

35.5

1.2

5.7

10.7

5.8

September

28.0

11.4

37.0

1.3

5.8

10.2

5.7

2016

*This data is collected from worldwide users.

The Remodel Story

29

Now that I knew the basis, it was time to answer the third question which required me to study the screen resolutions that are most commonly used and the one that is most suitable in this scenario.

Screen width (px)

Smallest Screen height (px)

In use (%)

1024

768

3

1280

800

11

1360

768

2

1366

768

35

1440

900

6

1600

900

6

1680

1050

3

1920

1080

20

2560 and up

1440

1

*This data is collected from worldwide users.

As clear from the above data collection that 1366px X 768px is the most widely used screen resolution today as most people use wide screen desktops/ laptops. But I chose to work with 1280px X 800px; as from the study people using laptops are increasing and this resolution is ideal for laptop users but it fits in the wide screen desktop resolution as well. So basically this resolution fits both perfectly and is ready to deal with the future changes in the device usage of people (shifting from desktops to laptops).

30

Graduation Project 2017

Grid system One of the critical requirements of an informative website is that it gives their user, confidence that their time is being well spent. If the user feels that the website is haphazard then they will lose confidence that they will be able to quickly find the information they need or that the website will be able to perform the function they want. If a website is designed with a structured layout, then the feeling of structure comes through to the user in their first impression. So basically using a grid is just a formalisation of something that a designer is trying to do anyway.

There are 4 grid systems that I referred to while considering which one to finalize to design this website, namely;

Manuscript grid

Column grid

Hierarchical grid I chose to use both column grid and modular grid in the website design as they were fitting perfectly with the requirements of the website.

Modular grid

The Remodel Story

A few unsaid things for a designer while designing a website 1. The ‘rule of thirds’ - which uses a mini grid that implies that wen you place content on certain lines that divide content into thirds, the result will be more pleasing to the human eye.

2. Make the interface in a way that it is easy to interact and get in touch.

3. A well interlinked website helps to link everyone to all the information.

4. Try and include basic contact information where-ever possible.

5. Never put social media icons in the header as it grabs attention and once the visitor has gone to the social media page, there is no coming back to the website.

31

32

Graduation Project 2017

Based on Research, what is wrong with Onio’s current website 1. The section where you can view Onio’s work has a confusing head name (Resources - Case Studies) which people might skip considering its not that important information.

2. The website has not been updated in a long time in terms of News feed and even projects for that matter – viewers want to constantly know what Onio is doing currently.

3. There are way too many links and sub-links on the navigation bar – it is complicated.

4. There are too less visuals as compared to textual information which may lead to boredom while browsing through the website.

5. The design process that Onio follows can be made more interesting if we cite examples while explaining them the entire process.

6. The font styles used in the website can be updated to meet the current visual communication trends.

7. The social media icons in the website are lost somewhere in the entire mess - difficult to find things with such a layout.

8. The screen resolution used is outdated and looks boring.

Landing page

The Remodel Story

The section that displays their work

33

Preferring text over visuals

Too many tabs

The ‘lost’ social media links

Graduation Project 2017

Designing of the website After all the ground work it was time to take off with the design of the website! I started with finalising the space allocation to each section and furthermore deciding the rough grid system I’ll follow. I also went on to decide the colours and the font styles that will suit the entire website.

Grid followed & pixels alloted to each section This section talks about the space allocation and the final grid that was followed while designing the website. It includes the gutter space along with margin areas and header & footer space assigned in the design. All the measurements are in pixels (px) and the width of the diagram is 1280px.

Gutter 36px

Logo 145px

Left hand margin 90px

G u t t e r 60px

Header 100px Gutter 80px

Right hand margin 140px

BODY

Gutter 110px

Footer 230px 36px

The Remodel Story

35

Fixing the colours and the fonts to be used Once everything else was decided, it was time to decide the colours and the fonts that I’ll use in the design of the website. There are some standard colours and fonts used

by Onio, so I decided to use them; as people will continue to associate with them.

STYMIE

CALIBRI

Heading

Content/ Body

RGB values 132/216/204 HEX 84d8cc

Associated emotions: Sophistication, Trustworthy, Dependable

Associated emotions: Responsible, Dependable, Accountable

Specifications: Pantone value 632 CV

Specifications: Pantone value 380 C

RGB values 000/169/195

RGB values 223/219/112

HEX 00a9c3

HEX dedb70

P - Primary colours

S - Secondary Colours

RGB values 133/211/133 HEX 85d385 RGB values 229/193/148 HEX e5c194 RGB values 218/218/144 HEX dada90

36

Graduation Project 2017

Designing of the Service model While I was designing the ‘About us’ and ‘Services’ tab, I reached a point where one information was repeatedly occurring on all these tabs; so me and mentor decided to design a Service model to curb this problem. So, here is what all I explored!

The things that this Service model would make clear are the 4 services that Onio provide and also the 3 programs that it is made up of.

The 4 services that Onio provides are, 1. Design Strategy 2. Design Research 3. Digital Design 4. Design Engineering These are also represent the design process followed at Onio; starting from Design Strategy and completing with Design Engineering.

The 3 programs that Onio has are, These programs are for different kind of projects that clients approach Onio with.

1. Greenfield Start-up Program - Greenfield Program deals with start ups that want Onio to establish their brand.

2. Brownfield Brand & Experience Transference Program - Brownfield Program deals with clients that have come to Onio just to avail one of their services (a part of the project).

3. Blue-Ocean Brand Architecture, Strategy with New Product Innovation Program - BlueOcean Program deals with clients that want Onio to do an entire project starting from Design Research till Design Engineering.

The Remodel Story

The explorations starting with simple 2D and pyramid shapes and moving on to more 3D and interesting forms.

37

38

Graduation Project 2017

The Remodel Story

39

Further explorations - Laying more focus on trying to make the graphic easy for viewers to understand than on the aesthetics of the same.

Graduation Project 2017

Designing the icons for the Service model Once the last graphic was finalised, we felt the need to add ‘not-so obvious’ and fresh icons to the graphic to make it more easy to understand and also to avoid confusion or misleading viewers.

The brief given to me was, that the icons should be something that people have not seen before but still people obviously relate to the them.

After discussion on these first set of explorations, we realised that even if we are making icons, we are following a herd and not doing anything unique, so then it was decided that the graphics that I design (as Identity icons for the services) should be a mix of vector and bitmap.

The Remodel Story

41

Design Strategy

Design Research

42

Graduation Project 2017

Digital Design

Design Engineering

43

So, these are the Final 4 that were decided to be featured as Identity icons for the Design Services provided by Onio.

Design Engineering

Digital Design

Design Research

Design Strategy

The Remodel Story

44

Graduation Project 2017

Designing of the navigation bar The navigation bar used by Onio in their original website was too crowded and overloaded with multiple sub-options. So the first thing that I did was to reduce the number the options and make it easy for people to view. This is how it looks.

Home button

When you are on a page

About us sub menu

Work sub menu

Careers sub menu

The Remodel Story

Designing of the footer The most important we want the viewers to do after they have visited our website is to contact us or send us their proposals for pitches; and for that it is necessary to have our contact information available to them all the time irrespective of the section they are browsing. Also, everyone knows the impact of social media today, so it would be foolish to not connect to the viewers on the same.

So this is the final footer suggested by me.

Call for action section Basic contact information

Copyright information

Social Media links Search panel for personalized navigation

Back to top button

Graduation Project 2017

‘Landing’ page Parallax Scrolling 1

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

47

This page talks about the awards won and recognition gained by Onio.

Why I chose this page as the landing page?

This is because telling viewers about the company’s achievements sends a powerful message and makes the company look resourceful.

Either scroll to continue viewing the next page or click on this button

Graduation Project 2017

‘Landing’ page Parallax Scrolling 2

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

49

This page talks about the major products developed at Onio.

Why I chose this page as the landing page?

This is because Onio, now, also wants to attract all the startups and SMEs and the landing page will give them a quick glimpse of all the work Onio has done, thus creating a great first impression without the need of viewing the entire website.

Either scroll to continue viewing the next page and previous page or click on this button

Graduation Project 2017

‘Landing’ page Parallax Scrolling 3

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

51

This page talks about the major Strategy projects done at Onio.

Why I chose this page as the landing page?

This is because Onio, now, also wants to attract all the startups and SMEs and the landing page will give them a quick glimpse of all the work Onio has done, thus creating a great first impression without the need of viewing the entire website.

Either scroll to continue viewing the next page and previous page or click on this button

Graduation Project 2017

‘Landing’ page Parallax Scrolling 4

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

53

This page talks about the major Research projects done at Onio.

Why I chose this page as the landing page?

This is because Onio, now, also wants to attract all the startups and SMEs and the landing page will give them a quick glimpse of all the work Onio has done, thus creating a great first impression without the need of viewing the entire website.

Either scroll to continue viewing the next page and previous page or click on this button

Graduation Project 2017

‘Landing’ page Parallax Scrolling 5

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

55

This page talks about the mindset of Onio when it comes to designing anything which is Smart.

Why I chose this page as the landing page?

This graphic will tell the viewers about the various Smart product lines that Onio is involved in and each of these titles will be further linked to the ‘Work > Projects’ section if one wants to view examples.

Either scroll to continue viewing the previous page or click on this button

56

‘About’ section Sub menu look

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Once you are on the sub section, this is how the icons will appear

57

58

‘About’ section Team page

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Non-scrollable section - remains in place even while scrolling

Once the section changes, the non-scrollable section is replaced by this section

59

60

‘About’ section Philosophy page

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Non-scrollable section - remains in place even while scrolling

Once the section changes, the non-scrollable section is replaced by this section

61

62

‘About’ section Design Process page

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Non-scrollable section - remains in place even while scrolling

63

64

‘About’ section About Pune page

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Non-scrollable section - remains in place even while scrolling

65

Graduation Project 2017

‘Services’ section

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

Non-scrollable section - remains in place even while scrolling

67

68

‘Work’ section Sub menu look

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Once you are on the sub section, this is how the icons will appear

69

70

‘Work’ section Clients page

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Non-scrollable section - remains in place even while scrolling

71

72

‘Work’ section Clients page details

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Once you select a clients the box turns blue and the (+) sign turns to (x) sign

A pop up window opens right below the selected client, giving a short description about the work done with them and the ‘Services model’ highlighting the services they chose. It also contains a link to view the entire project

73

74

‘Work’ section Projects page

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Non-scrollable section - remains in place even while scrolling

75

Graduation Project 2017

‘Career’ section Sub menu look

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

Once you are on the sub section, this is how the icons will appear

77

Graduation Project 2017

‘Career’ section Work Culture page

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

Non-scrollable section - remains in place even while scrolling

79

Graduation Project 2017

‘Career’ section Openings page

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

Non-scrollable section - remains in place even while scrolling

81

Graduation Project 2017

‘Career’ section Internship page

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

Non-scrollable section - remains in place even while scrolling

83

84

‘News’ section

This is how the page will look and the amount of it visible without scrolling.

Graduation Project 2017

The Remodel Story

Non-scrollable section - remains in place even while scrolling

85

Graduation Project 2017

‘Contact’ section

This is how the page will look and the amount of it visible without scrolling.

The Remodel Story

87

Blurred pages in the background

Side panel for contacting the firm through messages and basic contact information

88

Graduation Project 2017

Certificate & Brochure design Timeline I started working on the Brochure and the certificate design from the first week of April and spent around 1.5 weeks doing the same. This timeline roughly indicates the order of my activities during this period. Both the brochure and the certificate design contain sample text and pictures as I designed these collaterals on my own.

Once the website was designed, it was time for brochure design and certificate design.

Starting with the brochure, I started exploring various sizes and folding forms.

After finalising the above, I went on to sort out all the information that will go in the brochure.

With the same colour scheme (as the website), I designed the final brochure.

Further, I decided the orientation and sorted the information for the certificate design.

Once everything was in the place, I explored many designs and one gor finalised.

The Remodel Story

89

Brochure design Folding types

90

Graduation Project 2017

Things that a business brochure must contain 1. Align with your image - This sounds simple but it is key that all your marketing communications share the same image. This is not just your logo, it’s not only your company colour scheme, its your core principles and style.

2. Decide on your message - A brochure’s principle premise is to tell people about the business. That might sound obvious but plenty of people get side tracked by introducing new products or services.

3. Let it flow - Your brochure should have a clear sequence to the information you are sharing.

Typically you may start with the basics, what you do and where you do it. Then you might say how you do it and all importantly, why it will help the reader.

4. Your story - A little background information on your business can do wonders to build trust, but don’t go overboard with the history lesson. It is easy to get carried away with the all the challenges you faced or milestone you passed. Keep it upbeat; you want people to know you have experience under your belt and that you will be around far into the future to provide after sales support.

5. Signpost the next step - The term ‘Call to Action’ should be familiar with you and using one in your business brochure is no exception. You may not be selling your individual services or products here, but you are selling yourself or business as a whole.

Size & Paper specifications The size of the brochure is 8.27” X 8.27” (perfect square of an A4 sheet). The entire brochure will be center pinned as there are only 3 sets of front back printed spreads. Matte paper of 300 gsm that can be used to print this brochure.

The Remodel Story

91

Cover page design

The cover page consists of the colours used in the website as well as the checkered pattern used in the background of the website design. The picture used here is a sample picture which represents strategizing and team work. The cover page just briefly describes the services provided and the working environment of the firm.

Graduation Project 2017

Spread Design

The inside pages talk about the firm and their projects in much more detail. This is how the design of the spread looks like; again resembling the colours used in the website and the checkered pattern.

The Remodel Story

93

Left hand pages

94

Graduation Project 2017

All these left hand side pages are introduction pages to the right hand side pages. They are like questions with answers on the right hand side pages.

The Remodel Story

95

Right hand pages

96

Graduation Project 2017

The Remodel Story

97

Back Cover design

The back cover continues the colour scheme of the cover page and gives the most vital information of the brochure which is contact information. This information is very important and that is why is not enclosed inside the brochure but is presented at the back side of the brochure so that it is easily accessible and handy.

Graduation Project 2017

Certificate design Onio organizes and participates in a lot of workshops and Ted talk seminars for which they need participation certificates to be given to all the participants. I re-designed their certificates to make it look more artistic and design oriented.

The size of the same is 11� X 8.5�. One of the appreciated explorations of the certificate design. The final one is on the right hand side

The Remodel Story

99

100

Graduation Project 2017

The Remodel Story

101

Other projects done @Onio Other than re-designing Onio’s communication platforms, I worked on other Branding and Graphic Design projects which included, 1. New year greetings sent by Onio to all its clients 2. Branding of a start-up - AltReal 3. E-Brochure designed for Otis Elevators 4. Tata Steel - Gate Design Among these projects, I have only added the ‘New Year’ greetings project and the explorations that I did during the AltReal project.

I couldn’t compile the final logo and stationery design for AltReal; the Otis E-Brochure and the Tata steel designs as these are ongoing projects and I have a non-disclosure agreement with Onio.

102

Onio’s New Year Greetings for its clients For Onio’s New Year greetings the entire Design team at Onio sat for a brainstorming session and came up with their interpretations of how they look at a new year or how they feel particularly about 2017. After much thought and discussion, we came up with an idea of using the digit ‘1’ as an exclamation mark and the digit ‘7’ as a question mark in the word ‘2017’. The logic being ‘always question your answer’ and through this logic, we wanted to explain the much dreaded process of Design Research and Product Development to all its clients and potential clients.

The entire idea was thought of being sent as a GIF in an E-mailer.

The size of the GIF was 400px X 400px and the duration was 19 sec.

Here are some snapshots of the GIF finally sent as the greeting (in order).

Graduation Project 2017

The Remodel Story

103

104

Graduation Project 2017

AltReal - A Startup Branding project AltReal is a government supported startup involved in research and experimental development on social sciences and humanities (SSH).

The aim of the startup is to develop explant prosthetics such as nose, ear and eye based on silicon. The team at AltReal consists of scientists, prosthetists and product designers from India; one of the members of the team is my mentor, Prakash Khanzode.

The company was registered in 2015 but as they were busy in researching and experimenting they did not think of having a brand identity till date. But now with almost 2 years of research, they have started communicating with the outside world and been looking for external aid, so my role in the project was to create a logo and design the stationery for the same to make their communications more efficient and coherent.

Unfortunately, due to my non-disclosure agreement with Onio, I cannot present the final logo as well the stationery design, but anyways here are all my explorations!

The Remodel Story

105

106

Graduation Project 2017

The Remodel Story

107

Graduation Project 2017

My overall learning experience These 4 months of my Graduation Project internship in between my course were one of the most educational experience of my undergraduate degree as it gave me the opportunity to step outside the classroom and transition directly into the real world. In-fact, there was nothing comparable to real world experience. I was actually surprised to see myself working with the industry leaders and to be able to match their pace and working style.

I learnt a lot about how the ‘actual communication industry’ works and what things take place in between getting the brief and showcasing the final outcome. I also learnt a great deal about working with a team where everyone has their own viewpoints.

The major takeaways from this internship were, 1. Handling clients and meeting their expectations that too within the timeline given by them.

2. Working with multiple projects at the same time and justifying each one of them to the best of my ability.

3. Adjusting with the viewpoints of other team members when you are not in agreement with the same.

4. Learnt a lot about UI design and how the things work when designing a website.

The Remodel Story

Bibliography 1. https://www.w3schools.com/browsers/ 2. http://vanseodesign.com/web-design/grid-type-examples/ 3. http://www.designer-daily.com/the-use-of-grids-in-website-design-6639 4. https://www.templatemonster.com/blog/grid-system-trends-web-design/ 5. https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-togrids-in-web-design--cms-26521 6. http://www.websitedimensions.com/ 7. https://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popularscreen-resolution-on-the-web-is-now-1366x768/ 8. http://ux.stackexchange.com/questions/41466/why-is-1366x768-consideredby-some-to-be-the-standard-widescreen-for-modern-lapt 9. http://www.hobo-web.co.uk/best-screen-size/ 10. https://deviceatlas.com/blog/most-used-smartphone-screen-resolutionsin-2016 11. http://blog.print-print.co.uk/10-tips-what-a-business-brochure-shouldinclude/ 12. http://www.madeinebor.com/montreal/ 13. http://myriad.space/ 14. http://jessandruss.us/ 15. http://makeyourmoneymatter.org/

109