https://www.jamesbabu.com/about daily 0.75 2023-08-03 https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1606877732970-2NRJUDO14S07WIIYSSMC/aboutme.png About https://www.jamesbabu.com/work daily 1.0 2023-04-06 https://www.jamesbabu.com/work/sonos-setup monthly 0.5 2020-12-02 https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600032722957-444O2SNUXPHH1JMFF4I4/NewSetup.png Work - Sonos | Setup Experience https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600032588422-WU9BFTKF8M4WNOPDMAOM/LegacySetup.png Work - Sonos | Setup Experience https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1599958954672-A5IQH7N4JJYN1QJT39C1/portfolioShot.png Work - Sonos | Setup Experience - The setup experience was no longer scalable Sonos went from releasing a speaker every couple years, to a few speakers each year. Each new speaker introduced new technologies and features to the platform. Such as new networking chips for wider support of new types of routers, microphones for voice assistants, or just integrating BLE for proximity detection and connections. As each new technology was released to the market, the setup and configuration experience grew alongside with it. Each newly released Sonos speaker supported out-of-box setup through this initial app architecture from 2002. As Sonos accelerated its hardware and feature release cadence, the setup experience begun to become difficult to scale and iterate upon. The user experience also didn’t spark the delight it once did in the past. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1606178489641-O0BFQDMRBQFJIGWWA86X/flow1.png Work - Sonos | Setup Experience Users were walked through configuring every feature of their product https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1606888832600-4JL5H2TV18OUT805I2PQ/differentsetuppaths.png Work - Sonos | Setup Experience Setup focused on the essential step of adding your product, while all other features were optional and could be done in any order https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1606888818474-5DZ5B4VSN92C753FV0L3/quickertomusic.png Work - Sonos | Setup Experience The endless tunnel allows user to drop off whenever they’d like to do so https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1606888849554-606NF9BYWRGEYLZUJ4AZ/setuppaths.png Work - Sonos | Setup Experience A single product can go through many variations of setup based on different hardware and software factors https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1606888864390-LAU6G4GR127UC9L342N2/setuppaths2.png Work - Sonos | Setup Experience Even when errors occur, I designed graceful failures to help a user return to an alternative “happy path” https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600026366930-HZ3RD90A4MKKRVM8UPJW/popUpCard.gif Work - Sonos | Setup Experience - Making setup smarter and dynamic Believe it or not, a common issue was the difficulty in adding new speakers to an existing Sonos system. The older setup was a tunnel of configuring your initial system and all its capabilities, then the user was dropped into the app’s everyday experience to play music. Meanwhile all configuration entry points were hidden deep down in the app’s settings. So we designed and built a dynamic trigger system. Cards pop up based on a set of defined rules. They are prioritized to focus on the user’s journey of setting up and onboarding onto using their new speaker. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600028037355-UBTFQMGADH2KFCBRF6XJ/SetupHome.gif Work - Sonos | Setup Experience - A home for everything setup and onboarding A subset to the trigger system, we defined a dedicated and intelligent space in the app for feature awareness. This ensures the user gets all their configuration and onboarding content in an easy-to-access and elegant carousel. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600028343427-LLT0SZ6DV4IROYH2ORJT/buttonPress.gif Work - Sonos | Setup Experience - The backend & invisible interaction design I focused on the technical interaction design, under the visual user interface, to define an experience that felt seamless. There were many interaction design and implementation changes, then a complimentary simplified UI was designed along-side it to avoid excess technical overload for the user. Ultimately, creating an experience that is as consistent on the surface for the user, no matter how old the hardware nor outdated the software of their unboxed speakers. In addition, the entire setup experience sits upon an intelligent trigger system that ensures that each configuration feature is delivered only when it’s appropriate. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600028591004-6PB3GLLNUI9J27NX5W5M/helpsheet.gif Work - Sonos | Setup Experience - Contextual in-depth help content Setup was designed to focus on the core steps to get a speaker connected to a user’s network, but not everything in the user’s physical environment works perfectly. So if the user ever runs into a situation where they need additional assistance, the app provides in-depth contextual help without ever having to search Google or online forum. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600031075091-CEZWWRWLLAVMNLYSCWQI/nowplaying.gif Work - Sonos | Setup Experience - Getting to music faster Setup was redesigned in order to get the user to playing music faster. It’s now an experience that keeps the user focused on the core responsibility of connecting their speaker to the network as fast as possible. Allowing the user to return to secondary configuration configuration tasks, such as setting up Alexa or connecting their speaker to their TV, at a later time. https://www.jamesbabu.com/work/wave-soundtouch monthly 0.5 2020-09-14 https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600051816056-Z4LTRWN5U8AFEF403YFX/wavesoundtouchhero.png Work - Bose | Wave SoundTouch - Wave SoundTouch Bose Corporation Launch date: December 2013 Role: Lead User Experience Designer The SoundTouch product line uses your Wi-Fi network to give you access to thousands of Internet radio station, as well as, multiple music services such as Pandora, Spotify, iHeartRadio, and Deezer. Utilizes the SoundTouch pedestal speaker, the accessory turns Bose's iconic Wave Music system into a wirelessly connect speaker in your home. My role as user experience lead role lead the design for integrating the SoundTouch experience into the existing platform. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596402116882-L84UWNSKENZLIK0WWEZZ/asset_waveSoundtouch2.png Work - Bose | Wave SoundTouch - The display The Wave SoundTouch uses a VFD (vacuum fluorescent display), composed of lit up segments, it is uses to present the the system’s current state. I designed how SoundTouch features are presented on the product, which includes station and track information, as well as various system states that the Wave SoundTouch may encounter. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1597008474521-JTM7OPYFA29ZLS37GAR0/wavesoundtouchremote.png Work - Bose | Wave SoundTouch - The remote Revisions to the existing physical remote were done to support the new capabilities of SoundTouch. In addition, the iconography was brought inline with the SoundTouch ecosystem of products. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596418015086-JZJOF0GD4J9YLFSG0TKX/soundtouchnowplaying.png Work - Bose | Wave SoundTouch - Works with SoundTouch app The system supports the use of the SoundTouch app, which runs on as a mobile and desktop app. This app allows users to control their system, as long as they are within their Wi-Fi network. So clear communication was key between both speaker and app user experience team members to ensure that the Wave SoundTouch was both consistent and usable as standalone system, as well as alongside the SoundTouch app. https://www.jamesbabu.com/work/bose-solo monthly 0.5 2020-09-13 https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596404418709-Y9W4F6DQRNHKF9MPRBUT/bosesolo.png Work - Bose | Solo 10 & 15 TV Speaker - Solo 10 & 15 TV Speaker Bose Corporation Launch date: September 2014 Role: Lead User Experience Designer The second generation of Bose's popular one-piece pedestal speaker includes better sound, auto-wake capabilities, bass control, and a dialogue mode for enhanced audio with human speech. Leading the user experience of the new edition of the system. User Workflows, Rapid Prototyping, Usability Testing, Technical Documentation https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1597008716358-3EUJP2EUHNBCX0UZMEIP/asset_solo2.png Work - Bose | Solo 10 & 15 TV Speaker - The LED Much detail and thought was put into the simple tri-colored LED. With a strong focus on simplicity and within bounds to the program, careful attention was placed into how different speed blink rates and color are understood, the feedback was designed to be intuitive and and usable. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1597008811099-3EPSMRGI6NH890N4AFS5/soloremote.png Work - Bose | Solo 10 & 15 TV Speaker - The remotes Adopting the previous generation's remote control for the Solo 10, while the Solo 15 utilized the new universal remote by Bose, both remotes had to ensure compatibility for all new features. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596409492471-ASRNOZ9S3HGP4QBOXHIN/solobassknob.jpeg Work - Bose | Solo 10 & 15 TV Speaker - The bass knob Careful analysis and usability testing was performed on the bass knob of the system, located at the rear of the product. Due to the use case of a TV being mounted onto the product, the knob must be manipulated purely through tactile feedback. A physical pointer and rigged texture promotes position recognition and an easier grip of the knob was intentionally designed, specific to this Solo system. https://www.jamesbabu.com/work/soundtouch monthly 0.5 2020-09-13 https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596410118229-NW49S1M90NBAIVOQ06BH/soundtouch20.png Work - Bose | SoundTouch Music System - SoundTouch Music System Bose Corporation Launched: October 2013 Role: Co-lead User Experience Designer The SoundTouch product line uses your Wi-Fi network to give you access to thousands of Internet radio stations, as well as, multiple music services such as Pandora, Spotify, iHeartRadio, and Deezer. The SoundTouch Portable, 20, and 30 systems are the headline systems to the SoundTouch product line. My co-lead UX role on the products focused on the button behaviors and feedback presented on the display. The family of products are standalone speakers that are capable of streaming internet sources such as Pandora and Spotify, as well as stream music right from your iTunes library. Requirements Refinement, Storyboards, Wireframes, User Workflows, Rapid Prototyping, Usability Testing, Technical Documentation https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596418116386-9LCHCOOTYSJAU7FZEFC1/asset_soundtouch202.png Work - Bose | SoundTouch Music System - The speaker’s display The SoundTouch music system utilizes an OLED display to present the current state of the system. The experience focused on simplicity; only showing information that is neccessary for the use case at hand. Extraneous information was avoided, thus ensuring a simple user experience. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1597007719276-9OFEYFQD88Y3TE6LZ4KQ/soundtouchremote.png Work - Bose | SoundTouch Music System - The remote We closely collaborated with the industrial design leads to dictate the necessary system controls, hierarchy of placement, haptics, and ergonomics of the design for the product line’s remote. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596418214396-5725YOM461VTR5WEWJYS/soundtouchnowplaying.png Work - Bose | SoundTouch Music System - Works with the SoundTouch app The system supports the use of a mobile and computer app called the SoundTouch app. This application allows users to control their system, as long as they are within their Wi-Fi network. So clear communication was key between both hardware and software user experience team members in order to ensure that the Wave SoundTouch was both consistent and usable as standalone system, as well as alongside the SoundTouch app. https://www.jamesbabu.com/work/soundtouch-deezer monthly 0.5 2020-09-14 https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596415580313-8ILHLCL5T4GD7OOUF3JY/soundtouchnowplaying.png Work - Bose | Deezer on SoundTouch - Deezer on SoundTouch Bose Corporation Launched: October 2014 Role: Lead User Experience Designer The SoundTouch product line uses your Wi-Fi network to give you access to thousands of Internet radio stations, as well as, multiple music services such as Pandora, Spotify, iHeartRadio, and Deezer. Working closely with Deezer and internal software developers, I led the design for the first on-demand streaming music service integration into the SoundTouch app, the software controller for all your SoundTouch enabled speaker systems. In addition, we designed a simple method to quickly create a Deezer account and jump right into streaming music right within the app. Requirements Refinement, User Workflows, Rapid Prototyping, Azure, Adobe Photoshop, User Testing, Technical Documentation https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596418530058-5QA56P48OP20C8VIJT3L/deezerbrowse.png Work - Bose | Deezer on SoundTouch - Browse the music catalog The playback experience was integrated into the SoundTouch platform to ensure close consistency to how Deezer functions as a standalone service. This provides familiarity to existing Deezer users. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596416016335-7KLMYL2DXC2X7BS8SI15/deezerartist.png Work - Bose | Deezer on SoundTouch - Artist page Due to the new functionality that Deezer provided compared to the past existing music services on SoundTouch, new interface designs had to be created to support the experience. One specific example is the Deezer artist page. The design allows for users to explore an artist's top played tracks, full discography, and related artists. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596415703315-V81IO2U2P1WM79DXPNRO/deezertrial.png Work - Bose | Deezer on SoundTouch - Deezer trial and account creation We designed an simple method to quickly create a Deezer account right through the app. Based on specific eligibility critieria, the ability to automatically create an account right the app is presented to user. No additional information is required, so once the account is redeemed, the user can dive right into the Deezer music catalog. https://www.jamesbabu.com/work/stronglifts monthly 0.5 2020-11-29 https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596416574222-GSS02MX99MMAUCXW7JYI/stronglifts.png Work - StrongLifts | Apple Watch Exploration - StrongLifts Apple Watch App Side project (Exploration) December 2016 Stronglifts is a workout routine that is effective for gaining strength, building muscle, and burning fat. There are three exercises a day, done three times a week, 45 minutes per workout. An existing mobile phone app assists with the routine and tracking progress. With the emergence of smartwatches, I thought designing an Apple Watch experience would be a fun project to tackle, decreasing the need to carry a phone when working out. Workflow Analysis, Sketch, Flinto, Visual Design, Interactive Prototyping https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596416804598-GOAZUE1FV8IG8TIQLSKK/asset_stronglifts2.png Work - StrongLifts | Apple Watch Exploration - The original app This is the existing iPhone app which I personally use throughout my week. A user starts with a workout, one of two routines, then can begin an optional (but recommended warmup) for each exercise before they dive into their 5x5 routine. The lifter will do 5 sets of an exercise, performing 5 reps within each set. There is a 1:30 minute rest period between each set, if 5 reps are successfully completed. If the 5 rep goal is not met, a 3 minute rest period is recommended to recover. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596416897971-J9J4FX8ECH9ZNTL4VEO9/asset_stronglifts3.png Work - StrongLifts | Apple Watch Exploration https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1596416948533-OZP2R06FQNRVAUQYRR0U/asset_stronglifts4.png Work - StrongLifts | Apple Watch Exploration https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600046584360-C5BEUYPPPREKKZH4P170/asset_stronglifts5.png Work - StrongLifts | Apple Watch Exploration - Design After deciding on the design direction for the app, I decided to flush out the screen workflow within Sketch that I planned to implement into an interactive prototype using Flinto. I leveraged aspects of the design language that exist within the current app in order to ensure consistency between this new Apple Watch app and the iPhone app. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600046773907-FEFJBIU714CPNPTK27RV/asset_stronglifts6.gif Work - StrongLifts | Apple Watch Exploration - Prototyping Once I completed the Sketch design, I imported the screens into Flinto in order to create an interactive prototype. The prototype's goal is to allow for developers to easily understand the interactions, without the need for flushed out written documentation. https://images.squarespace-cdn.com/content/v1/5ec462b4feb789398524d248/1600046855726-1LF5AKS2AOR4MABQE09J/asset_stronglifts7.gif Work - StrongLifts | Apple Watch Exploration - Testing & iteration Throughout the design process, I explored many approaches for how to provide information and feedback for workout progress. I settled upon a progress ring design, which surrounds the sole interactive button in the center of the screen. I only know a few people that currently do StrongLifts on a weekly basis, so I tested the prototype with them in order to streamline and refine the experience, all while focusing on providing critical information as needed.