DESIGN & BEYOND AN U B HAV AI C H
About Me I am Anubhav Aich. I am the senior designer for the product and UI at Titan Company Ltd., Bangalore, India. I design watches and apps for their brand called Fastrack. I have a Bachelor of Design degree from the National Institute of Fashion Technology, India, 2004-08 and have been working since the last 10 years. My professional experiences has turned me into an inquisitive person who believes in communicating and facilitating. I possess a multidisciplinary skill set that amalgamates creativity to my technical knowledge. I have learnt that the most complex systems are solved with pure simplicity. Design provides me the sweet satisfaction of aesthetic creation. It has taught me to think about others. I hope to someday make a difference with the help of my skills and make this world a better place to live in. https://in.linkedin.com/in/anubhav-aich-b219b339
Page | i
Content Product Design 1. Braille watch 2. Light weight stainless steel smart watch design
1-6 7 - 10
Interaction Design 3. Smart Mirror
11-16
User Interface Design 4. Logo, Business card & Application design 5. Fitness tracker watch application design
17 - 24 25 - 29
Miscellaneous Projects and Skills 7. 2D Renders & Pencil sketch 8. 3D Renders 9. Graphic Design 10. Digital Illustrations
31 32 33 34
Page | ii
The BRAILLE WatCH
Project brief This was a self initiated project. Since Titan Company Limited manufactures watches, the idea was to design a concept for the visually impaired people and pitch it to the management.
Why braille watch? During the regular market visits, it was noticed that very few watches for the visually challenged people existed. None of the analogue watches were designed to be easily legible.
Problem area Post the observation an extensive research was carried out, only to discover that the available watches in the market today looked practically the same. Interactions with the visually impaired proved that these watches were not as user friendly as it is supposed to be. Below mentioned are the major problems: - The design of these watches are not as ergonomic as it should be keeping in mind the limitations of the visually impaired. - The user cannot check the time while walking. - The number of process involved are too many. Step 1: open the lid Step 2: locate the hands Step 3: figure out which is hour and minute hand Step 4: on following the hands it only lead to dots or lines which didn’t mean anything, Step 5: then the user has to the math and figure out the time - The hour marks in most of the watches are either in lines or circles which does not give quick idea as to what number is. - None of these watches looks good. - Most of these watches are made up of metal which makes it heavy and becomes an added liability especially while walking on the street. (They stop to find out what the time is). Page | 2
The objective No one wants to wear an ugly looking product which promotes itself as a medical product. The objective here was to design a watch which not only served the purpose of telling the time easily but also to make the user look good and feel confident.
Braille numbering system Available watches in the market
Concept watches available on-line
Primary keywords Hear Touch
Page | 3
Simplicity Lightweight Ergonomic Easy to use Cost effective Durable
Ideation sketches
Page | 4
The concept
Page | 5
Practical approch Because the watch without the Mineral Glass is practically not the best solution, since, it had zero water resistance, adding a cover with gasket, hinge and a small interlocking locking mechanism was the best solution.
Page | 6
The LIGHTEST STAINLESS STEEL SMART WatCH
Project Brief The brief was to design one of the lightest stainless steel fitness watch ( <=70gms). Limitations were as follows: Wall thickness to be 1mm on all four sides. Hardwares inside including the display and glass were 40mm x 36mm x 7mm and weighed 32gms.
Objective To create a construction of the watch body which could fit in the components and weigh as per the brief.
Calculations Weight of stainless steel = 8.03gram/ cubic cm Process : Calculate the weight of each hardware component x number of components + weight of steel used in the case + weight of steel back cover + weight of the button + chip weight + approximate weight of glue + miscellaneous.
Case top
Case bottom
Pusher
Back Cover
4 Screws Page | 8
Case constructions and dimensions
Page | 7
Total approximate weight = 62gms
Page | 10
Interactive SMART mirror
Project Brief The world is moving towards smart products. It is now inevitable that every household product be connected wirelessly communicating to each other. In an attempt to create a glimpse of the future, a self initated project of making an economical smart product was planned. The idea was to create a product and see if the amalgamation of product design, UI design and connectivity could become something that can become an everyday household item. Since I havenâ&#x20AC;&#x2122;t had a formal education in coding, I decided to sit and study codes and understand it so that I could modify it later to create my own interface for the project. I wanted only useful information on screen, which I feel would be useful for me and give a more practical approach to the project. I needed a base to start from. After thorough research on the projects available on the internet. I came up with the idea of designing my own version of MagicMirror which was initialized in 2015 as a college project at MIT.
Materials needed 1. Raspberry pi 3 2. Adapter for rpi 3. LED touchscreen monitor 4. HDMI cables 5. Keyboard/mouse 6. Micro USB / Adapter 7. USB Microphone 8. Speakers 9. 2 way mirror foil 10. Raspberry pi 3 case
Page | 12
Process The first thing was to setup the Raspberry pi. Installing the OS - Raspbian Stretch Step 1 a. Downloaded the OS file from ‘www.raspberrypi.org/downloads/raspbian’ b. Created an image on the MicroSD Step 2 c. Connect SD to Rpi d. Open new terminal e. Wrote the codes below sudo apt-get update sudo apt full-upgrade sudo nano /boot/config.txt >delete ‘#’ from disable_overscan=1 sudo raspi-config change location change keyboard to US wifi password vnc – yes screen resolution 1920 x 1200 3.5 mm jack is connected Step 3 f. Installed the initial dependencies
sudo apt-get install npm > y curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash – sudo apt-get install nodejs
Page | 13
Setting up the mirror The base codes were taken from www.github.com/MichMich/MagicMirror.git. The following codes were used to install it. 1. bash -c “$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)” 2. npm install Features 1. Day / Date / Time 2. U.S. holidays 3. U.S. weather / weather forecase 4. U.S. news
The Roadblocks 1. Every module on this application was U.S. centric. 2. Very few useless modules available for India. 3. UI was bland. 4. No touch based modules. 5. Long code had to be written to start the MagicMirror.
Other options considered Few other options which I felt could make things a bit easier were : 1. Android base with Mirror app - Android Things didn’t have Google Play, so nothing could be downloaded 2. Python based Mirror - looked same as the MagicMirror 3. IOS based Mirror - IOS doesn’t allow developer projects like this. After multiple tries, shifted back to MagicMirror with a new aim to tinker with the codes and dig in deeper for similar codes and follow the instructions. Wherever I got stuck, read through the forums for the solutions. Page | 14
Page | 15
Setting up dependencies
Trials, errors, backups
Two way mirror foil applied
The messy work setup
After weeks of trials, errors, research and study, a list of things which would make this mirror worth keeping in a house hold were prepared. 1. Date / Time 3. Weather predictions 5. Crypto-currency updates in local currency 7. Amazon Alexa 2. Current Weather 4. Gmail notifications 6. Monthly calendar 8. Airplay from mobile
Date / Time
Calendar
Gmail
Speaker
Current Weather
Weather Forecast
Crypto Currency
Raspberry Pi / Mic
Page | 16
LOGO & APPLICatION DESIGN
Design brief The brief was to design a logo (on a black background) and an application (both IOS & Android) for Ecole Technologies who wishes to bridge the gap between the schools (teachers) and parents. Designed and developed for the parents (simple, easy to use and interactive) Application to be focused on the parents to be updated with the school schedule and notices and make communication between teacher and parent easier.
The logo design
Logo option 1
Iteration 1
Iteration 2
Final logo
The concept in the logo is a morphed infinity sign which symbolizes the movement of infinite knowledge. Since itâ&#x20AC;&#x2122;s a tech company, the colours used are neutral, yet young, fresh and vibrant.
Final logo and business card
Page | 18
Application design process
- User survey based infographic
Before the application design starts, it is imperative to speak to the end user and understand their problems and needs. A questionnaire was prepared which was filled in by 39 individuals. Based on their feedback and comments the infographic was designed. The data sheet is converted in the form of graph which highlights what the requirements are.
Questions - City - Profession - Type of phone - Efficiency - Uses of a phone - Network - Number of kids - Their age range - Board of Education - Problems faced - Interest in interacting with teachers / parents - Interest in knowing daily school activities - Interacting with teachers through a dedicated app - School visits per year - Problems teachers faced - Interest in interacting with parents often - Belief in technology helping out - Key contents of such app
Page | 19
User persona User persona is an integral part of the study which creates a mental image of the userâ&#x20AC;&#x2122;s lifestyle and gives an idea as to how he/she would be using the product. Based on the survey a user persona is created for all the possible users, using which, the task flow, user journey and screen flow is done.
Page | 20
Information Architecture Base architecture of the application is created to show the flow. The flowchart on the right depicts the movement of the user when operating the application without any problems of login in. Similarly another architecture was created where a negative scenario is shown, where the user is not able to login and has to contact the customer case, indicating the problem he/she is facing.
Page | 21
Wire-frame The wire-frame created here indicated the prospective placeholders for the buttons, tabs, chat boxes,burger menu etc. Since it was a freelance project minor changes were made during the UI design to make the product user friendly.
Prototype available at https://marvelapp.com/2ajgdff
Page | 22
User interface design Based on the wire-frame and the app architecture, the screens are designed. To make the app more visually appealing and easily identifiable, multiple colours are used. The colours can be modified by the user by just clicking on the coloured box on the side.
Page | 23
Prototype available at www.marvelapp.com/2j2ag24
Promotional website design Post the handover of the assets for the application, a 5 page promotional website was also designed which would redirect the user to the download page along with details on the key features of the product.
Prototype available at https://marvelapp.com/260ag1a
Page | 24
FITNESS WatCH APP DESIGN
Project Brief The brief was to design an application UI, for an off the shelf smart ana-digi watch in such a way that it looks appealing to the indian youth, keeping it in the Fastrack brandâ&#x20AC;&#x2122;s quirky space.
Architecture Based on the features the phone provided and a basic essential features set by the company, an architecture was created, which, after a lot of back and forth shuffling was set as per the flowchart on the left.
Page | 26
Wire-frame The architecture helped decide the placement of buttons and the branding, based on which the wire-frames were created.
Page | 27
Colors selected A comprehensive study was done, where, the colours of the top selling watches were done. The colour which came out from them were silver, white, black, blue, yellow, orange and red. Fastrack as a brand is known to be a rebel brand of our country where the marketing strategy is to always be disruptive. The strategic decision was to use colors which we normally donâ&#x20AC;&#x2122;t see on fitness apps. Below are the final colours combinations used to design the UI.
Challenge The challenge was to make it in such a way that the app grabs attention yet does not look tacky.
Solution The final app only has used gradients of two colours, balancing out each other.
Button icons
Simple icons were created which were easy to identify. Since, the brand stands for being disruptive and unpredictable, the icons were applied larger than usual and only part of it visible, keeping it simple yet young.
Page | 28
App icon
Page | 29
Final few screens Available for download : February 2018
Other projects & Skills
2D Renderings
Freehand sketches
Page | 31
Actual prducts available at www.fastrack.in/products/watches/guys
3D Rendering skills demonstration
This is part of the modular collection where the concept was to design component of watches which could be disassembled by the user and interchanged with other components.
The approach The case is a hybrid model, with parts consisting of matte finished ABS plastic and plated aluminum. The leather strap has the removable spring bar. Page | 32
GRAPHIC DESIGN
Page | 33
GRAPHIC BASED PRINTED WATCHES
LOGO DESIGNS
The effort was to create a highly detailed digital illustration on the wacom cintiq.
Page | 34
Softwares used Adobe Photoshop CS6 ( for Image editing ) Adobe Illustrator CS6, Corel DrawX7 (for designing) MarvelApp Rhinoceros 6 (for 3D rendering) Keyshot 7 (for rendering) Adobe Indesign (for documentation)
Softwares known Adobe AfterEffects CC Invision Adobe XD