Suraj Subharaman Design + Strategy + UX - Portfolio 2021 - Bitly
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Strategy + UX + Design TVS RR310 Instrument Cluster The TVS Apache RR 310 is a sport bike made by the TVS Motor Company in collaboration with BMW Motorrad that was launched in India
TVS Apache RR310 Work Core User Personas Demographics Attributes Behaviour • First time jobs • Experienced biker • Dual purpose (Regular / Weekends) • Age group: 23-28 Peripheral is upto 35 • Restless • Youtube bloggers and active on • Owned bikes previously • Tech savvy/ Gadget freak social media • Aspirations are beyond this bike • brand conscious • Loves the bike • part of biking group • Show off (Attract the opposite sex) • Wants to improve upon his riding • Gen X and Y • Spec freak skills (top speed ,avg. speed) • Passionate about biking (Spends on training, • Particular about rules accessories and modifications) • MotoGP/ F1 fanatic Note : Based on the workshop and rider interviews
TVS Apache RR310 Work Discovering Purpose Pain Points The Dream The Promise Convenience & Connectivity Calls Ride planning Real time update and status Messages Accepting and declining calls Navigation Brands Generic Displays Identity Show off Strong brand character/ recall in the display Impactful first impression On-boarding doesn’t give the feel First screen needs to Personalisation of the bike/personalised be experiential welcome (Hi Rider name)
TVS Apache RR310 Work Discovering Purpose Pain Points The Dream The Promise Real-time diagnosis Battery dies Warning system Active warning Review of bike health Optimum driving Constant updating experience Ride analysis On demand information A richer user experience Displays are not agnostic Feedback Access all buttons/menus easily Helmet window is narrowing the vision Easy navigation Relevant information at the right place/hierarchy of information Have to look for info The display theme should match the rider’s driving style Real-time interaction Too many buttons (confusing) (button navigation) UI should have a higher cc bike feel Relevant data/shape/design for each element (gear/rpm/speed) Too much information The ride mode can be changed on the go Speedometer experience
TVS Apache RR310 Work Intent Build a TFT cluster experience for the street race bikers that is accessible and intuitive to use, keeps the riders updated at key points in the journey, and has a strong resonance with the rider, race culture and in turn the brand.
TVS Apache RR310 Work Key Pillars Sense of Feeling In control identity alive • Complete confidence and • A bike character that the rider • The thrill, the rush and the speed authority over the vehicle associates with and an extension of • Like everything is being activated • Strong sense of balance and safety the rider that he prides over
TVS Apache RR310 Work Feature Mapping In control Sense of identity Feeling alive 1. Bike check-up 2. Warnings with levels of 3. Clear messaging An automated bike check prior to urgency (colour coded) Written indicators for quick communication the start of every trip. An indicator Clear warning method for prompt acton - • Wear helmet to suggest the same. Red, Amber, Green • Service reminders • Tyre pressure • Timely messages • ABS • Batter low • Engine temp • Engine malfunction • Fuel level • Take hands off throttle
TVS Apache RR310 Work Feature Mapping In control Sense of identity Feeling alive 4. Smart navigation 5. Dynamic layout based on 6. Easy action to • The navigation will be designed as a the scenarios incoming calls crisp, clear indicator for the rider to Treating key information based on: • Enabling incoming calls only below a follow defined speed (define logic) • Scenarios • Turn by turn directions • Level of importance • Minimal information on display • Remaining distance to the destination • Visual format • Info - name and number • Remaining time to the destination • Accept • Street name • Reject • Complete and reduced mode viewing
TVS Apache RR310 Work Feature Mapping In control Sense of identity Feeling alive 7. Onboarding/welcome screen 8. TFT activation Combine visual experience with function Gradual switching on of TFT elements • Brand identity for larger impact and thrill • Layer of animation • A quick TFT check • Personalised welcome message
TVS Apache RR310 Work Feature Mapping In control Sense of identity Feeling alive In control Sense of identity Feeling alive 12. Ride analysis 9. Custom shortcuts that can be configured by the rider • An option to see a brief or elaborate overview of the last trips, based on what • A dashboard access to functions the rider wishes to see. • Switching modes on-the-go • Key highlights of the rider performance is • Quick back to home screen action integrated in the snapshot to add the aspect of thrill. 10. Customising the dashboard A designated spaces for riders to enable and disable what they wants to see on their dashboard 11. Menu A menu system with consolidated information and clear hierarchy
TVS Apache RR310 Work Control Understanding Up Up Accept/ Back/ Back/ Accept/ Enter Reject Reject Enter Down Down
TVS Apache RR310 Work App Map - Base Layout Engine speed (RPM) Scenario 1 - Ignition On Vehicle speed Gear position Fuel level Engine Coolant temp (Customisable) Odometer Base Layout Scenario 1 - Ignition on Vehicle Ride Mode (Race street) mobile battery level mobile signal strength Date Time Please refer to Warning warning messages Custom widgets (only 3)
TVS Apache RR310 Work App Map - Menu Distance ridden after service -------------------------- Last service (days) Service -------------------------- Next service due date/km On/O! Paired device Delete device Yes/No Names of the devices Auto-time sync Yes/No Connectivity On/O! Note: Display calls - Incoming call will be as per certain modes - A speed limit has to be set beyond which the user won’t receive any calls. TVS to define the speed limit Reset Yes/No Top Speed* Top 5 speeds achieved Rider 1,2,3 My Vehicle No. of laps and their times Laps Best lap Reset Yes/No 0-100 Reset Yes/No Performance record Avg Speed Reset Yes/No RPM at peak acceleration Reset Yes/No Lean angle Reset Yes/No Gear shift accuracy (%) Reset Yes/No Avg. Mileage
Reset Yes/No TVS Apache RR310 Gear shift accuracy (%) Reset Yes/No Work Avg. Mileage Reset Yes/No App Map - Menu Reset All Yes/No RR mode Engine mode name and ABS mode name Race street mode Engine mode name and ABS mode name Riding Modes City comfort mode Engine mode name and ABS mode name Rain comfort mode Engine mode name and ABS mode name on/o! Navigation Reduced map Total distance covered Odometer range (“from km” to “to km” Total time travelled Avg. mileage Fuel consumed Trip A Average speed Top speed Menu Trip Details Additional KM covered (Only in comfort city mode) Riding style Acceleration Rating Trip B Same as Trip A Trip C Same as Trip A Since the bike has gone in reserve, how much total Fuel Trip Odometer range (“from km” distance has been covered? to “to km” Engine and ABS mode on/o! name
TVS Apache RR310 Work Design Principles Legibility Contextuality Glanceability • Visual clarity • Viewing information in context with • It is not just about communicating • Ease with which the rider can the other information, but the ease of identify and relate to elements • Adaptability of information based viewing the information on the environment and • Reducing cognitive load circumstances
TVS Apache RR310 Work Humanist font vs Square Grotesque Humanist fonts tend to look more like they are done by a human hand, with a natural, organic expanding and contracting of the strokes as if the letters were drawn calligraphically. They have roots in calligraphy and evoke a feeling of warmth and personality, in contrast to geometrics and neo-grotesques which can feel cold and sterile. Facet of Humanist fonts: • Less blurring of letterform shapes • No clashing between letterforms • Less ambiguity while glancing • Varied horizontal proportions Source: https://www.researchgate.net/publication/264439455_An_Evaluation_of_Typeface_Design_in_a_Text-Rich_Automotive_User_Interface_Original_Manuscript
TVS Apache RR310 Work Font chosen - Inter 140 KMPH 3.2 secs 0-100 Avg. Speed: Best lap: 100 KMPH 02:10:10 Inter MPH
TVS Apache RR310 Work Wireframes Low Battery 05:30 PM 05:30 PM Street Race Street Race Menu 10 8 10 12 8 12 6 6 14 My vehicles 14 4 220 Km/h 16 4 2 220 Km/h 16 Riding modes 2 Custom Widgets E 0 N H 0 N Gear Gear x1000r/min x1000r/min Trip details C C F F ODO 23000 KM Preferences Rahul 9969041253 Navigation Tyre pressure Lap 04 0-100 kmph 300 M Accept Reject 01:45:10 Front 40 Best Lap 7.17 Tyre pressure Lap 04 0-100 kmph Reset to default Back 39 02:19:12 Sec 40 39 01:45:10 7.17 Front Back Sec link: https://invis.io/TDQ70SK6MCF#/343304064_01
TVS Apache RR310 Work Visual Concept RPM (Tachometer) 6 Engine mode 4 8 Street Race Fuel level 2 220 120 10 Engine temperature Vehicle speed 0 12 4Gear Gear engaged
TVS Apache RR310 Work Visual Concept Distance and time till destination Upcoming turn Destination in 05KM 15KM 10:20 Distance to next turn Manoj Shatwanti Caller name, if in contacts. Just number, if not Tyre pressure 0 -100 kmph F 40 B 39 07:17 Sec Widget#1 Widget#2
TVS Apache RR310 Work Final Design - Day and Night mode
Strategy + Design SBI Life SBI Life Insurance is a joint venture life insurance company between State Bank of India, the largest state-owned banking and financial services company in India, and BNP Paribas Cardif.
SBI Life Work Design Pillars What are users looking for? 01 Assurance Securing future financial needs 02 Peace of mind Making correct investment decision 03 Gratification Reaping the benefits of their investment
SBI Life Work Existing Pillars Today, security is the only emotion behind building Insurance apps Lack of service fluidity and Segmented user journey transparency Lack of timely reminders and Non personalised experience updates
SBI Life Work New Experience Can insurance go beyond security? A connected experience across Emulate service driven platforms to the complete user journey integrate transparency and exclusivity Personalised approach for the Real-time attention and feedback users of today, who love the idea of for the anywhere/anytime exclusivity. customer needs
SBI Life Work Smart Care Solution Creating the solution EDUCATE EMPOWER SMART CARE Provide relevant knowledge Identify solutions that helps Reap rewards of having a at key points in the user journey them make sound decisions secure future and serve their core needs
SBI Life Work App Map
SBI Life Work App Map
SBI Life Work App Map
SBI Life Work The new SBI smart care insurance flow 1 2 3 4 5 6 7 8 Quick Login Smart Easy Pay Proposal Personalised Seamless Menu User profile Dashboard Tracking Recommendations claims for existing users
SBI Life Work Features Quick Login • Register with policy number • Generate OTP • Login through Google/Facebook/MPin New User New User
SBI Life Work Features Quick Login • Register with policy number • Generate OTP • Login through Google/Facebook/MPin Guest User Guest User
SBI Life Work Features Actionable smart board for existing users • Updates and realtime feedback • Proposal tracking • Maturity dues • Claim status • Payment intimations • Recommendations
SBI Life Work Features Actionable smart board for existing users • Updates and realtime feedback • Proposal tracking • Maturity dues • Claim status • Payment intimations • Recommendations
SBI Life Work Features ` Easy Pay • One tap access to payments from dashboard • Switch between multiple payment modes
SBI Life Work Features Proposal Tracking • View current status based on the stage • Upload requirements • Pay short premiums • Schedule medical appointments
SBI Life Work Features Personalised Recommendations Policy suggestions based on user profiling
SBI Life Work Features Seamless Claims • Real-time tracker on claims (Only for matured policies or where there is some survival benefit payout) • Upload of documents • FAQs
Patient Na / Mitral 01 Geeta P Strategy + Research + UX Normal Abnormal Narayana Rheumatic Heart Disease Post OMV Post OP Pre OP Prolapse Healthcare Narayana Health is a chain of multi-speciality hospitals, heart Mechanical centres, and primary care facilities with its headquarters in, Bengaluru, India. Founded by Dr. Devi Shetty in the year 2000 Valve Thickness NEXT
Narayana Healthcare Work The Problem The hospital management wanted to digitise the echocardiography process to improve speed and accuracy.
Narayana Healthcare Work Process Research on Identifying key On-site Process Re-thinking Digital Prototype Internal the diagnosis stakeholders observation documentation the process Solutions Testing process & interviews & data entry
Narayana Healthcare Work Management Goals • Improve safety for patients • Make the process more convenient • Create an accessible solution • Improve accuracy of reports Pain points of Sonographers (primary stakeholder) • Lack of alerts • Typing errors • Sonographer have to multitask • Time crunch
Narayana Healthcare Work Intent Create an experience that makes the echocardiography process convenient and accurate for both patients and doctors, thereby ensuring safety.
Narayana Healthcare Work Design Pillars Pillars of convenience and accuracy lead to safety Convenience Accuracy Safety • Easy and flexible input. • Error recognition. • Reduce no. of humans involved • Faster data entry enables • Capture all fields on forms. in the process to limit stakeholders to complete • Strive towards lower instances of communication errors. more tests. errors. • Lower cognitive load on • Auto suggestions. stakeholders. • Reduce verification cycles
Narayana Healthcare Work Rethinking the profiles Sonographer Sonographer Student Typist Student
Narayana Healthcare Work Rethinking the process New process based on our proposed concepts Patient Digital Data Data is Report is Scanning Entry verified Saved in EHR Sonographer Student records echo Sonographer Generated report is performs test on test readings and verifies, edits and saved in Hinai. It can the patient. sonographer’s confirms the data. be printed. comments on an iPad.
Narayana Healthcare Work Option 1: Smart Touch Input Device Stakeholders iPad Sonographer & Student Overview 1. This solution is about digitizing the echo form and simplifying the process. 2. Echo form is restructured to enable step- by-step entry and focused inputting. 3. Field inputs become easier through auto- suggestion and auto-correction features. 4. Descriptive fields will get intelligent over a period of time and will be able to suggest sentences. CONVENIENCE ACCURACY SAFETY
Narayana Healthcare Work Option 1: Smart Touch Input Device Stakeholders iPad Sonographer & Student Overview 1. This solution is about digitizing the echo form and simplifying the process. 2. Echo form is restructured to enable step- by-step entry and focused inputting. 3. Field inputs become easier through auto- suggestion and auto-correction features. 4. Descriptive fields will get intelligent over a period of time and will be able to suggest sentences. CONVENIENCE ACCURACY SAFETY
Narayana Healthcare Work Option 1: Smart Touch Input How 1. Integrated medical dictionary within the app will assist in auto-suggestions. 2. Sonographer has to perform test and dictate in a specific order 3. Clean and focused layouts with legible text will ease the process of viewing and adding information. Pros: 1. Presents a fast learning curve. 2. Quick data input and error identification. 3. Instances of missing fields on the form will be eliminated. Cons: 1. This concept will involve some level of typing, until app gets intelligent over time. 2. Initially the sonographer has to slow down in order to match the speed of the student.
Narayana Healthcare Work Option 2: Digital Notes Device Stakeholders iPad and stylus Sonographer & Student Overview 1. The desired experience will bring a sense of familiarity and aims to replicate the written process. 2. Data dictated by the sonographer will be entered directly on the iPad by the student using a stylus. 3. Real-time digitization with local storage capabilities. CONVENIENCE ACCURACY SAFETY
Narayana Healthcare Work Option 2: Digital Notes Device Stakeholders iPad and stylus Sonographer & Student Overview 1. The desired experience will bring a sense of familiarity and aims to replicate the written process. 2. Data dictated by the sonographer will be entered directly on the iPad by the student using a stylus. 3. Real-time digitization with local storage capabilities. CONVENIENCE ACCURACY SAFETY
Narayana Healthcare Work Option 2: Digital Notes How 1. The concept ensures the retention of the current process of "written note taking”, which is time-tested. 2. Comments and inferences of the echo form will be filled in by hand- written notes using a stylus on an iPad. 3. If handwriting is not identified, user can switch to typing. Pros: 1. Gives a sense of familiarity to the person taking notes. 2. Presents a fast learning curve and easy adaptation. 3. Quick data input and error identification . Cons: 1. Handwriting-to-text technology has to be tested. 2. Note-takers will have to avoid writing in running handwriting.
Narayana Healthcare Work Design Considerations 1. Non-linear navigation since data entry depends on the diagnosis order preferred by a sonographer 2. Technicians work in a dark room with low light 3. Process involves students who are in their training period 4. The diagnosis room is a low sound environment and dictation is not very audible at times
Narayana Healthcare Work Information Architecture
Narayana Healthcare Work Information Architecture
Narayana Healthcare Work Information Architecture
Narayana Healthcare Work Visual designs
Strategy + Research + UX AB InBev Anheuser-Busch InBev SA/NV, commonly known as AB InBev, is a multinational drink and brewing company based in Leuven, Belgium.
AB InBev Work Process Understand Identify key On-site Process Re-imaging the Creating business stakeholders observation documentation process and strategic requirements and and interviews interaction roadmap the ecosystem
AB InBev Work Experience Mapping Routes and outlets load Converse with outlet manager Next outlet is open Start Update Chiller + day status - Travels to the outlet Store Turn on Capture closed Location photo Chiller not working Wait for Input Stock Availability Capture INPUTS: the details No status MJP Sync Lack of (Own/Competition) photo No visual Along with postal tracking confirmation Delay in Tedious data Address Weakens Difficulty in relationships tracking entry data input Tedious data input Still Sales I wonder if it Planning Tasks in My POCe score Don’t they Don’t they Did it get Thinking Why going through Do I have to THINKING planning target for Tasks in hand Chiller purity got logged the day Hand at outlet will be effected trust me trust me captured? about sales a long list? fill them all? the day the day FEELING Energetic Impatience Eagerness Annoyed Disappointed Indifferent Eager Indifferent Confusion Positive Annoyed Neutral Annoyed Unsure 64
AB InBev Work Experience Mapping Save & close Review Select Add visibility data that’s visibility elements Input not been Visits next + elements promotions Advocacy filled outlets - Draught Machine First outlet manager Refills Time-consuming DM complaints calls TSE to let him know visibility due to long scroll the store is open Lack of status Demotivating Taps back twice Demotivation process due to entry Loses debarred entered data My brand I could have Looks for the Decides whether Wish I could I hope I have not Oh no! I have to fill This is going to Why isn’t the Finally done with I have already closed finished this promotions to give incentive also see what I On to the next one THINKING elements vs this outlet this outlet. Can’t edit. missed anything this again take time to fill data retained? competitors’ task faster offered based on sales have filled in FEELING Positive Positive Frustration Regret Neutral Neutral Bothered Irritated Unsure Relieved Irritated Neutral
AB InBev Work Experience Mapping Close for the day Finishes outlets + Select Routes Select Outlets 2 new outlets added - Route Deviation MJP Sync Traffic jam Delay in syncing I better skip the Alright let’s finish Now to sync all the I should’ve checked Best possible route Nearby outlets I can Hopefully syncing Finally done for THINKING remaining outlets the rest data the route before hand I can cover cover today doesn’t take time the day and finish others FEELING Irritated Neutral Neutral Neutral Annoyed Neutral Relieved Happy
AB InBev Work Key Insights UX Information 1. Current app experience makes it feel 1. The TSE often feels unprepared while like a policing app approaching an outlet, as he may be asked a question that he may not have a status of. 2. Long list of SKUs makes everyday logging and tracking cumbersome 2. A manual entry of stock, notes, etc needs to be maintained, making the on-field 3. Lack of strong visual confirmations at experience a bit cumbersome. important junctions lead to time wastage. 3. Lack of information of his own performance makes the TSE feel detached from the system.
AB InBev Work Pain Points We need to transform our key conflicts to positive experiences Tedious Lack of Weakens Discouraging Data Entry Tracking Relationship Easy data Seamless Stronger Motivation inputs tracking relationships
AB InBev Work Intent Create an experience that allows users to easily log information with effortless tracking, resulting in enhanced relationships with their assigned outlets.
AB InBev Work Key Features Easy data Seamless Stronger Motivation inputs tracking relationships 1. Prioritisation of data 2. Edit saved entries Data entry will be organized on the basis of past Saved entries should be editable. This will help the entry patterns. This will make the process faster users to make changes before end of the day. and effortless. 3. Auto-fill data 4. Identifying visibility elements For chiller/draught complaints, on the basis of the Based on the location of the element, the list of serial number, the details of the chiller can be visibility elements can be filtered. Now the user will pulled out. In case of multiple complaints within 1 get a more concise list and will be able to fill in more outlet, there can be only 1 manager’s name and accurate data. number.
AB InBev Work Key Features Easy data Seamless Stronger Motivation inputs tracking relationships 5. Calendar/Reminders 6. Performance Statistics A calendar feature on the app will enable the It is essential for the TSEs to access their overall user to access important dates, and set performance and weekly scores. This will enable reminders based on his notes. them to track their performance and move a step closer to meeting their goals. 7. Quick access Important information like previous stock, sales, etc can be provided at the point of entering the stock availability.
AB InBev Work Key Features Easy data Seamless Stronger Motivation inputs tracking relationships 8. Historical data 9. Complaint status Having historical data at their fingertips will The app needs a dedicated complaint center which help the TSEs to access the performance of the will act as a repository for all complaint related outlets. This, in turn, will enable them to make data including status details. better sales-related decisions. 10. Notes We can encourage the TSEs to note down personal data such as Birthdays, Outlet opening day, etc, through reminders within the app. Notes can also be shared between TSEs
AB InBev Work Key Features Easy data Seamless Stronger Motivation inputs tracking relationships 11. Leaderboard 12. Messages A leaderboard can introduce a healthy dose of The messaging feature will enable senior competition. The TSEs can see their position on managers to interact directly with the TSEs. They the leaderboard and that of their peers. The can send motivational or congratulatory messages objective is to motivate them to perform better / badges to top performers. This may result in and share their accomplishments with family sense of pride and motivation. (MAST - ICE) and friends.
UX + Design Discovery+ Discovery Channel is dedicated to providing nonfiction content that informs and entertains viewers about the wonder and diversity of the world.
Discovery Plus Work Visual Design - Mobile app
Discovery Plus Work Visual Design - Desktop
Discovery Plus Work Visual Design - TV App Edd Stafford: First Man Out 2019 TV-PG 3 Seasons With food in abundance it's the time of plenty in the Serengeti, but a series of unexpected events turns families against each other and stretches relationships to breaking point. Recommended New Arrivals
Discovery Plus Work Visual Design - TV App
Other Clients Tata Docomo Indiabulls Tata Docomo Shop Virgin Mobile Pepsi Deals Central Mart Croma Retail Morphy Richards India Titan Mobile Bajaj Electricals Boom 3D Bajaj Finserv Limited Indiabulls Motif app
About Me Hi, I am Suraj Subharaman. I design, read, listen to music and surf the web I have been obsessed with conceptualising experiences and crafting digital products that provide value to both the business and the end user since 2008.
Experience & Skills Fulcro (formerly ibs) Ideation Experience Strategy 2007-2015 Problem Solving Personas Lead UX/UI Designer UX Audit Experience Mapping Discovery Workshops App/Site Maps Robosoft Technologies Design Sprint Facilitation User Flows 2016-2020 Stakeholder Interviews Wireframing UX/UI Designer User Interviews Prototyping User Research Visual Design Organisational Research Usability Testing Customer Development
Process* Conduct & Build, Uncover Frame Explore Frame Collate Test & Intent Insights Concepts Solution Research Measure * - I keep updating my process constantly and each stage has a number of plug-in and out tools I use, depending on the need and time of the project
Contact Suraj Subharaman Design + Strategy + UX suraj.ux@gmail.com | +91 9833388199 | Linked In Additional work available upon request
Thank You
You can also read