UI/UX Graduation Project Document

This document is a brief account of my 20 weeks internship experience at Unthinkable Solution LLP. This document will be useful for someone who wants to learn more about UI/UX or want to make a career in it.

anamika bhandari

Copyright @ Department of Fashion Communication, 2020 National Institute Of Fashion Technology, Kangra Copyright @ Unthinkable, 2020 All the work is done for and under the guidance of Unthinkable.

All the illustrations in the document are created from the scratch by the author of the document. The content is created with the help of data available of the official website of the firm and the experience gain in five months. Kindly read and see with care.

GRADUATION PROJECT DOCUMENT

NATIONAL INSTITUTE OF FASHION TECHNOLOGY, KANGRA fashion communication 2016-2020

04

ABSTRACT This graduation project document is a compilation of the projects and works, completed as an intern at Unthinkable Solutions as a UI/UX Intern. This document outlines the corporate structure of the company and gives an overview of my role as a design intern. Participating in the 20 weeks of internship project is an integral part of the fashion communication curriculum. In this period the students work within the companies on the live projects. The industry training exposes a stu-

dent to the ethics of the professional world and grooms their designing skills. It gives the budding designers an opportunity to apply their acquired knowledge in true sense. This document shows my work that ranged from designing user interfaces to user experience and analyzing the user’s need as a pivot of all the products. This internship taught me a number of things and radically changed my way of seeing my potential as a visual designer

05

06

ACKNOWLEDGMENT I am thankful to Unthinkable Solutions, for giving me this great opportunity to pursue my graduation project with them. I am thankful, that I was given quality projects in my graduation internship tenor.

This internship would not have been possible without the guidance and support of Mr. Amit Singh (the director of products), my internship friend Inika Wadhwa, Afzal, Kowshalya, Himani, and Rakesh. My colleagues: Navneet, Anudeep, Shayra, and each and every employee who was helpful to me in my 20 weeks internship.

I’m thankful to the staff for their immense support. The constant mentoring, feedbacks, and coffee helped me in learning things quickly withzero hesitation and zero awkwardness which are my dearest hidden Jutsu.

My sincere gratitude to my college mentor: Mr. Amit Rana and my department head: Ms. Maulshri Sinha for being there as my guiding light.

I’m really thankful to NIFT for being one fine school to induce design basics and fundamentals in my blood. I’m thankful to this institute because it constantly nurtures and takes care of my creative space.

07

Industry Certificate

08

Self attest certificate

09

Table of Content

10

What is Unthinkable Solutions?

12

History of UI/UX

13

UX Designer responsibility

14

UI Designer’s responsibility

15

Why I choose UI/UX?

16

Overview of the projects

18

Introduction to classroom.live (main project)

20

Part One: Create a brand guideline

24

Part Two: Create a website for classroom.live (version 1)

32

Final Screens of classroom.live (version 1)

44

Part three: Create a website for classroom.live (version 2)

50

Home page

52

Feature page

74

About page

102

My Learnings

109

Introduction to Yellow.live

110

Table of Content Onboarding screens for Yellow.live

118

Coach marks for Yellow.live

128

Transporter website_dashboard design

136

Final Screens_dashboard design

176

Designing an Alexa Skill

178

Selected questions

188

User Interface Designs

189

My graduation project experience

194

Bibliography

195

11

What is Unthinkable Solutions?

Unthinkable is a software based company in Gurugram. It is a sister branch of Daffodil software first established in 1996. Unthinkable as a company believes in taking a radically different approach to software development by solving problems at the technology level, rather than mis-utilizing the scarce engineering talent to solve the same problem repeatedly across the solution, so they can focus on delivering more value to the customer.

12

Combining the experience of building 100+ software solutions for the customers following the traditional methodologies and developing our products using decoupled software components to reduce redundant code. The objective of the company is not to just deliver solutions faster, but to create a snowball effect via faster delivery to help our customers evolve the product according to the needs of the target audience, giving them a much greater advantage over the competition.

History of UI/UX? UI stands for User Interface and UX stands for User experience. Both of these terms are used interchangeably and are often confused with each other. We often see UI/UX as one term but they are not, sure they are related.

Before starting my series of projects that I did for my graduation. I would like to take a moment to clear the mist around these two abbreviation.

So user interface came into life during the inception of computing. It all started to happen when computer markets were started growing significantly. UI came into existence in the 1980s were as if we fast forward to the 90s when Don Norman helped coin the term User Experience while working at Apple.

At the UX Conference in San Francisco, he explains in a video interview

that UX is about the entire experience that the user has with the product, the company, and the services. Everything from the way customer service is perceived to how easily the product is released from the package.

Think of a house. The framing of the house is the physical structure – the coding. The electrical system and the plumbing and the HVAC are the functionality of the house – the user experience.

The window hardware, doorknobs, faucets, and paint are how the homeowner interacts with the house and their enjoyment of it – the user interface.

In that example, the two are separate entities. They rely on each other, but there is little overlap. If UX design only relates to the functionality of the house, then UX design would need to come first, and UI design would wait to step in after UX was completed.

So the conclusion we draw is: • Yes, the terms are related.

• Yes, the terms can overlap.

• No, they are not interchangeable – no matter how often people use them interchangeably.

13

UX Desinger’s key responsibilities

14

•

Content/Strategy: Customer Analysis, Competitor Analysis, Product Structure/Strategy

•

Prototyping and Wireframing: Prototyping, Testing/Iteration, Development, Planning, Wireframing

•

Analytics and Execution: Coordination with Developer(s), Coordination with UI Designer(s), Analysis and Iteration, Tracking Goals and Integration

•

UX deals with the purpose and functionality of the product. UI deals with the quality of the interaction that the end-user has with the product.

UI designer’s key responsibilities •

Look and Feel: Branding and Graphic Development, User Guides/ Storyline, Customer Analysis, Design Research

•

Responsiveness and Interactivity: Adaptation to All Device Screen Sizes, Interactivity and Animation, Implementation with Developer, UI Prototyping, Implementation with Developer

•

UI design has an artistic component as it relates to the design and interface with the product. It affects what the end-user sees, hears, and feels.

15

Why did I choose UI/UX? Because of all the aesthetic websites I saw and admired

16

Real story long As college students, we don’t know much about the scope of the industry.

Since we work with hypothetical projects, we often lack what clients or the end-users desire. Since we are fashion communication students, we are the service providers. We provide our services.

remove the ambiguity I had about the terms as a Fashion communication designer. Plus the life of a graphic designer was getting tough in design studios so I chose to try and learn a new skill. Plus I had a thing for good websites. hmmm, I think websites are more like your identity these days.

It was very important to explore how I can be useful to people and society.

Also since fashion communication offers a wide area of skill development, it is really important to pick one and master it. So to all the future students who might read it. I want to share how i decided to try UI/UX.

I was very thankful that unthinkable chose me since I was a noob. All I knew was aesthetics, alignments, illustration making, and some small tricks here and there. So this story was important before I embark on my small journey of learning, making ugly designs, crying, and doing things.

I did my summer internship at Dorling Kindersley Publications. From my last internship, I learned about layouts and print media. I learned the skill and it was good. Something important. Moral: Pick your internships wisely. You can not afford to be futile when you could be fruitful. So coming back to 2020. I chose UI/UX because I wanted to “explore”. I wanted to

Since I love writing, I think I will write books in the future that can help people in some way or the other. I consider this graduation document as my second book as I tried my best to be a helpful author in my previous document too. So I hope if any student reads this, he/she can extract something honest from this.

17

Overview for the projects Before moving ahead to the interesting process of taking design briefs and giving my best solution. I would like to brief the readers with the overview. The whole document is divided into 4 major sections, namely the Main project (graduation project) and 3 base projects that I did initially. This formed the fundamental base for my learnings.

As suggested by my mentors, I have kept the main project first.

This project is a result of the 5 months’ experience that I gained from Unthinkable Solution. The documentation is an elaborate compilation of some of the major works that I did in my GP tenor.

Projects Names:

18

•

CLASSROOM.LIVE

•

YELLOW.LIVE

•

TRANSPORTER WEBSITE

•

ALEXA VUI

Each project played a crucial role in teaching me the vastness of UI/UX design. My GP majorly constructs the user interface designs and my growth as a designer that considers the user’s persona before creating a design/ service.

As I am still learning and this experience was first of its own kind. I believe my growth is very insignificant but surely I stepped up a few steps of the ladder. On the opposite side there is a visual dipiction of my 4 projects and the overview of how they are divided into several design briefs

19

20

project 1 (PART 1 ) Project

1. Introduction to classroom.live About Classroom.live is an inhouse product by Unthinkable Solution. This product was envisioned as a community for educators & learners. The concept was made before the COVID-19 pandemic as Unthinkable Solution strongly believes in catering to the education system. However, when the crisis struck, the team decided to rise up to the challenge and create a tool that helps educators deliver and manage their sessions better.

There were two decades of deep tech expertise, close work with schools and numerous security and privacy certifications that gave shape to classroom.live

The platform went live in mid-April 2020 and within a fortnight, 25000 students started using it. classroom.live is a platform designed specially for educators,learners and administrators. Using the platform, teachers can prepare their teaching material, host secure live sessions, record automatic attendance, give assignments and conduct assessments all from a single platform. Tailored to the requirement of students and teachers, the software intuitively adjusts to the demands of educators and students in real-time. Since its launch, the platform has been well received globally.

21

Vision The product is created with one sole reason for facilitating education. It is to provide educators, learners & administrators with a simple, secured & powerful virtual campus. Designed to enrich the in-class delivery, pre & post class support and administrative insights

Business Ideology The platform has been designed to facilitate learning remotely.

The software simulates a real classroom learning environment and gives educators the oversight necessary to manage sessions. Its capabilities far exceed those of a web conferencing platform. The platform has been introduced at a time when remote learning will

become widespread. A significant percentage of students will attend classes from home. When educators must select a platform to teach students remotely, their first choice will be classroom.live.

Unique Selling Points • • • • •

22

The only platform designed to serve as a single click virtual classroom.

An education delivery platform and hence, superior to web conferencing platforms.

Lets teachers control sessions and store content in structured formats.

Stored content can be used in sessions.

Gives students easy access to study material including recorded lectures, notes/books shared by teachers.

• • • • • •

A single platform for teaching, submitting homework and accessing books.

Gives educators full oversight of classroom sessions.

Produces meaningful reports backed by data.

Provides administrators with actionable insights.

A completely secure platform.

Easy to use.

Design brief for this project This project is divided into three major design briefs. I have worked on creating the deliverables according to this process of breaking down my work into three parts. As you read, this product came into existence due to the sudden pandemic situation that led us to a time where everything was shut.

The whole world was in a pause. Today, as i am writing this on 1st of july, it is still paused. We all are safely in our homes, working on ourselves and trying to make the best of the days we are spending with our loved ones.

The working on this project initiated in the last week of march. This project has taken 50% of my GP tenor time and hence is the most important project that i worked on.

As by now the reader must have read the vision and the idea behind the project. One can see how much it is important to keep going and not lose hope. I am speaking of it because the circumstances under which i worked on this project were not as bad as it was for a sick person or a poor person who lost his job but it was strenuous enough to bring questions of existence and doubt the acceptance of this new change where distance became important.

So the two design briefs under classroom.live are: 1. Create a brand guideline 2. Create a website for classroom.live

23

2 : Create a brand guideline DESIGN PROCESS As I had to create the brand guideline for the product. I started with understanding the brand personality. As this product was new, I did some ground research to understand the core of the product. This was the first time I was designing a brand guideline for an actual product. I took the following steps as a designer to come up with a decent guideline that would be in the same line with the other products. Since unthinkDesign process broken down to steps on can follow when designing guidelines: 1. Identifying Identity of the brand 2. Look & feel Color Typeface Icons Logo Design Imagery

24

able solutions catered to business people and leaders. The hopes of going abstract and artistic were bleak. This came up as a challenge as I was supposed to create something universally accepted and different at the same time. Below are the steps I followed to create the brand guideline. This brand guideline then would come handy in the next part of my graduation project.

DESIGN PROCESS STEPS 1. Understanding The Identity Of The Brand Our identity: The identity of a brand comes from the type of personality on sets for it’s product. Since classroom.live is an education management system, I want to pen down and brainstorm how exactly our product should behave. AN education delivery product is bound to have some characteristics, these are jotted below: 1. Simple (easy, minimal, clean) 2. Intuitive (user friendly, ubiquitous interface design, functional) 3. Smart (automatic, teacher’s partner, empowering)

The product is intuitive as we designed the user interface which is ubiquitous in nature and does not hamper the user’s experience.

Also it is a smart product as the core of the idea is to aid the education system with a digital platform to function the schools remotely.

The main focus is kept in creating a great platform for day to day use.

Which ultimately takes us to create an automatic system of reports and attendance. All the functions of the products were created after a study of an average teacher’s 9 working hours.

These are the three personality traits of the product. It is simple as it’s targeted users are teachers, students and administrators.

25

2. Look and Feel Look and feel of a product and a website brings our theoretical and cognitive ideas into an executive form. This decides how well we want to showcase ourselves. Look and feel is like the summer dress that one wants to wear in front of everybody on the beach to look their

Below is the list of all the aspect that is important to create a visual identity of a product or a brand.

26

I.

COLOR

II.

TYPEFACE

III.

LOGO DESIGN

IV.

ILLUSTRATION STYLE

V.

ICONOGRAPHY

best. When we consider the visual aspects of a product or a brand we segregate them into color, logo, typeface, illustration style, iconography

1. Color The role of color has been crucial in forming a distinct brand identity and refining design aesthetics. The shades of Green have been prominent in communicating the essence of classroom.live to the users and potential users since green signifies optimism and hopefulness which is pivotal in these tough times.

REASON BEHIND THE PRIMARY COLOR The primary color of Classroom.live user interface is been derived from the color of the class boards in our school. This color is used to trigger a nostalgic feeling which one gets by seeing a class board. One could

Secondary Color Palette

Primary Color Palette

Hexcode: #53C7A8

70%

Hexcode: #383838

87%

say that the shade of the school board is darker but choosing the same color could be a wrong choice in the long run. Because, whole message would have become more environmental.

Also the functional reason to use this color was to accommodate long hours spent on the application. This lead to picking a softer shade of the class board

40%

60%

20%

20%

10%

Hexcode: #77D1FF

70%

Hexcode: #E55252

87%

40%

60%

10%

10%

27

2. Typeface Typeface plays a very crucial role in creating a good user experience.

Since this product is used appropriately for 7-9 hours by its users.

Picking the right typeface was very important.

The font selected is Avenir Next and Avenir. The difference between the two is that avenir next is the upgraded version of Avenir and comes with more weights and widths.

What is Avenir font?

Avenir Font Is a Sans Serif Typeface That Originated in 1987 by Adrien Frutiger. Avenir Is a French Word That Commonly Used Everywhere. in 1988, It Released with Three Weights, Later It Expanded with Six Weights with a Version of Roman and Oblique.

28

Avenir font is a modern font with a variety of applications in the design and business world. Why Avenir stands out lies in it’s elegant geometric sans serif style. Since the word itself means, future.

One of the most important reasons behind using this typeface was the font family and the wide range of weight in which it comes. This makes the UI very cohesive and dynamic at the same time.

Since avenir can be used as a header and is also a font that is readable in long paragraphs.

3. Iconography Icons are the details to any visual design. There are a variety of types in which the icons can be represented. Some of them namely are filled, outlined, rounded, two toned and sharp.

For classroom.live i designed the icons for the product. Since the icons that were used in the products were flat, simple and kept generic

Square Height: 18dp Width: 18dp

Circle Diameter: 20 dp

to make a user interface welcoming for the people who are not tech savvy like you and me. Those icons were inspired by material design as it presents the best way to represent the actions like call, mute, messaging etc.

Vertical Rectangle Height: 20dp Width: 16dp

Horizontal Rectangle Height: 16dp Width: 20dp

Source: Material Design 29

4. Logo design

30

Since the product belonged to the parent company unthinkable software. The font used for all the logos in the firm was TT Firs Neue.

Making the logo was simple as it was created in the same style. The font style was kept the same and a flag was added in the color I choose for the product’s face.

On the left hand side one can see the possibilities of the logo i showed to my mentor as a guideline to how can we used the logo. On the right hand side i have explained how i created the logo. What all were the minor changes in creating a logo from a simple font.

States for using the logo

Process broke down

5. Imagery Imagery is one of the most important aspect of visual guidelines. It is crucial because it sets a standard for the type of images that should be used while creating marketing collaterals. In created a guideline for imagery, i recommended 5 stock images sites and also described the tone of images that will be used for collaterals.

I personally used shutterstock and pexels in my next design brief. The imagery I suggested is shown below. These images were calm and closer to the cooler tones. Since our primary color was sea green, the pictures were supposed to be cool, clean and white.

Stock images site recommended: • Getty images • Shutter stock • Pexels • Alamy • Dreamstime

31

3 : Create a website for classroom.live_V-01 _ DESIGN PROCESS Design process: The design process followed to create the website for classroom.live is broken into 9 steps. These steps are must in creating a website. Before jumping to these crucial steps it is very important to do competitor analysis. I did a thorough competitor analysis of the The steps to create a website: 1. Content Create the content Design the flow 2. Wireframes Low fidelity wireframe High fidelity wireframe Laying the content on the screens 3. Visual treatment Illustration/ graphics Iconography Footer design Alignment

32

companies like vedantu, impartus, Wiz Iq, google classroom, microsoft team, zoom etc. Since this website was more of a sales funnel. The content flow was created to convert the traffic into sales.

DESIGN PROCESS STEPS 1.Content Creating content is the first step in the making of a website. There should be a direction and a goal towards which the content is written.

To start with, one can ask the Kipling questions as it is always helpful, if the creator knows the subject inside-out.

The questions asked to the product team and myself were:

3. How can we make the website an effective sales funnel?

4. Who is targeted through the website?

5. When is the deadline?

After addressing and answering these questions repeatedly, I created the first draft of the content. This content is displayed on the next page.

1. What is classroom.live?

2. Why are we creating a website?

33

Content for the website

34

Content flow

A ideal flow of a one pager website: 1. 1. Place a good line that explains the problem/ a solution you are proposing to offer. Something in a layman’s language.

2. Start with why you are doing what you are doing. Because it is very important to address why you are presenting an idea/ service or a product to the users. This is about the philosophy that drives you.

3. Speak of how you do it. Elaborate the efforts that you took, the kind of people who were doing everything they could to create what you are aiming to serve. And by this I don’t mean, highlight your team.

4. Speak of what you have as a product. Speak of what is it that can make the life of the potential user easy. Here you talk about the features. Never display your feature in the second section of your website. Because a website is a narration. It is not a presentation you place on a clients table to sell the features you have.

5. Then add a testimonial if you have any because it is important to show what people think of you and your service. This adds an external weight that can make you look more promising.

6. Add a call to action if any. Always keep it in the header or the top banner of your website too. As it is important to direct the user to do an action to you site.

7. Add a footer.

35

2. Wireframes What is a wireframe?

A wireframe is a digital/manual way to visualize the data segregation of the website. Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

There are two types of wireframe that i will be showing ahead, low fidelity and high fidelity wireframes. There are mid fidelity wireframes too but i will leave that for now What is a low fidelity wireframe?

Low fidelity wireframes are the first draft of visual representation of a designer’s idea. This wireframe is usually a rough sketch that helps the

Low Fidelity 36

designer to make his/her idea look more tangible and easy to explain.

These wireframes are usually abstract and help the team to be on the same page. These wireframes are also good, giving the designer a creative space to experiment his hands on paper before jumping to the actual project.

What is a high fidelity wireframe?

A high fidelity wireframe are the screens that are designed on softwares. These screens include the real text and visual that makes it look closer to the final result the designer is thriving for. These wireframes take considerate amount of time to work on.

High Fidelity

Low fidelity wireframe

37

High fidelity wireframe

38

High fidelity wireframe

Book a Demo section

Footer of the website

39

3. Visual treatment The visual treatment of the website consists of the illustrations, proper alignment, iconography and imagery. I have already discussed the importance and the criteria I have considered before making them. As this was a quick process I will be showing the designs I created for the website.

Elements used in the first draft: Illustration/ graphics Iconography footer design Final screen

Illustration/ Graphics In this single scroll website I have used one illustration on the landing page. This illustration was created referring to the three types of users we were benefiting. As it is important to align the meaning of the header and graphic that one is using with it.

Users portrayed in the illustration: Management (left) Student (centre) Teacher (right)

40

In the illustration I have represented them in the actions that they usually perform as a user. For example, we are providing full control of the reports and actions taken by the teacher and student to the management, this is represented as the management using a system to check the dashboard.

Similarly as we provide hand raise options to the student, which helps in solving their doubts and problems. I have made the student with a hand raise. The third part, teacher in the illustration is illustrated simply by showing how she teaches using the teacher’s tool kit.

Rough sketches

Final illustration

41

Icons for first version of classroom.live The icons shown below are for the second section of the website. This section was about, why classroom.live is better than any video conferencing solution for teaching. This was crucial because initially every school started teaching via Zoom, Whatsapp etc and stating the three important characteristic of the product could provide weightage to our new product

Icons were not completely designed from scratch. These were ubiquitous in nature and were identical to many icons we see everyday in our virtual lives.

Three titles for the icons

Integrated Platform: This was about the integration of content creator and manager within the product.

Complete Security Integrated Platform Admin Control

Admin Control: The school could monitor the results of Online learning in terms is reports and dashboard of data collected.

Complete Security

42

Complete Security: This meant the data was safe and no third party could access the product

Integrated Platform

Admin Control

Easy to Create Content

Virtual Classroom

The above shown Icons were created for the third section of the website. This section dealt with how we make teaching meaningful, fun and interactive. As I was learning to create Icons, I learnt the importance of Line weight, color consistency, stroke style and icon dimensions.

Key words: • • •

Easy Content Creation Virtual Classroom Better Management

Better Management

•

In easy to create content I created a teachers hand that was adding a picture to the group of text (good idea, bad execution)

•

In virtual classroom, the whole idea was that we are interactive as we host video conferencing along with a unique portal for creating content and sharing it to every student.

•

Better management focused on the meaningful part because with constant monitoring, remote learning could become more fruitful

43

Final screens of Classroom.live website (version 1) Conclusion: This website was a single scroll site. And due to urgency, it was created within two days and was developed on the 3rd day with rush. This taught me that sometimes you are not given full time and one should learn to do quick work. In this website, I failed to provide substantial quick work as designing takes more than just aesthetics and the user flow of a website is as important as the product itself. The next part of this project is the improvised version of this website. Where i got all the time I needed to work on a project.

Lesson learnt: Learn the sources that can provide quick icons and elements you can use in a site. This is a post-internet world, the originality of each icon is not important because the ideal proportions of an ideal icon is most superimposed on our minds by now. Plus it is important to be ubiquitous when dealing with non-designer target market (this is not a hard-core rule but it exists)

44

Final designs < Landing Page

45

Final designs < Website flow

46

Final designs < Icons used

47

Final designs < CTA and Footer Design

48

Final designs < Mock up

49

4 : Create a website for classroom.live_V-02 DESIGN PROCESS This version was the full website. Since the product was evolving each day, so did the features and the functions we provided. This website was treated as a sales funnel to grab as many buyers as it can.

When I approached the website after listening and addressing the queries and requirements of the sales and marketing team, I learnt the important viewpoint of looking at a website. Usually as a designer, one approach is aesthetic, empathy, services we provide and our core features and often we fail to sell.

Selling is important as it is the source that keeps the work alive. Learning how to sell a design is equally important. In making this website I

followed the same design process. The only difference was the level of detail that I added to my content flow and designs.

This website has three different pages and a proposed design of a blog section. I will be elaborately explaining each screen individually as each interface design has heterogeneous elements.

The process followed is Content < Wireframing < Visual treatment < final output. These steps are already elaborated in the design process of the first version where I explained the approach I took in following all three steps to reach the output.

DESIGN PROCESS STEPS Page 1 - Home Page Steps followed to create homepage: • Content • Low fidelity wireframes • High fidelity wireframes (alternate drafts to show ideas) • Visual treatment via alignment, icons, typeface, illustrations and footer design.

50

Note* the process of each screen will be presented separately. First will be the home page and it’s UI/UX process of creating the content, flow and UI.

Brain Storming sheet

51

Content for the website < HOME PAGE

52

Content flow

The flow explained: 1. As it says “transforming physical classes into virtual classrooms” It is to present the new normal world where digital presence is not just fancy but a need.

2. As the motto of the website is to act as a sales funnel, we go from addressing the current scenario (indirectly) to presenting a solution where remote learning and teaching comes into action.

3. This portion is to represent the product as the teacher’s ally. In these troubled times where teachers are overburdened due to a sudden collapse of a physical system and lack of a digital system to work with. Classroom.live promises some key features that are exclusively built to make teaching hassle- free 4. Nothing is better than the words of a real user of the product. As we are targeting teacher’s pain points. Their views as testimonial adds weight to the home page. Including a video of the teacher makes it more reliable to the users and potential users.

5. Now we come to the values of the product. The ease elements that we are providing to the users. These values are explained elaborately. As the features are shifted to another tab, there is no need to explain or add the features provided to the user 6. After explaining the values and core characteristics of the product we bring in book a demo, call to action and footer design.

53

Low Fidelity Wireframes < HOME PAGE

Centre alignment drafts 54

Low- Fidelity Wireframes < HOME PAGE

Left alignment drafts 55

Mid Fidelity Wireframes < HOME PAGE

56

Mid- Fidelity Wireframes < HOME PAGE

The flow explained: 1. I started here with the Tagline “Empowering Future” because what exactly the product is doing is to empower the next generation and bring smooth functioning of education systems even in such times because we know in future we will have to face more viruses and unknown diseases rather than a nation wide war.

2. The content of this flow is different from the content flow you see on page no ___ because the content mentioned there is the final one, whereas these were the initial drafts I worked on. The second section states “ you can fight the challenges too” considering the tough situation where we were. (I know it sounds Too NGO but a draft is a draft, a progress is a progress). But this section was to tell the potential clients that ‘N’ no. of students are going online, the paradigm is shifting and we are here to help you.

3. This was the feature section that was divided into 3 parts and yes i was asked to keep the management the top priority because initially they business leaders thought of targeting management, rather than teachers. I know how it sounds :) 4. Fourth section showed empathy as the words are motivating and empathetic because everybody needs a soft corner and a feeling that the other human/ organization gets its needs and is ready to support them and uplift them for income.

5. Here I kept the names of the schools that were already clients of the product. Hence the clientales portion. One thing i have learnt is that if your client base is not GREAT, you always add videos and testimonials of small businesses you catered. It adds quality if the quality of your video testimonials are good 6. Then the Call to action section. This CTA is on the top section as well. But it is always favourable to keep it on both the ends for slightly super imposing a call to action. And then a simple footer

57

High Fidelity Wireframes < HOME PAGE

58

High- Fidelity Wireframes < HOME PAGE

Long Story Short: 1. On the left hand side on can see the number of drafts I worked on.

This was only home page and these are half the no. of artboards I made. This is the kind reflection of corporate pace. My first draft was a 2 days job. My second draft was my 2 months fruit. I had to make 20 iterations for the home page.

2. The wireframe one sees on this screen is the first wireframe they agreed upon. This wireframe gave some direction to the work but you will see how much a design evolves in two months.

3. The flow worked in loops.

4. But as you can see on the left side with each iteration my designs were getting better or at least they did not degrade because we students are used to quick work. We do something because we feel like doing it. But in work places it does not work like that.

This is the story of every client you and I will work with. Since they don’t know how to draw or achieve the type of service they want to extract from you, the process becomes very lagged and multi-directional as in most cases the clients do not know what they want.

5. I am saying all this because each and every design student has to face them one day. And it is a good thing. Why? because in the process of being extremely worked up you also learn how to defend your designs. We know the stuff we do but where we fail is a confident communication of the idea and literally selling our design 6. And with time one learns how to defend the designs. This was an extreme condition where I worked on a project for a very long time but with progress you will be able to see consistent improvement.

59

FINAL FLOW < HOME PAGE

60

FINAL FLOW < HOME PAGE

61

Visual treatment The previous spread displays the final flow on which I worked for the home page. Similar steps will be taken for other tabs. The visual treatment of this spread majorly consist of illustration making.

Apart from that this screen had mobile and tablet mock ups to show the actual product. In this ----> illustration you can see the 4 sections for which i will be creating illustrations. I brain stormed the key words to create visuals for the same.

As illustrations are a form of visual representation. They do not need to be literal when appended with context. My illustration would be looking very formal because I had to keep in mind the user/ potential client for the software. So being abstract was a complete No.

Concept The concept for the illustration was to depict a teacher working on the following task for which ultimate partner is classroom.live. The teacher was conceptualized in the primary color. This is all theoretical before I put it on sheet. My aim was to make the work a teacher does look very light and fun.

Keywords for illustrations: Illustration 1 - Automatic attendance, report making.

Illustration 2 - Content Creation, presentations, slides Illustration 3 - Personal attention, close contacts with each student Illustration 4 - Online Tests, Online Assignments, Time saving

62

Rough sketches

63

Rough Sketches

64

65

66

67

68

69

FINAL DISPLAY OF ILLUSTRATION

70

71

FINAL UI < HOME PAGE

72

FINAL FLOW < HOME PAGE

73

Content for the website <FEATURE PAGE

74

Content flow

The content flow: 1. First section displays an image with three lines that are animated.

This is to pitch 3 hard hitting lines to the clients according to the senior marketer in my firm.

2. Since this was a feature page. Every section is simply about the user and the features we are providing the user. The second section is about the Teachers and how is classroom.live essential for a teacher.

3. Similarly after teaching we are positioning students as we are catering to the teacher- student relationship. here we display features like hand raie, direct messaging, assignments and assessment etc.

4. As the solution we are providing is a full management pack for a cloud based functioning of the school. The last we mention is management as to run a school on cloud. It is important that management gets full control over the functioning of the school remotely.

5. I have treated the CTA and the footer as one section and decided to place it on every page so that it is easily accessible at the end of every page.

Conclusion: This page is dedicated to the features that were previously decided to be the part of the home page.

75

Low Fidelity Wireframes < FEATURE PAGE

76

Low Fidelity Wireframes < FEATURE PAGE

77

Mid Fidelity Wireframes < FEATURE PAGE

78

Mid- Fidelity Wireframes < FEATURE PAGE

Long story long 1. The idea was to keep every page consistent by adding a catch line on the top. In this wireframe I picked the line: “Classroom.live is the best for you”, here you were anybody who was looking at the site. Be it a teacher, a student or a principal or a manage.

2. Feature page had the simple flow of explaining the features of three targeting users. Previously we were starting with management but with time my head realised that the pivot for the website is supposed to be a teacher.

3. If you read the content for the flow, maximum time was consumed by the list of features we wanted to show the maximum amount of services that we are providing over our competitors 4. As my whole narration is kept very personal and informal, this is to keep the topic and the project light and more visual than text.

5. Coming back to the flow, in the flow for the teacher one can see how all the features are placed in a sequence of what features we want our users to get attracted by. After studying multiple competitors, one common error I found was the similarity between the features they explained. For example: it always started with Privacy and security and then content sharing. Nobody was too specific to show what all features are there in their product 6. This was seen as an opportunity to overload the feature page with custom made icons and show the full spectrum of features that classroom.live had to offer. Also to some extent it was important to brag about our features as this was a new product and it was really important to sell what was there in the product. An ambiguous website with a lot of empathy in it would not have worked since we were in our early steps.

79

High Fidelity Wireframes < FEATURE PAGE

80

High- Fidelity Wireframes < FEATURE PAGE

LESSONS 1. In this draft I had already worked on the visuals(a little) and also on the icons. These were the first drafts of icons that I created for the website. This will be better explained in the visual treatment.

2. Till this time I learnt patience is important when working cohesively with your heads.

3. This was the final content flow but still you will notice tweaks in between as the UX of the website was constantly changed by the xyz team for whom the website was being made. Moral: Clients are just clients.

4. The designing part of the same will evolve by the end. These icons were boring but I created them considering the aesthetics of the corporation I was working in.

81

FINAL FLOW < FEATURE PAGE

82

FINAL FLOW < FEATURE PAGE

Long Story Short: 1. As the previous content flow was final, it still got changed after 2 weeks. Lesson: Learn to defend your designs.

2. This was the final-final flow on which i will began my visual treatment. The features are rearranged and the content was rewritten on XL sheet (Somehow on shouldn’t use xl sheet for content but never tell your boss the same) 3. The footer design you see was fixed and the next step is just working on the imagery and the icons.

4. UX Tweak: the three tabs you see on the opposite page was added to keep the magnetic scroll effect.

5. We all know this effect where once you scroll down, as you change your section the tab automatically shows the section that you are in. Or one can simply click on the tab to avoid the time one consumes in scrolling and finding particular sections.

83

Visual treatment The Visual treatment of the feature page consists of two sections: IMAGERY ICONOGRAPHY First we will be dealing with the imagery section. In my previous project I have explained the type of imagery that should be used for classroom.live. According to the guideline I created the imagery has to be cool, clean and calm.

Imagery The website required apt images for four sections: 1. The first section that has the animated text 2. The Teacher 3. The Student 4. The Management Source of the images Shutter Stock Pexels Type of the images clean calm cool related to virtual learning

84

85

Source: Pexels

Tones of the image

86

Source: Istock

Tones of the image

87

Source: Pexels

Tones of the image

88

Source: Istock

Tones of the image

89

Iconography - Part 1 Icons are a way of visually representing a characteristic/ object in a small pace. We see icons everyday, in website, applications and real objects are bike, washing machine. Iconography is the second part for the visual treatment of feature page.

The Area for which we will be making icons are: Feature for teachers, students, management and also the three tab that is placed after the first section. These tabs are like secondary banner that will be acting

90

as a medium to toggle between teacher, student, management. Below is the process with which i attained similar looking custom made icons for the website.

The process: The icons were made in 4 steps. I followed material design icon guidelines to create the following icons. I followed different shapes for the icons in accordance to the need of the doodled drafts.

91

92

93

94

Live Class with Whiteboard

Parent Connect

Share Content

Single Virtual Classroom

Give Assignment Online

Instant Notification

Hand Raise

Real Time Reports

Automatic Lectures

Easy Content Creation

Automatic Recorded Lecture

Instant Messaging

Online Test & Assessment

Screen Share Anytime

Detailed Analytics

Security & Privacy

95

Iconography Part- 2 (Highlighted below) These were the three tabs for which I made detailed icons. These Icons were more like an illustration. As I wanted the icons to look more realistic and literal, I choose Gradients to be

96

used for the same. The illustration for the same were created with one comman element that the user uses. These Items were simple. Such as: laptop, book, notebook, desk etc.

The idea for these illustration/icon came from a reference. In this illustration i used a book and a happy teacher over a generic icon.

For this cute illustration I thought of my brother Naman and thought of his face when he was 5 years old. Object used: notebook & pen

97

As the most generic thought of a management guy, i made this tab with a laptop. Short story: this icon somehow looks like an employee at unthinkable solutions.

98

This was made because suddenly my head wanted to include parents in the feature section.

Later it was removed because it was unwanted in the middle of the final output

99

FINAL UI < FEATURE PAGE

100

FINAL FLOW < FEATURE PAGE

101

Content for the website <ABOUT PAGE

102

Content flow

The content flow: 1. First section displays an image with a headline. This is more like a template for the first section of each page.

2. An about page always creates a form of association when a visitor visits a site. Who are we/ introduction to the product is as important as the features because this forms the ground for the a product’s philosophy.

3. Any product or a service is always initiated with a notion in the creators mind. The mission here fulfills the same inception of the product. It forms an empathetic ambiance for the product 4. Introduction to the parent company was cruicial in the fourth section as the firm deals with multiple procuts for a education, fleet, health care. Introducting the umbrella under which all the products fall is always a good idea when building a bundle of software solution.

5. This section includes the core value. This section is partly bragging but in websites bragging is important because websites have become the facades of our shops. And beautiful facades leads to more users (but product should be good too, alone a facade never yields a good turnover.)

6. Introduction to the leaders of the team. Ritual followed in traditional websites. This section becomes happening with happening pictures and interesting content. But i worked in a software corporate.

103

Low Fidelity Wireframes < ABOUT PAGE

104

Mid Fidelity Wireframes < ABOUT PAGE

105

FINAL FLOW < ABOUT PAGE

106

FINAL FLOW < ABOUT PAGE

107

Book a demo UI DESIGN

108

My learnings From the Main Graduation Project This project was the first big project of my life that I did as a service. Being a design student, often there comes a gap between what we wish to create and what the clients want from us. This project was successfully able to bridge the gap. I am thoroughly happy with my first attempt at working on a real website. This project helped me learn the following things as a designer: 1. Being an artsy student, I learnt how to cater my skills to other people. This was an achievement as I did not know how to coordinate with non- designer human beings and still create decent designs.

2. This project taught me how to improve constantly and take harsh criticism as feedback. The feedbacks are usually not straight to the point and oblivious when coming from a clients perspective. I learnt how to comprehend a long story of a client and turn it into an acceptable design.

3. This project played a crucial role in fixing my design bugs and made me more functional as a designer. Mostly we as designers forget the function as we get carried away by aesthetics. This project helped me to use my creativity in a righteous proportion.

4. I learnt how to work with the business team, marketing team, developers, while I single handedly handled the project. As an output when I look back, Quantitatively I just created a brand guideline and two versions of a website for the product. But with a qualitative perspective I can easily feel how much I grew throughout the process. Hence process brings learning, not output.

5. To myself and other designers: we should always take feedback constructively and never forget to raise questions and prove our points as designers. It is important to place yourself in the clients shoes and see how he is looking at the service.

109

110

1. Introduction to Yellow.live About Yellow.live is a software-based solution for tracking students while they are on the bus. As unthinkable focuses on solving real-life problems and making an effort to study the user’s pain points to deliver what they need. Before creating the product it understood the need for both teacher and student.

Parents

Schools

Keep track of your school buses in real-time with a comprehensive transport management solution. With features like speed alerts, geo-fencing of vehicles, and security notifications, you can secure the safety of your students outside the school as well..

Keep your dear ones at arm’s length with real-time tracking of their school buses. Instant pickup and drop-off notifications with updated driver information will ensure your peace of mind when your kids are on the road.

111

Design Brief Study the UX flow of Parent app

Design Process The process of design for each and every brief has to be molded according to the needs of the approach. In this, I started with studying the user journey map and the prototype created by an employee.

As a UI designer it is very crucial to study the user flow and understand how the product is going to behave when it reaches the final hands. So For the same I went through the whole UX process. It included Presentations on the product and competitors analysis for the same. To understand the product’s proposed personality, one has to go through the assumptions or hypothesis on the basis of which a UX designer creates a mental image of a product. I would use the most common example, think of Apple as a product in your hand. The whole user experience has personality to it. A strong trait that you find throughout any product or application designed

by apple. So to match the mental image created by UX designers, it becomes important for a UI designer to Go through the same road. As a UI designer is later responsible to create the design language for the product. The visuals and screens that the user sees.

What is a User Flow?

As designing pages for websites and applications doesn’t always produce the best results. To accomplish the needs to the user, it is important to study how will user use the product. User flows focus on what the user needs to get done and how to deliver that in the most effective manner possible. This leads to better user experiences as it places the user at the heart of the design process.

I will add questions to make it more informative, where i want to explain some terms 112

113

Proposed Design Language The design system I proposed was completely based on material design. Before jumping into my conclusion. I did a thorough research of different design guidelines. Namely, Material design, Apple design, Firefox design guidelines and inVision design system, I found out material design is the most ubiquitous and subjectively favourable design system for me. So for Yellow.live i choose to pick material design as the foundation of my design guidelines.

Color Palette

Iconography #290421 #e94c60 #7070e6 (In order)

114

Typography

Why did i chose generic fonts?

As designers, we are the epitome of expression and experimentation. But when it comes to delivering something for masses.

Ubiquity often is the right thing to do. Plus both the fonts are enormously clean and readable. I learnt these fonts create the minimum amount of visual noise when used in the write place. As designers we should love fonts, preach them because once one fine Faculty said “font badlo, duniya badlegi” Header: Helvetica Helvetica is a precise font. It has been used by many corporates in their visual identity.

It is a font that stands high and has the quality of becoming a header. Moreover Helvetica is a font easily available.

It comes with a font family, this makes it very versatile

Header

Body

Body: Open Sans Open Sans is widely accepted as a body font.

Personally I compared it to some fonts like lato, roboto, futura, monstraat etc but somehow it creates the minimum noise.

Open Sans is comes with a large font family, versatility becomes important if we talk about body. It is a save choice since the target isn’t a niche.

115

Illustration Style Illustration style is very crucial to create engaging User Interface. In Today’s design world, illustrations have taken a big seat. With the mega boom of illustrations in books, websites, mobile applications, It becomes important to have a consistent illustration style.

They are very useful to explain things step by step. Illustrations somehow adds life to a design can speaks a lot about the subject the user is dealing with. It gives an overall overview to the users, if analyzed deeply.

Illustrations are often used for various purposes. According to my understanding of current trends, illustrations have become a strong way of representing one’s aesthetics.

These days illustrations have become a medium of catching user’s attention. We can also day illustrations are like physical window displays, their main purpose is to grab as much attention as they can. But apart from this aesthetic value in a design, illustrations are also a good medium of representation of an idea to the user.

Today they have become a way to adorn but if you see it through the eyes of an illustrator, you will understand that there are people who come up with a complex illustration concept to summon a message in it. Sometimes they are simple, sometimes complex but they are always a strong medium of guiding the users.

Illustration Style

116

Alignment

Importance of Alignment Without alignment, design is chaos. With this ideology I believe it becomes really important to learn alignment. Now here i will be presenting low fidelity wireframes to explain my proposed alignment of the Application but Alignment is a much more serious issue. It is an opportunity to make designs more organised and well behaved Majorly we have two types of alignment: Edge alignment: As the name suggests, the edge alignment refers to the placement of content on either edge of the page or the canvas. Whether the elements are placed on the right, left, top, or the bottom of the page, everything is kept on the edge.

Centre alignment: This is the second type of alignment which places the content on the central imaginary line. Take an example of center aligned text.

Each text might have a different width, but each is placed just at the center of the page. The same rule applies to the text and other elements in commercial graphic designers logo design as well.

I chose flush left alignment for the major part of the application.

In this alignment type, all the elements are aligned by a imaginary line to the left of the selection or also the art-board.

117

2. Onboarding Screens Designs What are Onboarding Screens?

Onboarding is one of the most critical phases in an app user’s journey. App onboarding is primarily the first point of contact and therefore is essential for making a great first impression. As a result, it is important to make this process as simple and seamless as possible.

Importance

Guidelines

Onboarding is one of the most critical phases in an app user’s journey. App onboarding is primarily the first point of contact and therefore is essential for making a great first impression. As a result, it is important to make this process as simple and seamless as possible.

Use Fewer Words: It is important to make sure copy is short and to-the-point in order to keep users engaged.

Be Adaptive: The onboarding process should be warm in tone, simple and quick.

Communicate: Short tips and notifications can be a good way to guide new users through the process.

118

Design Brief To create 3 onboarding screen for Parent app of yellow.live

Design Process

The design process I followed involved brainstorming of the ideas and making rough sketches to come up with the idea. This was a quick project and one thing i learnt from Corporates is that the industry dwells on references. No matter how sad it might be to some designers who like to come up with their own designs. In an environment where you are supposed to create designs everyday, one is bound to take references. Plus one big advantage of taking references is that you realise what is going around and how you can improve your designs by just looking at the approach of veteran designers. For designing the onboarding screens I did the same thing. I jotted down the key points and tried to come up with

the best design I could manage in the given time. One is bound to take references because one is asked to do so. There were days I was asked to collect as many as references I could from dribbble and behance.

Steps Taken Keywords extraction Visual language Brainstorming Sketching

Final Illustrations Final UI In mock up

119

Key Words Greeting, Managing leaves, Planning Leaves, Anytime contact, Care, love affection.

Visual Brainstorming

“Design Process steps” 120

Rough Sketches

121

Illustration style

Cheerful

122

Wavy

Flat

Line and color fill

Light

Warm and Pastel

ILLUSTRATIONS

123

124

125

Mock ups

126

127

3. Coach marks designs What are Coach Marks ?

Coach Marks are those instruction lines we get when we first onboard an application or software.They call for attention to new or unique features, nudge users in the right direction, or guide users during onboarding. It is important to use coach marks when we consider are user base to be less tech savvy.

128

Usage

Types

Coach marks can either appear automatically, for example, when users visit a page for the first time or when a new feature is added, or in response to an action, like activating an info icon.

Informational: This calls attention to a section on the page. (If there is too much informational text to add below a field, it is better to use a coach mark.)

A coach mark points to the targeted UI element on the page. It displays a title, description and either a dismissal link or ‘X’ icon.

Once the coach mark is dismissed, it will not appear again.

Instructional: It provides short, task-oriented tips. That helps the user to make better choice. Like in Adobe softwares while using a specific tool.

Design Brief Design Coach marks for yellow.live parent app

Design Process

To create coach marks for the app, I had to consider the UX flow for the parent app and identify what actions will need a couch mark. When one defines one’s user for a product, it becomes really important to understand a user’s point of view.

Since this app was for Parents. I kept the scope of my users low in terms of using the product. Even if today people have become comfortable in using smartphones, it is very important to consider even the 10% of the users who might feel difficulty in using the app for the first time. It becomes the responsibility of a UX de-

signer to guide the user before enabling them to use the app. It has been seen that users no more need coach marks and superimposing a layer of direction might create hindrance to the user’s experience. But again i had to consider the worst case scenario and be handy for those users too

Steps Taken Identifying Scope Content creation

Fetching References Final Designs

129

Identifying Scope/ Wireframes

“Design Process steps” 130

Rough Sketches

131

Final coach marks created

Note* all the illustration were taken from unDraw illustration.

It is an open source site for referencing and inspiration

132

133

134

135

136

1. Transporter website_dashboard About Transporter Website is a SAAS product ( Software as a solution) that comes under Yellow.live. It is one of the websites created for the Transporter Incharge and owner. Since Yellow.live offers a product to the school, it is bound to create different portals for different holders under yellow.live. For example, principle, administration, transporter Incharge, bus assistant and drivers

and Parents. As mentioned, this is a portal created for head transporters who are in incharge for overviewing and monitoring the fleet on roads. This website enables a digitalisation and automation of the data feeded by the business. This makes the whole process of monitoring the fleet cloud based

Design Brief Design Dashboard for Transporter website

What is a dashboard?

Before starting designing a dashboard, it was important to understand theoretically what exactly is the purpose of a dashboard. A dashboard is a type of graphical user interface which often provides at-a-glance views of key performance indicators (KPIs)

relevant to a particular objective or business process. In other usage, “dashboard” is another name for “progress report” or “report.”

Importance: • Visual presentation of performance measures • Ability to identify and correct negative trends • Ability to generate detailed reports

• • •

Align strategies and organizational goals Saves time compared to running multiple reports Gain total visibility of all systems instantly

137

High Fidelity wireframe provided

The wireframe provided.

Reference for color palette.

(Mobile version)

138

Design Process I was given a high fidelity wireframe as the foundation of my user interface. After learning the purpose of a dashboard, I did some reference research. I looked at the various types and forms of dashboards used.

Behancing the dashboard design was a helpful activity to understand how exactly am i supposed to present the data in a wholesome way. Finding references is an alternate work.

The main job was to create the color palette and explore design that would be more user oriented rather aesthetic. The first step

was identifying the scope of elements in the dashboard. This is similar to the process of deconstructing a house before one makes new changes to the form.

These the following steps taken in this design process: 1. Color Palette 2. Pie Donut Design 3. Graph Design 4. Designing the Screen

Identifying components

Pie Chart

Bar Graphs

139

Step 1 - Color Palette

“A COLOR PALETTE DEFINES THE COHESIVENESS OF A DESIGN. IT CAN MAKE OR BREAK A DESIGN” I am putting emphasis on it because i had to go through a very extensive process to create the desired dashboard.

140

Initial step to create a color palette Before starting i studied the colors use in the whole portal to understand what all colors are being used since there was no design guideline for this website. I collected all the colors i could find in the icons, buttons, tables etc. Below is a screenshot of the same rough collection of colors and various combination created according to visual subjectivity. When it comes to visual design, there are theories but everything narrows down to the judgment your eyes makes. The world has “n” number of aesthetics, “n” number of ways to articulate information. And there are no hard hitting rules for them.

141

142

To Truly justify my eyes and understand colors better. i made various combination with perceiving one of the color primary and unchanged. I did this process for all the 4 colors of the color palette excluding grey since according to the identity of the whole website grey was just a complimentary friend throughout the UI.”

143

Now we will go on a visual ride

visual ride

144

145

146

147

148

Final color palette Secondary Color Palette

Primary Color Palette

Hexcode: #6BD7A8

70%

Hexcode: #FCD800

87%

60%

20%

Hexcode: #6BC2ED

87%

60%

20%

A thought:

40%

A designer often goes through a long inaudible monologue while working on a design. Things look simple and easily achievable before once steps his foot into the path of designing a thing pedantically.

There is a constant flux that remains when one is looking at the colors, alignments, typefaces as everything we do is far away relative of art. We have been making design a science of doing things for the purpose of leading somewhere, hence achieving a goal. But in

Hexcode: #9E97C7

70%

Hexcode: #E55252

87%

40%

60%

10%

10%

the process of making design a particular way of doing things, we leave intuition behind. And leaving intuition behind is a scary thing for designing and also for life.

All i mean, is that gut feeling, that unexplainable certainty of performing something in a particular manner is must to off beat your designs and grow internally as a designer.

149

Step - 2 Donut Design

“It is super important to keep the donut designs simple and plausible to come alive” I am putting emphasis on it because i had to go through a very extensive process to create the desired dashboard.

150

Given Wireframe

151

Designing a Donut As one can see in my first attempts I was trying to find possible static ways to present the data with the best visibility. When we use pie graphs, fundamentally it is to divide and describe the division in the minimum time. The whole idea of presenting a pie graph is to make it easier for the transporter incharge to locate his various expenses. The challenge I faced initially was the level of insight that was expected from these graphs. As you can see

below i struggled in deducting what to keep and which colors to use as I was doing it for the first time. As a design student, I must say design looks pleasing or easy to do until and unless one. When you go down to understand the symbolization of color, the importance of uniformity you realize it isn’t about the idea but the execution.

First Rough Attempts

Don’ts • • •

152

Never over do a design, simplicity is good Do not use CTA color everywhere, it is called Call to action for some purpose.

Do not add the elements to increase the aesthetic value when you are designing a dashboard.

Draft 1 In these drafts i will explain my mistakes as i wish to do so. This draft looked more similar to the UX wireframe provided. Because i did wanted the UI to look similar to the wireframe.

The mistake i made was writing numbers on donut.

• One reason is its lack of aesthetic appeal. Also it is not functional because when you design something, you consider the plausibility in terms of the developer’s team who is going to put life into your designs.

• The visual weight is not divided equally and the upper section has all the element.

• The shape of the card lacks negative space. This ruins the overall cohesiveness of the card.

153

Draft 2 Here i made the design evidently more cleaner. Locating the total amount in the center to show the total expense for the month.

• • •

154

This card was more visual balance than my first draft and other petty efforts i made.

The font used was open sans, as mentioned the design guideline in project 1.

I chose to denote all three division with random color from my color palette. This was completely wrong on my part.

Draft 3 Sometimes you listen to your mentor and it turns out to be wrong. This was on of those drafts that meant nothing but you still try it. Just in case.

• • • •

This design was 100 percent off. It was an alien to the color theme of the transporter website.

The color symbolization is not there. It does not communicate the difference between the elements.

It makes it look like a family. Different but sub sections of one another.

The information give is not optimized and deduced to its simplest form here. But obviously it was a try and one must try.

155

Final Draft This was the final draft from my end. To keep it informative the percentage, item’s name, the amount is kept on the same line in the most minimal manner.

• • • •

156

You can see that the colors are slightly different, this was needed because yellow and green were the call to action color.

And to not confuse the user and corrupt the theoretical knowledge of web design we choose tones of the same colors.

The month dropdown was kept generic to what was used in other screens.

The card follows left flush alignment that i mention in my first project section A.

157

Step - 3 Graph Design

“Graph designs should be strictly made with “form follows function” mantra as it is a data representation. But even with numbers it’s our responsibility to make designs as harmonious as possible.”

158

Given Wireframe

159

Designing a Graph To design the vehicle performance graph, I first formed the rough design I will follow for the bars. Since all my designs have a soft edge to itself. I made the bars round cornered. While designing the bars I considered the color we could give to the vehicle performance. Since the color should relate to the purpose of the bar. I kept it green initially but one can not repeat the CTA color.

So the color selected on the basis of overall look and feel is blue.

Since blue is one of the neutral colors. As per the rounded

Rough Design

160

edges of the bars. I choose not to completely round them so that the whole interface does not appear too contemporary. As this card has two states, one state is the vehicles who are top performing, hence blue. The other state is for the vehicles that are least performing, hence red. Red is the most ubiquitous color for negative highlight when depicting dichotomy.

State 1_ Top performing vehicles

161

State 2_ Least performing vehicles

162

163

Given Wireframe

164

Designing a Graph To design the fuel consumption graph, first I found different ways to represent the continuous bar as shown in the wireframe. The challenge in this graph was the number of days on X axis. Since X axis represented the no. of days in a month, it was bound to look bulky with bars. Another challenge was representing the bars that crossed the threshold. Since the wireframe presented

was quite simple, I had to make it more appealing for the product. Since this dashboard had 5 tabs for different data, one could not use the similar bar design throughout. Monotony in the design makes things boring and contrast is very important to create a different visual presence of each and every graph.

Rough Design

165

Design Story For the research I went through different references but the utmost help was provided by studying Google analytics. Their designs are simple and highly functional. Also since i had a responsibility of breaking the monotony, i explored with various types of data visualization. You can see the different drafts as you proceed. The designs created are to be seen as a part of

Draft 1

166

the whole dashboard. The whole design process expresses the wide evolution of a simple graph. User Interface design is a slow process with minor delicacies. We think it’s easy but it is never less than a drag. In the next pages you will see how I minimised the representation of the red bar and depicted it as a thin line of threshold. Because deducing is crucial.

Draft 2

Draft 3

167

Design Story After designing many drafts and placing them with the whole dashboard design. I had to make the color green because our previous graph was blue and if this graph was blue too. There would have been a drastic change in the look and feel of the product. This green is also a CTA color but since we did not used this green in our previous donut and graph. UI designers

Draft 4

168

get a little leverage to play around. Also since this is the highlight of the dashboard (since it has gradient in it), It is really important to choose the right color since it has the strongest attention grabbing power among all five graphs.

169

Given Wireframe

170

Design Story The design treatment for the last two graphs are similar since they fall under the same category. First depicts No tracking and the latter depicts Halt report. Both state the negative setbacks of the business, hence are kept in the bottom for the same reason.

These two are designed with the same style with which I de-

signed Vehicle Performance. Why? To maintain consistency of the design. Also the color is kept similar to the wireframe because the only highlights are supposed to be the days on which the vehicles cross the threshold

Rough Design

171

172

173

174

Last Section Making this dashboard literally took me 2 weeks. Which is a lot of time when i have been able to create a single page website in 2 days. But the steady growth is the part of the learning. Also Every task helped me learn something new. For eg. The two box you see in the bottom right in the opposite page is called Tool Tip. A tooltip

or infotip or a hint is a common graphical user interface element.

It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small “hover box” with information about the item being hovered over.

Final design in next two pages

175

176

177

178

1. Introduction to Voice User Interface “OKAY GOOGLE! Play Lua By Bright Eyes” “ALRIGHT! PLAYING Lua by Bright Eye on Spotify” is your AI taking voice commands from you.

This process of setting any ai to talk to you and respond with an appropriate response is VUI. In textaul language: Voice user interfaces (VUIs) allow the user to interact with a system through voice or speech commands. Virtual assistants, such as Siri, Google Assistant, and Alexa, are examples of VUIs.

Today VUI’s are everywhere. We can find voice user interfaces in phones, televisions, smart homes and a range of other products.

With the advances in voice recognition and smart home technology, voice interaction is only expected to grow.

Sometimes, voice user interfaces are optional features of otherwise graphical user interfaces—e.g., when you use it to search for movie titles on your TV or a song to search in your phone as it is illustrated below.

The primary advantage of a VUI is that it allows for a hands-free, eyes-free way in which users can interact with a product while focusing their attention elsewhere.

179

Design Brief The brief was to design a VUI for alexa. This VUI was exclusively designed for the in house product i.e Yellow.live. The whole idea was to present this VUI using alexa skill set and using the product as a complimentary gift to the certain big buyers of the product. This was a marketing gimmick and an idea was to promote Unthinkable as a brand on every Principles desk.

Design Challenge I was given a task to design a VUI. Till that day all I knew about VUI was my google assistant and the movie “Her”. To start the project I backed myself with information on VUI and Alexa skill sets. Going through each and every alexa design guideline was the last thing I was reading at night. The main challenge was not just designing a Voice User commands and favourable response but also the graphics for the same.

The device we choose was Echo Show gen 2 (shown below). One of the echo device that came with a ten inch HD screen. So my

challenge was not limited to designing the voice, I was responsible for possible graphic user interface (GUI) for the same purpose.

Since the idea was to teach Alexa a new skill.

The options to play around were very limited as this is something still emerging. The idea of teaching a specific skill to Alexa is still new. The number of references I could look up was bare minimum.

Guidelines • • • •

180

Create a great user experience Apt voice interaction Understanding how people naturally communicate Fundamentals of voice interaction

Design Process This project took more than three weeks to create the first version. As while working on this project there were a number of steps I had to go through and get feedback. Getting feedback is really important to make yourself better. Listening to feedback is always helpful. Below I have mentioned the steps

Steps taken 1.

2.

3.

4.

Understanding Alexa Knowing the limits/scope of Alexa Identifying the ultimate user and building user persona Creating questions and commands

5. Coordinating with developer for building Alexa Skill.

6. Questions selected 7. User Interface Design

1. Understanding Alexa Alexa is a virtual digital assistant developed by Amazon for its Amazon Echo and Echo Dot line of computing devices. Alexa’s capabilities mimic those of other intelligent assistants such as Apple Siri, Microsoft Cortana, Google Assistant, and Samsung Bixby.

Alexa responds to voice control by returning information on products (on Amazon of course), music, news, weather, sports,

and more. The back-end engine for Amazon’s Alexa runs on Amazon Web Services in the cloud, enabling Alexa to learn an individual or family’s preferences and expand its functionality over time.

This step involved using the product on which we were going to run Alexa. The product we were using was the Echo show, 2nd generation.

181

2. Knowing the limits/scope of Alexa: To learn and understand the design scope of Alexa I did brief research with the data provided by Alexa.

This included the following data research and learning new terminologies: Alexa Presentation Language:

Need for APL:

It is a visual design framework, which allows you to build interactive voice and visual experiences across the device landscape.

This multi-modal experience can make skills more delightful and engaging to the customer. APL provides visual elements including:

Amazon created APL so that one can design custom experiences that combine voice, audio, and visual elements in a single customer interface.

• This framework is adaptable so one design can scale to multiple device types while keeping the visual and voice elements synchronized.

• APL supports voice commands as well so that customers can ask for an item on screen instead of relying on touch interactions only.

1.

2.

3.

4.

Graphics Images Slideshows Video

Designing with Alexa To understand how efficiently one can design with Alexe, I did a study of Alexa design Guidelines. This whole research was in the form of a presentation. I have summoned the presentation in the form of multiple paragraphs and topics to include it in this document as a research.

We get the freedom to define where our visual elements are placed on screen, matching our visual expression and brand identity across many Alexa-enabled devices.

182

One can run a test simulation in the Alexa Developer Console to see what your design looks like across Alexa-enabled device types built

by Amazon.

Amazon provides sample APL layouts. These layouts are designed to work well across a broad range of Alexa-enabled device types.

One can use the layouts as-is, modify them, or build your own from scratch.

3. Identifying the ultimate user and building user persona: The ultimate user of this product was a school principal or a school owner. So to narrow down the needs/types of questions that would come to a principal’s mind, I created a user persona of a principal to understand and articulate his pain points in this new VUI skill that we were trying to create. From the beginning, we knew this prod-

uct is a marketing gimmick offered with the goal of flattering the customer with a complimentary gift. Along with that we also saw it as a scope to brand ourselves as an esteemed service provider on a principal’s desk.

Understanding User

183

Creating Principal’s User Persona: To create an ideal user persona, first I should have created an empathy map in regards to the product (yellow.live) we offered.

Since the product is all about student’s safety while commuting from school to home and vice- versa. The empathy map had to revolve around the same notion and data regarding the same service.

But due to lack Field study, I created Questionnaire with the help

of the sales team. Why the sales team? Because the sales team was the team that dealt with the real users. They understood their needs completely. But if I consider the essential steps, empathy mapping was a must. Lesson: Empathy Maps are important for field research.

4. Creating Questionnaire and commands For creating the questionnaire we worked with the sales team to incorporate more question that we could teach our skill. As initially the plan was to make a whole some vui that could answer atleast any general question that subconsciously came to a principals mind. With the same notion of creating something new, we created

184

more than 200 questions that a principal could ask. These question s were in an excel sheet form. I have pasted screenshots of the same to show the examples of questions that were created by 20 members of the sales team.

Screenshots of excel sheets with questions

185

Screenshots of excel sheets with questions

186

5. Coordinating with developer for building Alexa Skill: Developer is very crucial in building prototypes into real life. The developers are responsible to code our thoughts and design ideas into the form of workable products, understanding a developer becomes important. But a developer and a designer are like two poles (at least according to my limited knowledge).

Identification of the limitations: As I worked with the developer, I understood that not every idea can be executed with limited human resources. After coordinating with the developer, I learnt about the limitations of Alexa as a skill set. We had 200-300 questions to create a VUI but the execution part was difficult.

Teaching an AI to respond according to your needs and desires was actually more than a 2 weeks task. This might be because of our amateur skills or maybe because Alexa worked on the personal language called lambda. I did not understand the technical part much since code is like putting energy cells into an idea you create as a prototype.

With the limitations of Alexa or our understanding of Alexa, we came to a conclusion that we will be focusing on 4 questions for the first version.

Another challenge we faced was the workability of the Graphical User Interface along with the Voice user interface we were aiming to create. According to Alexa design guidelines, Alexa could only display text/images for each action.

Also rendering a real time report was a question too. As we wanted the skill to answer questions like: How many are using bus services or how many buses are on route 9?

This seemed to be too specific for Alexa. As Alexa has to have skills coded for everything apart from show weather and play music. I personally found Alexa a dumb possibility But still an employee got to do what he is asked to do. So we worked on an implausible idea for 3 weeks and created version one that answered 4 questions.

187

6. Selected Questions Below are the question selected for the 1st version. Command stands for the questions via which the user is expected to communicate. S1, S2 .........Sn stands for Scenario 1, 2 and xyz Command 1 S1: Alexa open Yellow live S2: Alexa launch Yellow live Command 2 S1: Alexa, show analytics on yellow live S2: Show analytics S2: Show my transport efficiency S3: Show business analytics S4: Show my business analytics S5: Show me analytics for the current month?

S6: Show me business analytics S7: Show me business analytics for my school S8: Show me analytics for my school

188

Command 3 S1: Alexa, show live footage of route nine S2: Alexa, show route nine S3: Alexa, show live footage S4: Alexa, show camera footage of route nine S5: Alexa, show live feed of route nine S6: Alexa, show live camera feed of route nine Command 4 S1: Alexa, show my profitability of last month S2: Alexa, show my profitability S3: Alexa, show my business profitability S4: Alexa, show my fleet Status S6: Alexa, show my dashboard

6. User Interface Design Command 1 - Alexa open Yellow live

User Interface Design

189

Command 1 - Alexa open Yellow live

190

User Interface Design

Command 1 - Alexa open Yellow live

User Interface Design

191

Command 1 - Alexa open Yellow live

192

User Interface Design

193

My learnings from 20 weeks in Unthinkable solutions 1. Since pandemic stuck us, this learning is too life oriented for our career oriented existence, and this matters the most.

2. If you try to reach where you want to reach, you reach there. The question is does reaching there makes you happy. I think the happiness lasts a day or two.

3. We are curious heads, yearning to be wholesome one day but sometimes we forget the direction. Direction of the wind matters.

4. Work is holy and important but not more than life.

5. Design is beautiful and all sorts of people give all sorts of 100% to deliver the products you and me use everyday.

6. Life is deeply inter-weaved and a slow progress. Cities are fast, deadlines are fast but remember quiting is always an option.

7. Persistence and strength is tested when you perform decent outside your comfort zone.

194

8. An honest growth and self introspection is a must. Self loath is easy but empathy is important.

9. We are all the parts of a big giant machine 10. Remote working is the future.

11. Crying is not the solution, self pity is toxic.

12. Internet is the water we need for our virtual existence.

13. Go slow, but aim to go far. When one is running, they miss the details 14. A philosophical learning of life is crucial to grow into a balance human being who can make rational decisions and enjoy life to the fullest.

15. UI/UX is a beautiful thing. My previous learning (pg no. 109) summons my educational learning,

Bibliography https://www.google.com/search?q=design+guidelines&sxsrf=ALeKk02tU1HU936On08T3cHK8ToDeVVtNQ:1590092663731&source=lnms&tbm=isch&sa=X&ved=2ahUKEwihr4bj5MXpAhXxzDgGHW2aBVcQ_AUoAXoECBUQAw&biw=1440&bih=789#imgrc=wvfwheqKhcVcPM https://graphicdesign.stackexchange.com/questions/44577/what-is-so-good-about-helvetica https://www.toptal.com/designers/ui/the-super-simple-guide-to-iconography https://usabilitygeek.com/big-differences-ux-ui-design/ https://www.elleandcompanydesign.com/ https://www.google.com/search?q=design+guidelines&sxsrf=ALeKk02tU1HU936On08T3cHK8ToDeVVtNQ:1590092663731&source=lnms&tbm=isch&sa=X&ved=2ahUKEwihr4bj5MXpAhXxzDgGHW2aBVcQ_AUoAXoECBUQAw&biw=1440&bih=789#imgrc=wvfwheqKhcVcPM https://www.google.com/search?q=open+sans&sxsrf=ALeKk02Xm_3UEKilUoQvkGf1r3QRzUwP-g:1590092718266&tbm=isch&source=iu&ictx=1&fir=pjweZiERddXtnM%253A%252CGr9TAJc6UsuNTM%252C%252Fm%252F0hr2lmr&vet=1&usg=AI4_-kTDm20jIqdUKfv0iiZCYkCCwFRD_Q&sa=X&ved=2ahUKEwifiYf95MXpAhWazTgGHS8mCdAQ_B0wFHoECAkQAw#imgrc=pjweZiERddXtnM: https://www.designmantic.com/blog/art-of-alignment-graphic-design/ https://liquid-state.com/what-is-app-onboarding/ https://www.interaction-design.org/literature/topics/voice-user-interfaces https://en.wikipedia.org/wiki/Dashboard_(business) https://www.google.com/search?q=design+process+illustration&tbm=isch&chips=q:design+process+illustration,g_1:graphic+design:I5cZTo84EXQ%3D&rlz=1C1GGRV_enIN831IN831&hl=en&ved=2ahUKEwjwkMLd0JjqAhXaeysKHfBtA-QQ4lYoBHoECAEQHA&biw=1903&bih=937#imgrc=eJD_I5pvgEiclM

195

Bibliography http://www.acreativelogo.com/avenir-font-pros-and-cons/ https://www.experienceux.co.uk/faqs/what-is-wireframing/ https://www.interaction-design.org/literature/article/empathy-map-why-and-how-to-use-it https://developer.amazon.com/en-US/docs/alexa/alexa-design/get-started.html Book : The anatomy of type_A graphic guide to 100 typefaces_ author: Erik Spiekermann

196