Graduation Project

GRADUATION PROJECT UI/UX Design

COLLEGE MENTOR : MRS. VANDANA WEKHANDE INDUSTRY MENTOR : MR. PARASMANI Neha Harit | Fashion Communication Department Mumbai | BD/16/834

CopyrightŠ 2020 by Neha Harit Department of Fashion Communication National Institute of Fashion technology (Ministry of Textile, Government oft India) Sector 4, Kharghar, Mumbai, Maharashtra, 410210 India Tel: 022-2774 7100 All images and text Š NIFT This document is originally submitted as a part of academic learning to National Institute of Fashion Technology (NIFT), Mumbai and is for academic purpose only. The opinions expressed in this document are solely those of the author and NIFT does not bear any responsibility for the nature of its content. Reproduction, distribution, or transmission in any form of this document must acknowledge the author and NIFT, Mumbai.

Completion Certificate

Joining Letter

Copper Mobile (India) Pvt. Ltd. TEL : +91-120-4205400 www.coppermobile.com

06th May, 2020 Ref: CMI/NOI/IL12/20

Internship Letter TO WHOMSOEVER IT MAY CONCERN This is to Certify that Miss. Neha Harit has undergone 4 Months Internship in our organization from 6th January, 2020 to 5th May, 2020.

She has worked in UI/UX Designing project during the training under the supervision of Mr. Parasmani Kumar (Lead UI Designer).

She was proficient and has been handling the work efficiently. Her character and conduct was good during her tenure with Copper Mobile (India) Pvt. Ltd. We wish her a great success in Future.

Regards, For Copper Mobile (India) Pvt. Ltd.

Manish Saxena Delivery Manager (India)

Completion Letter Registered Office: Copper Mobile (India) Pvt. Ltd. A-35 Sector-2, Noida, Uttar Pradesh - 201301 Corporate Identity Number: U72900UP2011PTC123469

Page 1 of 1

Faculty Mentor Certificate

This is to certify that Ms Neha Harit (BD/16/834) Batch of 2016-2020, 8th semester, student of Bachelor of Design.

Department of Fashion Communication, National Institute of Fashion Technology, Mumbai, completed her graduation project entitled "Booker Transportation� at Copper Mobile 6th January to 24th April 2020, under my supervision and guidance

Mrs. Vandana Wekhande Faculty Mentor Department of Fashion Communication National Institute of Fashion Technology, Mumbai

Jury Certificate This is to certify that Ms. Neha Harit (BD/16/834), Batch of 2016-2020, 8th semester student of Bachelor of Design, Department of Fashion Communication, National Institute of Fashion Technology, Mumbai, completed her Graduation project entitled "Booker Transportation� at Copper Mobiles from 6th January to 24th April 2020 under the guidance of her-faculty mentor Mrs. Vandana Wekhande and industry mentors Mr. Parasmani

Evaluation Jury

Signature

Declaration I hereby declare this Graduation Project document, comprising my internship experience and project report titled Booker Transportation submitted to the institute, is my original work and no part of the report has been copied or reproduced from any other sources or work by others. However, any material taken from any other published Source has been properly cited or referred to and acknowledged at places.

Neha Harit Batch of 2016-2020, Semester-8 Bachelor of Design Department of Fashion Communication National Institute of Fashion Technology Mumbai, Maharashtra Date:

“Tetris taught me that once you fit in, you disappear.�

Contents Preface Acknowledgment Phase 1

Phase 3

Phase 5

Introduction

Information Analysis

Final Prototype

About NIFT NIFT Mumbai About Me

Stalk-holder Study Redefined Brief

Final Prototype

Why this project?

Phase 4

Ideation Phase 2

Research of the Subject

Grid Typography

UI/ UX Case Studies

Wireframe

User Interview

Low-Fidelity Wireframe

Mind Mapping

High-Fidelity Wireframe

Wireframe Concept

Phase 6

Phase 7

Booker Transportation App

Final Prototype- App

Brief

Final Prototype

Mobile Application Case Study

Phase 8

App logo

Final Glance

Grid

Style Guide

Wireframe Concept

Conclusion

Low-Fidelity Wireframe

Webliography

High-Fidelity Wireframe

17

Preface This is the documentation of my graduation project done under the curriculum of National Institute of Fashion Technology, in the year 2020.

The document covers my entire process of how I went about and grew through this project.

I would like to thank my supervisors for their excellent guidance and support during this process. I also wish to thank all of the respondents, without vehose cooperation. I would not have been able to conduct this analysis.

When I was offered this project. I was excited to take it up. The client's brand seemed interesting and fun to work with. The client had design knowledge and understood the design process.

While the entire experience was a great learning for me, it was also very exhausting. There was too many trial & errors and rejections. But the end product made me feel like it was all worth it.

18

19

Acknowledgment I deeply appreciate the assistance, help-support and guidance of numerous people.

Sushmita ma'am and Sushma ma'am, for her valuable inputs through the past three years of my college life.

Shilpa and Pramod for the constant support and keeping me motivated throughout my project

NIFT, for being the right place where I grew and learnt about design and so much more. For all the education the institute provided, and for all the exposure and the guidance

Vinesh Tapre, for being this incredible HOD that the department of Fashion Communication is grateful to have. Also, for his efforts to help us all get through our projects in the best way possible.

Atul sir, for patiently answering all the questions I kept asking about project.

All my faculties at NIFT, for always being kind enough to bare with us and help us reach success. For all their teachings, inputs and for letting us explore things whenever we wanted to.

Parasmani sir, for being the best mentor I could ever get. For being patient and taking interest in my ideas and help me take them forward. And for all the inspiring and thought provoking conversations.

Vandana ma'am, for being the great mentor that she is. For being kind and supportive throughout my project, and for always motivating me to do the best I can.

All my friends, for contributing to my growth with their stories and experiences. And also for their inputs for my survey.

Mom & Dad, for all the love and support.

For giving me the freedom to explore and grow and for always being supportive of my decisions.

Preeti, for guiding me through my journey of Booker transportation and helping me with all the problems I came up with.

20

Introduction

23

National Institute of Fashion Technology National institute of Fashion Technology was set up in 1986 under the aegis of the Ministry of Textiles, Government of India.

It has emerged as the premier Institute of Design, Management and Technology, developing professionals for taking up leadership positions in fashion business in the emerging global scenario. NIFT has been granted statutory status under the Act of Parliament of India in 2006, empowering the Institute to award degrees and other academic distinctions.

NIFT has set academic standards and excelled in thought leadership by providing a pool of creative genius and technically competent professionals. The Institute provides a common platform for fashion education, research and Training.

The Institute is a pioneer in envisioning and evolving fashion business education in the country through a network of fifteen professionally managed domestic centers at Bangalore, Bhopal, Bhubaneswar, Chennai, Gandhinagar Hyderabad, Jodhpur, Kangra, Kannur, Kolkata, Mumbai, New Delhi, Patna, Raebareli, Shillong and Srinagar.

24

25

About NIFT, Mumbai NIFT Patna started its humble beginning from 1995, its transit campus situated in the Plot no. 15, Sector 4, Kharghar, Navi Mumbai.

NIFT as a Institute is a pioneer in envisioning and evolving fashion business education in the country, and this endeavor saw opening of four New Centers in 2008, Patna being one of them. NIFT now has a network of fourteen professionally managed domestic centers at New Delhi, Bangalore, Chennai, Gandhinagar, Hyderabad, Kolkata, Mumbai, Raebareli, Bhopal, Kannur, Patna, Jodhpur, Bhubaneshwar, Srinagar and Shillong.

The courses being offered in the institute at present include specialization in two disciplines of Bachelor of Design in Fashion Design, Accessory Design, Textile Design and Fashion Communication with Bachelor of Fashion Technology at the under graduate level and Master of Fashion Management at the post graduate level.

Due to the advantage of being one of the pioneer institutions in the state, the institute is now very well networked to satisfy the academic requirements of NIFT at Mumbai.

The institute portrays itself as a leader in fashion education in the state. NIFT Mumbai has committed itself in exploring growth paradigms and to act like a catalyst in formulating the structural roadmap for the apparel and allied industries. NIFT Mumbai is looking forward to contribute towards upliftment of the craftsmen through workshops and design interventions.

National institute of Fashion Technology (Ministry of Textiles, Government of India) NIFT Campus, Kharghar, Mumbai Maharashtra 26

27

About Me I'm 23, currently in my final year of Fashion Communication at National Institute of Fashion Technology, Mumbai.

I’ve always been a little confused or rather distracted towards what I really want to do. Design was my last option to pick from and who knew it would turn out to be the best. From learning about communication to being more mature towards life, I've grown through these beautiful four years spent in this institute.

I am the kind of person who takes pleasure in the most ordinary things. My main interest in communication design revolves around brand identity and editorial design. So, this project was kind of a challenge for me to explore the field of UI & UX design..

28

29

Why this project?

When I got the first smart-phone of my life I saw a pre-installed app called the Google Play Store in it. It seemed like the mother of all apps, literally giving birth to baby apps.

that deals with designing enriching experiences for users and making interfaces that help the user and the product to interact with each other.

I started installing and deleting new apps every day. Some were games while some were highly useful in day-to-day life.

Being impressed by their utility I became slightly interested in how they were made.

My old love for installing, deleting and reinstalling apps came back, along with new found love for designing websites.

Backed with 3.5 years of Graphic Design knowledge that would serve as a solid base, I now felt well - equipped to design apps whose vast spectrum I had once craved to explore.

When I came to NIFT, I got the opportunity to study Graphic Design under the umbrella of Communication Design. This stream included modules mainly around Composition, Color, Typography and Motion Graphics. I underwent these modules and somewhere along the way came across the term "UV UX Design". At first it seemed like a foreign term to me. But later, after delving a little deeper into it I realized that it is that branch of Communication Design

And lo! I got a project My project was to design the desktop website and mobile application of a transportation company.

Thus, my design brief was defined to designing the mobile application and website for the Booker Transportation. This was exactly what I had wished for.

Hence, this project.

30

“Design is intelligence made visible�

-Alina Wheeler

Research of the Subject

35

User Experience Design User experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function.

Wireframes, screen blueprints or storyboards

UX design covers a vast array of other areas, too. A UX designer is concerned with the entire process of acquiring and integrating a product including aspects of branding, design, usability and function. It is a story that begins before the device is even in the user's hands.

Site audit, usability study of existing assets.

Flows and navigation maps,

Typical Outputs Include:

Prototypes, for interactive or in-the-mind simulation.

Written specifications, describing the behavior or design, e.g. User cases.

Experience design is a complex, versatile and time-consuming stage of the product development. The well-organized process takes the pressure off the team by reducing misunderstanding and making results predictable. In this article, l'd like to focus on mapping the mainstream method to real-life projects and putting together deliverables

User stories or scenarios, Site maps and content inventory, High-fidelity visual lockups, precise visual layout and design of the expected product or Interface.

Persona, an archetypal user for whom the product or service is being designed.

36

Stages of User Experience Design Stage 1. Ideation

37

The goal of this stage is to figure out how the client's business works and what are product objectives. A low-fidelity prototype is a tool which helps to confirm your mental model of the product with stakeholders and discuss general design approach. At this point, we are looking for an answer on "What are we building? Question

Common pitfalls This stage is usually gets squeezed to an insufficient minimum or omitted entirely because of these things:

Low-fidelity prototype The sole purpose of this deliverable is to illustrate our approach to the design of the particular product. At this point, all we need is to clarify the navigation for the central scenario and define design patterns (e.g., wizard, set of cards, a wYSIwYG editor and so on).

One may think this step is going to be time consuming. Especially the part where we make business process diagram, and it makes more sense just start drawing screens right away

The false impression that everyone understands everything because they said they do.

Another problem is that designers sometimes get carried away with their ideas.

They tend to dig too deep into details instead of focusing on a big picture, so the stage is fading away before designer has a chance to acknowledge that.

User Experience Design Stage 2. Prototyping At this stage, our goal is to think through every aspect of the interface and put together thorough documentation for visual design and development.

Project Documentation End users of a wireframe are your peers.

Software engineers, and managers. Make sure documentation is friendly to them.

Common principles Keep navigation obvious for users: make sure they grasp where they are at the moment and what is going to happen next.

A wireframe itself is not a self-sufficient Deliverable. Use text annotations, links to references and so on

Don't invent new controls and patterns if it's not necessary, use most common ones when possible;

Keep it structured: sequence pages meaningfully and make sure they reflect the business process.

Use real or real-like data, including names, texts and pictures keep it as neutral as possible Consider different density of content on the screen and different states of the system 38

Case Study- Truck Suvidha Trucksuvidha is one of the leading players in the transportation industry that connects transporters, truck- drivers, customers and other related entities across India with the objectives of making the material transportation simpler, quicker and efficient by providing better vehicles at affordable rates.

They aim at achieving highest standard of work for our customers. They commitment to excellence will help the transportation industries and customers achieves financial growth and prosperity.

They help all people associated with the community achieve better profitability in their own business. Also they follows best practices and business ethics for the benefits of transporter and customer community.

Truck Suvidha is a brand with similar qualities as Booker T. The main similarity being both of them serving quality service to the customer.

Team Purpose

39

At trucksuvidha they are committed to our self, employees and partners to provide best in class transportation solution.

Trucksuvidha.com enables transporters and customers to meet their business objectives effective.

Why Truck Suvidha?

Case study- Trucksuvidha

40

41

Case study- Trucksuvidha

SWOT Analysis Strength

Weakness

• Finencial Strength

• Limited capital for expensive

• Distribution Network

• Inadequate supply chain

• Management of the company

• Relation between management and Co- worker

• Brand Value

Opportunities • Increase the no. of branches to access more customers

Threats • Competition Increases • Changing Technology

• Increase no. of vehicles to Strength distribution network

• Cash flow

42

Case Study- TruckDial Transportation is very huge segment in Indian economy. Truck Dial is thus a vertical classifieds company focusing only on transportation segment – be it transportation & logistics, shipping, packaging, warehousing and alike. Truck Dial has more than 68,000 listings on its platform and it’s a huge market place with facility to “broker” deals on behalf of its service providers.

Truck Dial has more than 16 services and facility to bundle it in one order. Its Loyalty card, escrow payment protection feature, on ground franchisee network.

Team Purpose

43

To deliver supply chain efficiencies by offering real time trackable, cashless, seamless, accountable, pooled or dedicated transport. To offer optional integrated value added services delivered by our accredited service providers such as warehouses,

Trade-able receipts, processing & invoice discounting, etc competitively priced and preferably integrated on our marketplaces benefiting and promoting industries which need these most, such as agriculture and infrastructure.

Why Truck Dial?

The Truck Dial and Booker T brand offering are same- can pick multiple addresses in single trip.

The Truck Dial brand language is very neat and hence becomes a nice example to get inspiration from.

Case study- TruckDial

44

45

Case study- TruckDial

SWOT Analysis Strength

Weakness

• Distribution Network

• New business area

• Hygienic

• Lack of Marketing budget

• Quick services

• Lack of brand awareness

Opportunities • Increase in demand of Quality Service

Threats • Driver shortage • Changing nature of freight

• Scope in forward and backward Integration

• Cash flow

46

Case Study- bigtruck.in Bigtruck.in is ready to transform the outdated cargo and shipping industry with the help of information technology by leveraging Big Data. A smart IT solution can streamline the entire process of cargo shipment and deliver a faster, dependable and efficient platform for the Road transport industry.

We have developed an interactive mobile application called BigTruck App for facilitating road transportation and cargo shipment across India. This will act as a platform for industry professionals, transporters and other logistics services.

Team Purpose

47

To convey flexibly chain efficiencies by offering constant identifiable, cashless, consistent, responsible, pooled or devoted vehicle. To offer discretionary coordinated worth included administrations conveyed by our authorize specialist co-ops, for example,

stockrooms, tradeable receipts, handling and receipt limiting, and so forth seriously valued and ideally incorporated on our commercial centers profiting and advancing enterprises which need these generally, for example, agribusiness and framework.

Why bigtruck.in?

The bigtruck.in provides premium quality on time delivery.

The brand and it’s services are very limited to a certain range of people, just like Booker T. The bigtruckin website’s look-very fresh and engaging.

Case study- bigtruck.in

48

49

Case study- bigtruck.in

SWOT Analysis Strength

Weakness

• Location

• Lack of experience

• Good Advertising & Marketing

• Lack of capital

• Save rent expenses

• Lack of information

Opportunities • Design the mobile to be more Attractive • Vast Market • Easy distribution

Threats • Threats from other competitors • Changes in govt. Taxes • Lack of awareness

50

User Interface Design User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.

User interfaces are the access points where users interact with designs. Graphical user interfaces (GUIs) are designs' control panels and faces; voice-controlled interfaces involve oral-auditory interaction, while gesture- based interfaces witness users engaging with 3D design spaces via bodily motions. User interface design is a craft that involves building an essential part of the user experience: users are very swift to judge designs on usability and likability. Designers focus on building interfaces users will find highly usable and efficient.

51

Thus, a thorough understanding of the contexts users will find themselves in when making those judgments is crucial.

You should create the illusion that users aren't interacting with a device so much as they're trying to attain goals directly and as effortlessly as possible. This is in line with the intangible nature of software- instead of depositing icons on a screen, you should aim to make the interface effectively invisible, offering users portals through which they can interact directly with the reality of their tasks.

Focus on sustaining this "magic by letting users find their way about the interface intuitively the less they notice they must use controls, the more they'll immerse themselves. This dynamic applies to another dimension of Ul design: Your design should have as many enjoyable features as are appropriate.

Ul vs. UX Design Often confused with UX design, Ul design is more concerned with the surface and Overall feel of a design, whereas the latter covers the entire spectrum of the user experience. One analogy is to picture UX design as a vehicle with Ul design as the driving console. In GUls, you should create pleasing aesthetics and Animations that convey your organization's values and maximize usability.

User Interface Design Process User interface design requires a good understanding of user needs. There are several phases and processes in the user interface design, some of which are more demanded upon than others, depending on the project.

Functionality requirements gatheringAssembling a list of the functionality required by the system to accomplish the goals of the project and the potential needs of the users.

User and task analysis - a form of field research, it's the analysis of the potential users of the system by studying how they perform the tasks that the design must support, and conducting interviews to elucidate their goals

Information architecture- development of the process and/or information flow of the system.

Prototyping- development of wire-frames, either in the form of paper prototypes or simple interactive screens. These prototypes are stripped of all look & feel elements and most content in order to concentrate on the interface.

Usability inspection- letting an evaluator inspect a user interface. This is generally considered to be cheaper to implement than usability testing, and can be used early on in the development process since it can be used to evaluate prototypes or specifications for the system, which usually cannot be tested on users.

Usability testing - testing of the prototypes on an actual user. User interface design testing allows the designer to understand the reception of the design from the viewer's standpoint, and thus facilitates creating successful applications.

Graphical user interface design - actual look and feel design of the final graphical User interface (GUI). It may be based on the findings developed during the user research, and refined to fix any usability problems found through the results of testing.

52

About Booker Transportation We believe that an Independent Owner Operator is most effective at getting our customers' freight delivered timely and safely. Providing the best lease options in the industry is what makes Booker a leading Refrigerated Carrier for today's Owner Operators. Monthly and Yearly Awards, Longevity Bonuses, and the Free tires for Life of Lease Program, are just a few examples of what Booker Trans offers the Owner Operator.

Booker Trans has built its success upon working partnerships with Customers, as well as Agency Relationships built over the last 20 years. Those same relationships are what makes consistent year round freight possible.

53

Booker Transportation

54

Booker Transportation Color Swatches Primary Color

#283472

#EC2628

#231F20

#F1F2F2

#0DBAAE

#31B34B

Secondary Color

Tertiary Color

55

#563F99

#BC2627

Booker Transportation Typeface Source Sans Pro is a sans serif typeface created by Paul D. Hunt for Adobe Systems. It is the first open-source font family from Adobe It is a sans serif typeface intended to work well in user interfaces. It is the first open-source font family from Adobe, distributed under the SIL Open Font License. It is available in six weights (Regular, ExtraLight, Light, Semibold, Bold, Black) in upright and italic styles, it is also available as a variable font with continuous weight values from 200 to 900.

The typeface has wide language support for Latin script, including Western and Eastern European languages, Vietnamese, pinyin Romanization of Chinese, and Navajo.

A B C D E F G H I J K L M N O P Q R ST UVW X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ ) & * ( ; â&#x20AC;?? / > ` < ~ . , ] [

56

User Interview User Interviews are typically performed with the potential users of a design, before the concept development.

User interviews are one of the most commonly used methods in user research.

They can cover almost all user-related topics and be used, for example, to gather information on users' feelings, motivation, and daily routines, or how they use various products.

I prepared questions for user groups, who are familiar with the brand.

Interview for existing user

Interview Question for user

Interview was for the existing users of Booker Transportation, who were familiar with the brand and It's services

1. A little about yourself, your age and profession

Objectives To understand if the website is friendly enough for them to get used to it after a while.

To know the core problems of the website

2. How did you find out about Booker Trans?

3. How is your experience with the current Booker transportation website?

4. How do you cancel a trip? Since there is no cancellation facility provided on the website?

5. Will the service be easier to deal with if it brings a mobile application for it?

57

User Interview

User 1

User 2

Name: Jenny Sheth Age: 26 works as a Truck driver at Booker Transportation.

Name: George Smith Age: 45 works as a Truck driver at Booker Transportation.

Jenny has been working here from last 3 years.

George Smith is the very first Driver at Booker Transportation.

He has been working here from last 20 years.

All the information about the trips is sent through mail to him,so that he estimates all his trips timings.

Since he use the service very frequently, it doesn't matter to him if there's an application for Booker trans or not.

Although, he did suggest it would be useful for the drivers to get all the information through the mobile application because the new drivers are not so frequent to check their mail and many times they just ignore it, so through app at least they can get all separate information about their work.

Since he's such an experienced driver, he has become friendly with the current work process . He knows where to go for whatever he needs.

One problem he comes across everyday is when he wants to check the mail, he has make too many clicks to reach the page.

He would like if this process would become faster.

Also, according to him, a mobile application would be better to use, for times when he wants to check the mail, Book a trip, or cancel one.

58

Overall User Research Insights 1. The text in the current format is too long to read at one go.

2. The information of the trip needs to be highlighted so that the driver does not get confused. Also, because all the information related to the trip is in the same format, it is difficult to remember when to start which trip.

3. The information can be more simplified and put into categories.

4. The mobile app is a good suggestion so that the driver will be aware of all the trips. With the help of the app, the driver can keep the driver at all trip times even if the driver is not remembered 5. The information of the trip can be highlighted so that the driver gets direct attention.

59

Insight Points from the interview Trip information Simplified text Highlighted information Data Categorization Separate options Button facilities Search option Interesting flow Minimum efforts

User Interview

One major change of service The brand originally started off with booking trips as it's prime service and feature.

However, over a period of time, user demanded a separate menu for the details of just one trip and not a weekly or monthly list of trips. So, Booker Transportation came with the "Mobile Application" service for its users.

Since the brand is now well promoted, it had decided to get back to where it started from.

So, the On Demand Mobile Application with is Admin portal service is to be provides. This will help all the user from getting trip information from the mobile application to the trip ongoing details to the dispatcher.

60

Mind mapping A mind map is a diagram used to visually organize information.

It is hierarchical and shows relationships among pieces of the whole. It is often created around a single concept Mind maps are considered to be a type of spider diagram. They can be used to generate, visualize, structure, and classify ideas, and as an aid to studying and organizing information, solving problems, making decisions, and writing

61

The name of the brand has been explored and analyzed as a brand name, then as the word "Booker Transportation."

The mind-map is around the term "Booking Vehicle", which is the key feature on which the brand is based on.

Mind mapping

62

“Accessible design is good design.”

-Steve Ballmer

Information Analysis

Stakeholder Study A company doesn't operate without the help and input of numerous people. Those people are called stakeholders, and they can be anyone from owners, creditors, suppliers, employees, and even the community in which business is conducted.

67

Identifying the Stakeholders for Booker Transportation: The Owner His partners Co-workers (Admin, Dispatcher) Clients Customers Suppliers Truck Owners City ( Pickup and delivery area)

Stakeholder Types Booker Transportation Primary stakeholders- those ultimately most affected, either positively or negatively by an organization’s actions.

Secondary stakeholders- the “intermediaries” that is, person or organizations who are indirectly affected by an organization’s actions.

Tertiary stakeholders- those who will be impacted the least.

The Owner

Clients

Partner

Leader

Co- workers Customers

Clients Partners

City(Location / Delivery and Pickup area)

68

69

Redefined Brief Although the current website has a simple and minimal look, It did not entirely serve the purpose of making the website user friendly.

The website needed to highlight the unique features of Booker Transportation, and use them to attract user. The need of the website is to get informed and updated about the trips, and app users.

70

“Design is as much an act of spacing as an act of marking.”

-Ellen Lupton

Ideation

User Interface Design Process One of the chief uses for a grid is to keep your elements aligned and ordered, and your page design clean and neat. This is because grids encourage alignment. By establishing a grid system, you are creating a set structure for yourself to align elements against, and in doing this, you can create for yourself a neat, clean and organized layout.

Grids can greatly speed up and improve your design time, as they can act as a guide that signals where is best to place, position, and scale elements.

If nothing else, grids and type are two design elements that very happily go hand in hand. A strong grid can help make Type-heavy layouts appear neater organized and can help enhance the legibility and readability of body copy.

75

The beauty of grids is that they are consistent and even things, so when you divide your design up into a certain amount of columns, you will begin with a symmetrical layout. From here, it should be much easier to judge which side of your design is overpowering the other.

Sticking to your newly formed grid will ensure you have a clean, organized, and beautifully aligned design on your hand, but occasionally and deliberately breaking that grid will give that clean design a unique, eye-catching effect.

Grids encourage withe space, too.

When you've divided your design up into your desired amount of columns, place your necessary elements, but keep some rows and columns empty, leave them to simply be filled by white space.

Here, I have used a 8 column grid for the website, with gutter size 16 px and margin size 32 px The gird is same for all the concept explorations.

Grids

1440px (Standard Desktop Size) 76

Typography for the website Legibility Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. Naturally, this is one of the most essential factor. The most common problem is lack of distinction between capital I and lowercase l. You need to avoid this kind of fonts because people will have problems reading them on small displays.

X-height 95% of the letters we read are lowercases.

Larger letter proportions between uppercase and lowercase tend to result in a more legible typeface.

Counters We also have white space within the letters.

For example look at "o" "u" "d". Those spaces are called counters and typographic professionals believes that more of it help us to easier recognize the letters.

77

Weight Lighter typefaces are usually more legible than heavier weights of type. It's related to counters and allow for non modified character shapes.

Wide proportion Width of a character in relation to its height is described as proportion Generally you want wide letter over condensed one for better letter recognition and thanks to that for better legibility.

Letter spacing There is no ultimate way to calculate letter spacing but most of the time the bigger text size you have the less letter spacing you will need.

Readability Readability is about overall reading experience. How easy can we scan text layout, distinguish heading, subheading.

Paragraphs and blocks.

Serif vs Sans Serif History tells us that serifs are more legible.

Serif allows eye to flow more easily over the text.

The story is different on the web and mobile.

There are several sans-serifs that are readable and current state off visual design prefer simpler letter forms. On the web and especially on mobile we see much more sans-serifs

Typography

78

Calibre Calibre is a no-grotesque/geometric sans-serif typeface designed by Kris Sowers by in 2011. It was designed alongside Metric and the two typefaces can be used almost interchangeably, as they share similar letter forms.

Calibre takes the basic shape of Metric but extends some of the strokes so they terminate horizontally instead of vertically.

Calibre is available in seven weights with matching italics. Calibre letter forms are elegant and clear. They share a fundamental geometry but differ in the finish of key letter forms.

Overall, features are simplified and optimized for screen resolutions: for example, diacritic marks are larger than how they would be in print.

79

I didn't move ahead with Calibre as although it is a very legible font, it does not make the website look as interesting as it should, since the brand is all about transportation.

Thin Light Italic Regular Medium Semi-bold Bold Black

Agh A B C D E F G H I J K L M N O P Q R ST UVW X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ ) & * ( ; â&#x20AC;?? / > ` < ~ . , ] [

Has a legible x-height

Typography

Work Sans Work Sans is a typeface family based loosely on early Grotesques, such as those by Stephenson Blake, Miller & Richard and Bauerschen Giesserei The regular weight and others in the middle of the family are optimized tor on-screen text usage at medium-sizes and can also be used in print design.

I didn't move ahead with Work Sans as although it is a very legible font, it gives a little too a distinctive feel to the brand which is not right.

Thin Extra Light Light Regular Medium Semibold Bold Extra Bold Black

Agh

large x-height making the font more legible

A B C D E F G H I J K L M N O P Q R ST UVW X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ ) & * ( ; â&#x20AC;?? / > ` < ~ . , ] [ 80

Abril Display Abril Display is a serif, elegant typeface Conceived specifically for intensive editorial use, whether it is in newspapers, magazines or digital media, Abril is a font family of two worlds.

The titling weights, based on a contemporary revamp of classic Didone styles, display both neutrality and strong presence on the page Attracting the reader's attention with measured tension in its curves, good color and high contrast.

I did not choose Abril Display as although it is a very legible and clean font. it gives a little too much of a delicate feel to the brand which is not true.

Italic Regular Semibold Bold Extra Bold Black

Agh

legible x-height

ABC D E F G H I J K L M NOP Q R S T U V W X Y Z abc d e f g h i j k l m nop q r s t u v w x y z 0123 4 5 6 7 8 9 !@# $ % ^ ) & * ( ; â&#x20AC;? ? / > ` < ~ . , ][

81

Typography

Montserrat Montserrat designed by Julieta Ulanovsky, who lives in Buenos Aries inspired to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century.

This is the Regular family, and it has two sister families so far, Alternates and Subrayada families. Many of the letter forms are special in the Alternates family. Many of the letter forms are special in the Alternates family, while ‘ ’ means ‘Underlined’ in Spanish and celebrates a special style of underline that is integrated into the letter forms found in the Montserrat neighborhood.

Montserrat has a very the readability in large as well as small font sizes is quite good, which made it perfect for the website and mobile application.

Thin Extra Light Light Italic Regular Medium Semibold Bold Extra Bold Black

Agh

font has legible x-height

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ ) & * ( ; ” ? / > ` < ~ . , ] [ 82

83

Wireframe A wireframe is a visual representation of a user interface, stripped of any visual design or branding elements. It is used by UX Designers to define the hierarchy of items on a screen and communicate what the items on that page should be based on user needs.

Wireframes can stretch from a low fidelity pencil sketch to a high fidelity and fully annotated diagram and all that comes in-between.

They are useful for a number of reasons: Giving visual designers a basis to begin creating screens.

Most wireframes are essentially black and white diagrams with various Ul elements and notes upon them. In most cases they should be devoid of imagery, branding and color (aside from links/call outs)

Using as a reference point for functional specifications.

Communicating the functionality you are going to build with stakeholders without muddying the waters with visual design elements or branding.

Exploring ideas without the difficulty of change inherent in Photoshop mock-ups.

Using as a basis for prototyping and for user testing ideas early on.

84

Wireframe - concept The concept I came up with is fairly simple and very easy to follow. It has a very clean and minimalistic approach.

This route is the one where you see one screen at a time. The very first look gives you a dashboard along with the brand logo

The wireframes have been kept as simple as they can get with minimal information.

The "main option of command stays on the side of the screen and works as a Sidebar menu.

Typeface used - Montserrat

85

The trip, driver and revenue details load to their respective screens

The layout is fairly simple, it's helps the user's attention after a point. Chances are, that mostly user's are able to get the whole point of admin portal in a short period of time.

Wireframe

86

Low- fidelity wireframe Low fidelity wireframes include the most basic content and visuals and are usually static (not interactive). They are often used to help map out the shell of the interface, its screens and basic information architecture.

Low fidelity wireframes are usually black and white schemes or simple sketches on paper, focused on the “big picture” of the page/ project. UI elements are shown as boxes and lines without detailed annotations.

While lоw fidelity wireframes are usually abstract, they offer a chance to see the basic structure of the user interface. They may not take a lot of effort, but they spare a lot of extra effort down the road.

87

Low-fidelity wireframes usually serve as a checkpoint for the product team and stakeholders at the beginning of the design process. They help teams visualize and test early concepts, requirements and design assumptions at the beginning of a web design project.

They help businesses shape their product in the early stages of collaboration with the development team.

Wireframe

88

High- fidelity wireframe High fidelity wireframes or prototypes are more complete representations of the end product than low fidelity wireframes. Many are click-able and respond to the userâ&#x20AC;&#x2122;s actions, mimicking authentic interface interaction.

Their aesthetics and content are more precise than lower down the fidelity spectrum, as designers concentrate on refining the graphics, spacing and layout.

High fidelity wireframes are focused mostly on conveying the structure of the page

89

High fidelity wireframes are often built in the advanced stages of the design process to communicate design decisions to the development team prior to coding the final product.

Wireframe

The block of the home page has four rectangles for different status of trips from where user can get all the numerical details of the trips till date. The sidebar has hamburger menu (expand view) and the logo (with acts like a home button).

90

The block of driver list provides information about the driver status like- active driver, suspended driver, prebook list driver, etc. The header has a feature that shows the total-number of active, suspended and prebook list driver.

91

Wireframe

The block of trip provides information about the trip like-status, radius, driver name trailer type, etc. The header has a feature that shows the total number of available in-progress, and accepted trips. Also search, calendar, and add buttons are added for user convenience.

92

The revenue report gives information on revenue v daily, monthly and yearly basis.

93

Wireframe

Notification block is where any action taken by driver regarding any trip will appear.

94

Final Prototype

97

Website - Final Prototype

Final Prototype The third concept has been taken forward for the final prototype.

The color scheme of the final Ul is changed from the existing Booker Transportation color palette. The cold colors give the website a very calm and soothing look and feel.

The iconography had been done by me.

Overall, an attempt to make the website more user-friendly and to attract more users has be made. The change of it's prime service made it a little convenient for me to come up with interesting ideas.

The highlights of the services have been put in such a way to make sure they attract new users. Different sizes and weights of the typeface Montserrat has been explored throughout the website.

98

Login Screen 99

Website - Final Prototype

Dashboard 100

Driver List 101

Website - Final Prototype

Trips Screen 102

Revenue Report 103

Website - Final Prototype

Banners and Announcement 104

Contact Us 105

Website - Final Prototype

Check Calls 106

Mobile Application

109

Booker Transportation - App Booker Transportation is rapidly growing with an increase in the number of itâ&#x20AC;&#x2122;s user on a monthly basis. The idea of creating a mobile application for the service seemed like the right thing to do.

The app mainly was to keep the regular users updated and make the service more friendly and more informative to them.

110

111

Mobile Application Mobile devices are used in everything nowadays and increasing so by the day.

Mobile phones are have facilitated more than calling and reaching out to people.

They make your life easier.

When creating an application for mobiles, the Designer's job is to create the user interface to meet the user's needs and create an easy and enjoyable experience. To achieve that both the UX and UI should be great.

Mobile apps are a great way to improve your product or service's reach to more users and improve the traffic to your site through the mobile devices.

An application has to be really pleasing to get the attention of the user. But at the same time, an application with great that looks pretty with all the bells and whistles won't make a difference when the user experience is bad.

Mobile Application

112

Case Study - TruckSuvidha Along with the website for the case study TruckSuvidha also has a mobile application for it's users.

The user experience of the TruckSuvidha application is done really well, as the users can navigate through the application quite smoothly. The categorization of information has also been well managed.

113

The application has been designed just as well as the UX. Along with the right choice in typography and colors, the layout has been done in a clean manner.

Case Study - TruckSuvidha

114

Case Study - BigTruck.in

115

Along with the website for the case study, BigTruck.in, too, also has a mobile application for it's users.

Very few visuals have been used across the application, yet it does not affect the overall experience.

The mobile application of BigTruck.in had use of good typography which makes it visually appealing. The navigation is quite smooth as well.

The use of the color black is very prominent but somehow it does go along with BigTruck.in's brand language.

Case Study - bigtruck.in

116

117

App -Site Map

Information Architecture - App LOGIN/ SIGNUP

INVITE CODE

NOTIFICATION HOME SCREEN DRIVERâ&#x20AC;&#x2122;S RANKING

HOME

CURRENT

MY TRIPS

COMPLETED

SEARCH LOADS

SETTING

FUTURE ANNOUNCEMENT

CHANGE PASSWORD

ABOUT US

CONTACT US

118

App Logo An app logo usually has the logo identity of the brand on it.

Booker Transportation's logo becomes unreadable when scaled down to a very small size, hence it is not used for the app logo.

The logotype of the brand is just as important and has been used on the home screen of the mobile application on the navigation bar.

The first letter "Bâ&#x20AC;? from the logotype has been used as the app icon, as it is very much readable and looks quite prominent on the home screen.

119

60px

60px

Grid

Grid I have used a 4 column grid for the mobile application, with gutter and margin size 15px.

The gird is same for all the concept explorations

480 px (Mobile)

120

Wireframe concept The layout of this concept follows the same structure as in the concept of the website design. It is based on the grid-like layout of the brand's logo The content is divided and put into rectangles and squares Typeface used - Montserrat This is a very structured layout.

Ahead, there are rough sketch of it followed by the final wireframes and UI

121

Since it work with the website. I take it with forward with the app. The look, here too became too minimilistic and understandable after a point.

Wireframe

122

The home screen has the introduction of the driver name and current badge with tractor no. in nav bar while on screen driver get details of the upcoming trip.

123

Trips Trip list of current day, this screen has the main highlights of the service and the trip details.

Wireframe

Trips details Once the trip started than on every pickup driver has to inform dispatcher through the CTA buttons.

124

Available loads This screen helps the driver in searching of the load as per the driverâ&#x20AC;&#x2122;s convenience.

125

Load details Once driver search for load here is the list appear which carry all the details of the load.

Wireframe

Profile This screen has all the details of the driver

Badges This screen has all the badges that driver can view also what all badges driver has in past and current.

126

Final Prototype After a detailed wireframes of the concept, I started making the UI for it.

The existing Booker Transportation color palette is not used for the colors.

Iconography with supporting text is also an interesting part of the scene.

127

App - Final Prototype

128

Home screen

Notification

129

Trips

Pickup - Trip

Pickup- Trip

App - Final Prototype

Search Load

Sorting option

130

Profile 131

Badges Screen

App - Final Prototype

Pop up

Check call

132

â&#x20AC;&#x153;Design is not just what it looks like and feels like.

Design is how it works.â&#x20AC;?

- Michael Jordan

One final glance

137

138

139

140

141

142

Style Guide - Website & App A style guide is a collection of per-designed elements, graphics and rules designers or developers should follow to ensure that separate website pieces will be consistent and will create a cohesive experience at the end.

It is extremely important when multiple designers are working on a big website or web app to ensure that they don't interpret too much and don't alter or adjust styles based on personal preference.

143

In development, having defined elements of the website makes it easy for developers to reuse these elements. Moreover, it can make it easier because they will get what elements they have to code and will see exactly how they need to look from the start

Color Palette

Color Palette

Primary, Primary Shades, Secondary, Tertiary Colors

Neutral Colors

Accents Colors

Shades of Black

144

Type - Website

145

Type - App

Type - App

146

Icons Iconography is a visual language used to represent features, functionality, or content. Icons are meant to be simple, visual elements that are recognized and understood immediately.

147

Icons

148

â&#x20AC;&#x153;Talent wins games,but teamwork and intelligence win championships.â&#x20AC;?

- Michael Jordan

151

Conclusion

Conclusion I am extremely grateful to have this opportunity to work on this project given to me by Copper Mobile.

Working on a UI/UX design project was a completely new task for me as I am not very experienced in this particular subject. I took this opportunity to not only work on this project but also learn about how a UI/UX design project should work.

I immerse myself in whatever I take up.

Sooner or later, I realized that this project is mine and I was enjoying every moment of it. I was very lucky to have been given this project entirely, from the research to the final designs. That made it a wholesome learning experience.

The scope of work also evolved with time so it was very important for me to approach the work with an open mind to gain the maximum from it I am happy to have worked with an agency that has an underlying great vision, Working with people who were experienced in dealing with projects of this nature taught me what it means to be professional. Being around people who had a great design sense Was itself an enriching experience for me Overall, the experience has been quite challenging uncertain intensive but also highly educative at the same time.

152

153

Webliography

Webliography

The websites that have been of great help to me for this project LIxplanet.org (for UI/UX research) uxmastery.com (tor user joumey.maps) blog prototype (for typography research) mixt.com (for case study & Images munchery.com for case study & images) Sakura.com (for case study & images) canva com (for study of grids)

154