https://georgegoh.digital George Goh Mon, 06 Feb 2023 12:41:45 +0000 https://georgegoh.digital en https://georgegoh.digital/Google-Pay Mon, 06 Feb 2023 12:41:45 +0000 George Goh https://georgegoh.digital/Google-Pay Google Pay Google Pay is a suite of apps and services rangning the recently (re)launched Google Wallet to the hyper-localised Gpay app that’s in use by more thant 220 million users in India. I am the UX lead for the Singapore Gpay app, which is currently ramping up a visual overhaul to the new Material 3. I also led the development of a new Gpay app in a confidential new country set to launch in 2023, and am driving the work to launch in more new markets. Outside of new launches, I work closely as a senior contributor in the design systems team, building new frameworks and componentry while resolving system needs across multiple regions, surfaces, and features.Please reach out to me for more info! <img width="1000" height="416" width_o="1000" height_o="416" data-src="https://freight.cargo.site/t/original/i/98445707f7c4b73c74425544b3539ce33c298376afc89add4d89de2d3a479c00/Blogpost_Hero_2880x1200_v2.width-1000.format-webp.png" data-mid="167432981" border="0" src="https://freight.cargo.site/w/1000/i/98445707f7c4b73c74425544b3539ce33c298376afc89add4d89de2d3a479c00/Blogpost_Hero_2880x1200_v2.width-1000.format-webp.png" /> https://georgegoh.digital/Google-Workspace-Search-and-Intelligence Tue, 21 Sep 2021 08:54:30 +0000 George Goh https://georgegoh.digital/Google-Workspace-Search-and-Intelligence Google Workspace: Search &amp; Intelligence The Google Workspace Search &amp; Intelligence team is a horizontal group that works on search experiences and AI/ML features related to Google Workspace’s suite of apps and services.&nbsp;I’ve worked on improving the search bar and results page in Gmail, on intelligent suggestions in Google Chat, captions in Google Meet, and connecting enterprise accounts to Google Assistant.Please reach out to me for more info! <img width="1200" height="640" width_o="1200" height_o="640" data-src="https://freight.cargo.site/t/original/i/711b320f61773197fa282f7dda54d61555d1de1a53dc52dbc9c31f64dac8b480/1624394334-google-workspace.jpeg" data-mid="119461109" border="0" src="https://freight.cargo.site/w/1000/i/711b320f61773197fa282f7dda54d61555d1de1a53dc52dbc9c31f64dac8b480/1624394334-google-workspace.jpeg" /> https://georgegoh.digital/Google-Design-Exercise Mon, 05 Jul 2021 09:42:38 +0000 George Goh https://georgegoh.digital/Google-Design-Exercise Google Design Exercise This project originated from a now-defunct take-home exercise as part of the on-site interview process at Google. In short, I was tasked to design an experience where schools can influence students’ food choices. I really enjoyed the brief and had a great time working cross-functionally with the different stakeholders. As a bonus, the outcome was well received by the audience. Access the case study here Password: 567Eight Tools: Sketch, Keyshot, Rhino <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/ee593007fab681169287538a25937ac6f74f739de593b3b25987bdb8a924b4c4/Untitled.001.jpeg" data-mid="113055524" border="0" src="https://freight.cargo.site/w/1000/i/ee593007fab681169287538a25937ac6f74f739de593b3b25987bdb8a924b4c4/Untitled.001.jpeg" /> I am currently transferring the case study onto the website. In the meantime, please refer to the case study! https://georgegoh.digital/Highfive-Static-Meeting-Codes Sun, 20 Oct 2019 22:07:00 +0000 George Goh https://georgegoh.digital/Highfive-Static-Meeting-Codes Highfive: Static Meeting Codes Highfive is both hardware and software as a service. Conference phones, cameras, and meeting software are developed as one and sold together to ensure a seamless UX for customers. It is most well known for having zero downloads, being completely browser-based. This particular squad project was about implementing static meeting codes to enable a persistent dial-in number for calling into Highfive meetings over traditional PSTN phone lines. Role: Design Owner Squad Sizes: 1 Designer, 1 SWE Managed By: SVP of Design, CTO, Eng Manager Areas of Focus: User Research, Testing and Evaluation, UX/UI (Mobile, Web, IA), PM <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/2e8a25d66f3c35d77c4719b8332693e11340dc124a96e3a9a214716cba6eda24/dial-thumb.png" data-mid="57410011" border="0" src="https://freight.cargo.site/w/1000/i/2e8a25d66f3c35d77c4719b8332693e11340dc124a96e3a9a214716cba6eda24/dial-thumb.png" /> BackgroundNeglecting Users’ Habits and Industry Norms For dialing into video conferences with a phone, competing products follow a similar model. They provide users with a persistent number to dial in to, after which users have to enter a unique meeting ID/code to join the meeting. Right (bottom on mobile): Zoom’s persistent dial-in numbers don’t change over time <img width="736" height="866" width_o="736" height_o="866" data-src="https://freight.cargo.site/t/original/i/c1969a04ad90a9f47f94fb9f3d134a81a74693ca0edbe29189c3635a9f83530b/Bitmap.png" data-mid="57224969" border="0" src="https://freight.cargo.site/w/736/i/c1969a04ad90a9f47f94fb9f3d134a81a74693ca0edbe29189c3635a9f83530b/Bitmap.png" /> In developing the first MVP for dialing in, Highfive’s design team felt that these codes were a source of friction, especially entering meeting IDs over the phone. They implemented a “/phone” page for each meeting that would generate temporary phone numbers pre-assigned to specific meetings&nbsp;to let users into the correct meeting without any code entry. Quantitative Analysis A Pressing Problem for Sales #1reason for lost sales deals in the 90 days before project started 22% of user feedback is a request for non-expiring dial-in numbers 1 in 7 customer support tickets is about not being able to join call by phone User Feedback Hearing our Users’ Problems To better understand the problem, I sat in on customer success and support team meetings with our users. Here are some notable quotes “Our company’s internal users are used to expiring numbers but not our external users. They get confused and end up failing to join calls.” “ It’s pretty annoying to have to open up a web page to get a number to dial into a meeting. Kinda defeats the purpose of dialing in tbh.” “Jeff is in a remote location off-the-grid and when we had Webex he could call in to our weekly meetings with the meeting number because it never changed.” <img width="1398" height="872" width_o="1398" height_o="872" data-src="https://freight.cargo.site/t/original/i/5622d169f98d1b622bb91e2d60a882d3bae7c42b2b913daafa25ff554f744f03/interview.png" data-mid="55287566" border="0" src="https://freight.cargo.site/w/1000/i/5622d169f98d1b622bb91e2d60a882d3bae7c42b2b913daafa25ff554f744f03/interview.png" /> Existing UX Flow Analysis Understanding How Dialing-in Works on Highfive with Eng I sat down with the backend team to lay out all current points of entry for dialing into meetings. Our user research and shown that user pain points centered around&nbsp;pre-scheduled meetings. This was because, for ad-hoc meetings, users were already in contact with their participants; they could call them directly without Highfive.I realised we could focus our efforts first on an MVP that fixes just the calendar entries to precisely solve current user pain points. <img width="2882" height="1800" width_o="2882" height_o="1800" data-src="https://freight.cargo.site/t/original/i/6f8a42ce42c6d1c7cdb4bf92768fd53ccf7726e3b7d82ba47926b69225ea13bf/user-flow-before.png" data-mid="57312606" border="0" src="https://freight.cargo.site/w/1000/i/6f8a42ce42c6d1c7cdb4bf92768fd53ccf7726e3b7d82ba47926b69225ea13bf/user-flow-before.png" />&nbsp; New UX Flow Ensuring Common Understanding Across SquadTo achieve buy-in with my SWE, I ensured that we presented our intention and rollout plan to our managers for approval.With that, we added persistent numbers and meeting codes to scheduled meetings while leaving everything else untouched. <img width="2882" height="1800" width_o="2882" height_o="1800" data-src="https://freight.cargo.site/t/original/i/b6e304d356e64bde8ae9f6ccae817d0614bbe00fd520723121d9c52fb735b903/user-flow-after.png" data-mid="57316714" border="0" src="https://freight.cargo.site/w/1000/i/b6e304d356e64bde8ae9f6ccae817d0614bbe00fd520723121d9c52fb735b903/user-flow-after.png" /> Team Execution Working with Eng, QA, and PM for Release Scheduled meetings have new, persistent dial-in numbers with a unique meeting code in the generated text block. Right (bottom on mobile): Changes made to the Google Calender extension. Right (bottom on mobile): Changes made to the Microsoft Outlook add-in. New responsive web pages for retrieving international dial-in numbers were also implemented. <img width="750" height="1334" width_o="750" height_o="1334" data-src="https://freight.cargo.site/t/original/i/ea4d57be5ff387324d7c5158506909f17b9f0570ef1d48e65cbe70f0943727b0/mobileweb-pin.png" data-mid="54502377" border="0" data-scale="40" src="https://freight.cargo.site/w/750/i/ea4d57be5ff387324d7c5158506909f17b9f0570ef1d48e65cbe70f0943727b0/mobileweb-pin.png" />&nbsp; &nbsp;<img width="750" height="1334" width_o="750" height_o="1334" data-src="https://freight.cargo.site/t/original/i/9d0b0a03dcbea4ef320ed7764c7bbb80dc4cb62c0cce6c9d57991ab6ba5dcb44/mobileweb-pin-callme.png" data-mid="54502384" border="0" data-scale="40" src="https://freight.cargo.site/w/750/i/9d0b0a03dcbea4ef320ed7764c7bbb80dc4cb62c0cce6c9d57991ab6ba5dcb44/mobileweb-pin-callme.png" /> I worked with QA and the rest of Highfive to dogfood the feature.&nbsp;Through testing, we found out that tap-to-dial on certain Android phones were failing due to commas registering different pause lengths in the dialer. As a fix, double commas were implemented. Security Implementing a Way to Revoke Meeting Codes If the list of participants for a meeting were to change (someone leaves the team or organisation), access to the meeting can be modified by&nbsp;revoking the meeting code and re-scheduinge the meeting for a new code. Right (bottom on mobile): I&nbsp; implemented a new section in the admin dashboard for this purpose.<img width="1440" height="1194" width_o="1440" height_o="1194" data-src="https://freight.cargo.site/t/original/i/94ba09476444248b8c99e939a39cd9c273540f07d24d0fc68330673107c8514a/meeting-pins-overview.png" data-mid="54501954" border="0" src="https://freight.cargo.site/w/1000/i/94ba09476444248b8c99e939a39cd9c273540f07d24d0fc68330673107c8514a/meeting-pins-overview.png" /> Impact &amp; Future Iterations First Positive NPS in 6 Years View the feature notes I wrote with the support team for this release. After this release, our NPS score broke positive for the first time in years and sustained itself for months. Users loved our implementation and gave positive feedback in post-call surveys. For Phase 2 of this feature, we plan to: Implement an easy way to populate persistent dial-in numbers for all recurring calendar meetings with a Highfive meeting link in the descriptionStreamline dial-in functions to drop expiring numbers across the serviceUtilise Caller ID to identify phone callers in meetingsLet organisations customise their dial-in numberCollect user feedback regarding meeting code security and implement further options if necessary https://georgegoh.digital/Highfive-Admin-Dashboard-2-0 Mon, 30 Dec 2019 05:36:29 +0000 George Goh https://georgegoh.digital/Highfive-Admin-Dashboard-2-0 Highfive: Admin Dashboard 2.0 Highfive is both hardware and software as a service. Conference phones, cameras, and meeting software are developed as one and sold together to ensure a seamless UX for customers. It is most well known for having zero downloads, being completely browser-based. In this squad project, I worked exclusively with the CTO to upgrade the Admin Dashboard, Highfive’s mission-control-like interface for IT Admins to manage users, devices, and more. Role: Design Owner Squad Sizes: 1 Designer, 1 CTO Managed By: CTO Areas of Focus: User Research, UX/UI (Mobile, IA) <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/1f70ccc95090f1bf72eb6c62443c031d474b686e2a342a61cf83e77021a942be/thumb-admin.png" data-mid="57541526" border="0" src="https://freight.cargo.site/w/1000/i/1f70ccc95090f1bf72eb6c62443c031d474b686e2a342a61cf83e77021a942be/thumb-admin.png" /> BackgroundCare Package for IT Admins For a long time, Highfive’s support and customer success team had been collecting a list of improvements IT admins have been requesting for our Admin Dashboard. Compared to competitors like Bluejeans (right), our dashboard had not been updated in years. Some even offered real-time remote meeting controls and per-meeting qualitative data. <img width="2692" height="2184" width_o="2692" height_o="2184" data-src="https://freight.cargo.site/t/original/i/6abf782424f29f2f96b3387ba3b372928497f16d2267163be17ae18037746266/command-center_1.jpg" data-mid="57541639" border="0" src="https://freight.cargo.site/w/1000/i/6abf782424f29f2f96b3387ba3b372928497f16d2267163be17ae18037746266/command-center_1.jpg" /> Problems and Prioritisation Designing the MVP With only the CTO working as the sole developer on this project, my role was to break our targets down into bite size chunks that can be executed during his free time. From our long-term roadmap, I selected and prioritised&nbsp; goals based on how much time we could spend and how much impact they would have on our users:visual overhaul: CSS updatedevice management and alertspaginationzendesk integration: expose domain-specific ticketslist of meetings, metrics, and aggregation of meeting error alerts I also studied what our competitors were offering and looked at reviews users left for them to determine what we should prioritise. Visual Overhaul Preserving Responsive Components in CSS UpdateOne of the best features of our old admin dashboard was its excellent responsive design. In order to not undo all that work, I focused my redesign on each component so that my dev can re-use the responsive code while updating the dashboard to look more in line with other, modernised parts of our service. Old style: <img width="1490" height="1244" width_o="1490" height_o="1244" data-src="https://freight.cargo.site/t/original/i/60c31c7406c03bd02fd03d8bac900c0a694834951cd3b8c533060fe558d90cce/device-list-old.png" data-mid="57606350" border="0" src="https://freight.cargo.site/w/1000/i/60c31c7406c03bd02fd03d8bac900c0a694834951cd3b8c533060fe558d90cce/device-list-old.png" /> New style:<img width="1490" height="1244" width_o="1490" height_o="1244" data-src="https://freight.cargo.site/t/original/i/15e23d0c3a51107d53ab699a8721105b198c61b0936deaf84942bf59d65d1fcf/dashboard-device-alerts.png" data-mid="57606381" border="0" src="https://freight.cargo.site/w/1000/i/15e23d0c3a51107d53ab699a8721105b198c61b0936deaf84942bf59d65d1fcf/dashboard-device-alerts.png" /> Device Management &amp; Alerts Enhanced Device Status and Alerts Working with the backend team, I looked at our implementation of device statuses and implemented a more detailed system of statuses for every room setup. <img width="2882" height="1800" width_o="2882" height_o="1800" data-src="https://freight.cargo.site/t/original/i/fbeb0564bfa15f56887eddb573675bb7dba7014c9477a9a7ceb8d0cea993e214/device-logic.png" data-mid="57543492" border="0" src="https://freight.cargo.site/w/1000/i/fbeb0564bfa15f56887eddb573675bb7dba7014c9477a9a7ceb8d0cea993e214/device-logic.png" /><img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/cff6049b30b47ac00446e5a1520c97c5e68eb84adfc804a3974c73f3f112ab59/device-screen.png" data-mid="57546619" border="0" src="https://freight.cargo.site/w/1000/i/cff6049b30b47ac00446e5a1520c97c5e68eb84adfc804a3974c73f3f112ab59/device-screen.png" /> Old device detail (dialogue):<img width="1490" height="1244" width_o="1490" height_o="1244" data-src="https://freight.cargo.site/t/original/i/2cb2d92bb79be274152d45d089a168bb702d7920b2b3320412bf93fa2c4fae36/old-dash-devices.png" data-mid="57545483" border="0" src="https://freight.cargo.site/w/1000/i/2cb2d92bb79be274152d45d089a168bb702d7920b2b3320412bf93fa2c4fae36/old-dash-devices.png" /> New device detail (to accomodate tickets, metrics, etc): <img width="1490" height="1244" width_o="1490" height_o="1244" data-src="https://freight.cargo.site/t/original/i/3a80fb35eb507774945a8f7acb9171291885955553490042a1b5ac685787c26a/dashboard-device-detail-online.png" data-mid="57546649" border="0" src="https://freight.cargo.site/w/1000/i/3a80fb35eb507774945a8f7acb9171291885955553490042a1b5ac685787c26a/dashboard-device-detail-online.png" /> In response to user feedback regarding employees unplugging&nbsp; Highfive hardware to gain access to more power sockets and ethernet ports jeopardising the readiness of the meeting rooms for the next user, each time a disconnection of equipment occurs, our server will collect all events within 120 seconds and send an aggregate of events via email to the domain’s IT admin. Events that resolve in the 120 seconds will not be reported. Email alerts for individual events: <img width="1200" height="1264" width_o="1200" height_o="1264" data-src="https://freight.cargo.site/t/original/i/b1566a38ddf667b2dfa70a8dc8c7c2194d6388ccdff8477c038d3fbde0315a16/email-device.png" data-mid="57544267" border="0" src="https://freight.cargo.site/w/1000/i/b1566a38ddf667b2dfa70a8dc8c7c2194d6388ccdff8477c038d3fbde0315a16/email-device.png" /> <img width="1200" height="1184" width_o="1200" height_o="1184" data-src="https://freight.cargo.site/t/original/i/43713299fe8ec7de9029caead8842b54329ce27b12d84fcc2d0fa19bd00cdbd8/email-dvc.png" data-mid="57544263" border="0" src="https://freight.cargo.site/w/1000/i/43713299fe8ec7de9029caead8842b54329ce27b12d84fcc2d0fa19bd00cdbd8/email-dvc.png" /> <img width="1200" height="1230" width_o="1200" height_o="1230" data-src="https://freight.cargo.site/t/original/i/adc2c707d2ba528991ebc4ed63503ab4c4c3055799189fdfb624aaa9f7e6dcf2/email-dcp.png" data-mid="57544264" border="0" src="https://freight.cargo.site/w/1000/i/adc2c707d2ba528991ebc4ed63503ab4c4c3055799189fdfb624aaa9f7e6dcf2/email-dcp.png" /> Email alerts for aggregated events: <img width="1200" height="1624" width_o="1200" height_o="1624" data-src="https://freight.cargo.site/t/original/i/899bc7b4db18ddca7b52e636f7009ae86c9ad5ab29082b0cdd4a7978b8a30a43/email-device-multi-mix.png" data-mid="57544265" border="0" src="https://freight.cargo.site/w/1000/i/899bc7b4db18ddca7b52e636f7009ae86c9ad5ab29082b0cdd4a7978b8a30a43/email-device-multi-mix.png" /> <img width="1200" height="1740" width_o="1200" height_o="1740" data-src="https://freight.cargo.site/t/original/i/d9b6b33137007bfdcd32826e27d9ca345c49641ba0537729f84256c5c1374b25/email-device-multi.png" data-mid="57544266" border="0" src="https://freight.cargo.site/w/1000/i/d9b6b33137007bfdcd32826e27d9ca345c49641ba0537729f84256c5c1374b25/email-device-multi.png" /> Pagination and Zendesk Integration Surfacing Domain-related Support Tickets in Paginated View For the first iteration of our Zendesk integration, we were able to utilise their API to surface support tickets unique to each admin’s domain so that they can track their own support cases as well as those of the coworkers they are serving. View existing tickets and create new ones: This was also an excellent opportunity for me to convince our CTO to implement pagination on the list views. Before this feature, the list of users was the only section that could get obscenely long. Per-meeting Performance &amp; Metrics List of Meetings and Meeting Error Alerts I implemented a new “meetings” section to house the meeting codes subsection, and a semi-real-time list of all meetings that has occured. While Highfive is able to surface a wide-variety of metrics and data for each meeting, I sorted through them and picked out high-priority events like connection errors, failed attempts at joining meetings, service crashes and disconnects for MVP.&nbsp; For individual meetings, I chose to show important events like screensharing, phone callers, and latency. meeting details page and meeting list page Impact and Learnings The Importance of Project Management, Milestones, and Why Your CTO Should Not Code I was lucky that my CTO had a great grasp of our infrastructure and backend since he worked extensively on the product in the founding years. It was tough for me that he was not around for most parts of the work day as he was busy with C-level work, so my ability to prioritise and narrow down what we had to do helped greatly. I was able to use my UX skills to help him plan out the logic for integrated external APIs, and implementing a new status system for room devices. In some sense, the fact that our mindsets and skills complemented each other really helped this project. https://georgegoh.digital/Highfive-iOS-Swift-App Sun, 29 Dec 2019 12:13:51 +0000 George Goh https://georgegoh.digital/Highfive-iOS-Swift-App Highfive: iOS Swift App Highfive is both hardware and software as a service. Conference phones, cameras, and meeting software are developed as one and sold together to ensure a seamless UX for customers. It is most well known for having zero downloads, being completely browser-based. As part of the rebase from Objective-C to Swift, I worked with our iOS developer to implement long-overdue upgrades to the app. Role: Design Owner Squad Sizes: 1 Designer, 1 SWE Managed By: SVP of Design Areas of Focus: User Research, Testing and Evaluation, UX/UI (Mobile, IA), PM <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/b0f32a8b834432b3982c05338270cff759a21ba10cb05e506e53453208133974/ios-thumbnai.png" data-mid="57412085" border="0" src="https://freight.cargo.site/w/1000/i/b0f32a8b834432b3982c05338270cff759a21ba10cb05e506e53453208133974/ios-thumbnai.png" /> BackgroundMinor Redesign with Rebase In early 2018, Highfive’s iOS developer was tasked with rebasing the app from Objective-C to Swift. I was the design owner for all of his work, implementing upgrades to the UX wherever feasible. My contributions include: Branch.io (deep linking) implementationNew onboarding UXScreensharingVisual style update Branch.io (Deep Linking) Improving First-time UX through Deep Linking Our first-time users ranged from employees of organisations that have deployed Highfive across the company, to guest participants who have never used the service before and are joining a meeting from their calendar for the first time. I worked closely with our customer support and success teams to understand the different types of first-time users and their goals before working with my iOS developer to ensure the UX helped them accomplish these goals. Right: Flow for users who have no Highfive account or does not want to log in. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/cca1a0cd0c885a5df591d23d3e2da846c4549fcecf3931b9a00131b71f86d5e0/FTU-Scenarios-Pure-Auth.png" data-mid="57408043" border="0" src="https://freight.cargo.site/w/1000/i/cca1a0cd0c885a5df591d23d3e2da846c4549fcecf3931b9a00131b71f86d5e0/FTU-Scenarios-Pure-Auth.png" /> Right: Flow for users who have a Highfive account and are logging in for the first time.<img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3a67847de973d1d3763b5bb3bbf7601c35e4526b48a4b983073ac97303ac43fb/FTU-Scenarios-Pure-Unauth.png" data-mid="57408077" border="0" src="https://freight.cargo.site/w/1000/i/3a67847de973d1d3763b5bb3bbf7601c35e4526b48a4b983073ac97303ac43fb/FTU-Scenarios-Pure-Unauth.png" /> Right: Flow for users who have a Highfive account but have not set it up before needing to join a meeting.<img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/9331e65979c557f118d79ef4dd31370e783ec503d8345baa8ce7ced0b510f091/FTU-Scenarios-Unauth-to-Auth.png" data-mid="57408084" border="0" src="https://freight.cargo.site/w/1000/i/9331e65979c557f118d79ef4dd31370e783ec503d8345baa8ce7ced0b510f091/FTU-Scenarios-Unauth-to-Auth.png" /> Deep linking enabled us to ensure our users could get into the correct meeting whether or not they set up Highfive on their iPhones in advance. New Onboarding UX Front-loading Permissions and OAuthIn the previous version of our app, we asked for camera and microphone permissions just before a meeting starts. While contextual, surfacing the dialogues after users selected “Join Meeting” resulted in perceived friction. By moving them to an onboarding flow, we reward users who take time to install and set up the service prior to their first meeting while negating the perceived friction stopping guest users from getting into their meetings. While at it, I also helped implement OAuth log in, the lack of which was a major pain point before. Old FTUX showing permissions dialogue (demo-ed with current Android app): New FTUX showing permissions onboarding for mic and camera, and OAuth: Screensharing Choosing to Delay Release iOS 11 introduced the ability to share your screen to apps. Hats off to Zoom for quickly releasing the feature on iOS 11. We researched their implementation, and found that OS-level restrictions made it clunky in use.I designed our own, improved implementation, but after user-testing, decided with my PM that since the implementation in iOS 11 was non-ideal for our users and purpose, we should wait for iOS 12. iOS 11 — apps had to teach users how to manually add “Screen Recording” to their Control Center. Users then had to manually call up the Control Center to use the feauture: <img width="2882" height="1800" width_o="2882" height_o="1800" data-src="https://freight.cargo.site/t/original/i/b77ed854d37629d461366ab100e3b5fa5ea602ec893dd84b25149904061ea361/iOS11-screensharing.png" data-mid="57504036" border="0" src="https://freight.cargo.site/w/1000/i/b77ed854d37629d461366ab100e3b5fa5ea602ec893dd84b25149904061ea361/iOS11-screensharing.png" /> iOS 12 — apps are now allowed to call up the native screen broadcast dialogue upon user action: <img width="2882" height="1800" width_o="2882" height_o="1800" data-src="https://freight.cargo.site/t/original/i/a255d17893fbda3ebd0b29e063b4f8f167a7bcc2b9a9c9d799fa5f69cb2c7147/iOS12-screensharing.png" data-mid="57503473" border="0" src="https://freight.cargo.site/w/1000/i/a255d17893fbda3ebd0b29e063b4f8f167a7bcc2b9a9c9d799fa5f69cb2c7147/iOS12-screensharing.png" /> Visual Update Minor Improvements Before New Design System While we were creating a brand new design system for deployment in 2020, I convinced our PM to let me update the component styles and colour palette to better match our current desktop experience. Old style:<img width="1080" height="2160" width_o="1080" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f7c02f646841fb10106e02e4e8527ad20b2e2926a109758d57b24ca658a73908/Screenshot_20200101-163756.png" data-mid="57843107" border="0" src="https://freight.cargo.site/w/1000/i/f7c02f646841fb10106e02e4e8527ad20b2e2926a109758d57b24ca658a73908/Screenshot_20200101-163756.png" /><img width="1080" height="2160" width_o="1080" height_o="2160" data-src="https://freight.cargo.site/t/original/i/9653ffcfb99e864a9d4dc4dc958b53b234239980a1ff0c66e99c21f573407763/Screenshot_20200101-163808.png" data-mid="57843115" border="0" src="https://freight.cargo.site/w/1000/i/9653ffcfb99e864a9d4dc4dc958b53b234239980a1ff0c66e99c21f573407763/Screenshot_20200101-163808.png" /><img width="1080" height="2160" width_o="1080" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f8ac96984e0e8dc41d1728ecd62a303f1b1c43c9428add4cbfb7d1584b8497fc/Screenshot_20200107-010703.png" data-mid="57843158" border="0" src="https://freight.cargo.site/w/1000/i/f8ac96984e0e8dc41d1728ecd62a303f1b1c43c9428add4cbfb7d1584b8497fc/Screenshot_20200107-010703.png" /> New style:<img width="828" height="1792" width_o="828" height_o="1792" data-src="https://freight.cargo.site/t/original/i/954d355265d47b20fe453b1a9e6275468520946a3870dbe2c423288ffd48143d/IMG_0992.PNG" data-mid="57843228" border="0" data-scale="92" src="https://freight.cargo.site/w/828/i/954d355265d47b20fe453b1a9e6275468520946a3870dbe2c423288ffd48143d/IMG_0992.PNG" /><img width="828" height="1792" width_o="828" height_o="1792" data-src="https://freight.cargo.site/t/original/i/782ecb74de861d4f8467e7c11be3a859cfbe82a0c1880e5a047b8d27c951dcc6/IMG_0993.PNG" data-mid="57843244" border="0" data-scale="92" src="https://freight.cargo.site/w/828/i/782ecb74de861d4f8467e7c11be3a859cfbe82a0c1880e5a047b8d27c951dcc6/IMG_0993.PNG" /><img width="828" height="1792" width_o="828" height_o="1792" data-src="https://freight.cargo.site/t/original/i/a7de5dabc184514ddf6aa509b23c5a23aa0ae31dd387ad902b96919ce72c99ae/IMG_0995.PNG" data-mid="57843263" border="0" data-scale="92" src="https://freight.cargo.site/w/828/i/a7de5dabc184514ddf6aa509b23c5a23aa0ae31dd387ad902b96919ce72c99ae/IMG_0995.PNG" /> Impact Positive Feedback and Learnings Working closely with the developer was a great experience. I was able to learn from his expertise regarding the platform and help him improve the app he was building. Our update to the app has been well-received on the app store:“I just recently trained myself on a different video conferencing platform. To switch over to Highfive was absolutely confusing for me because it’s so much simpler.” &nbsp; Future upgrades to the iOS app I worked with the PM to plan include: Scheduling from mobile Direct Calling Device Selection and more https://georgegoh.digital/Highfive-link Mon, 30 Dec 2019 05:37:13 +0000 George Goh https://georgegoh.digital/Highfive-link Highfive.link Highfive is both hardware and software as a service. Conference phones, cameras, and meeting software are developed as one and sold together to ensure a seamless UX for customers. It is most well known for having zero downloads, being completely browser-based. Highfive.link was a project to fully deploy Highfive’s built-in screensharing feature as a local presentation standard on TV’s equipped with Highfive hardware. Role: Design Owner Squad Sizes: 1 Designer, 2 SWE Managed By: SVP of Design Areas of Focus: User Research, UX/UI (Mobile, IA), Testing and evaluation <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/87c0477df9d1dd999d25fb0e366586faa54c2f275911e8efc9e1d0728e9a095c/thumb-hflink.png" data-mid="57846393" border="0" src="https://freight.cargo.site/w/1000/i/87c0477df9d1dd999d25fb0e366586faa54c2f275911e8efc9e1d0728e9a095c/thumb-hflink.png" /> Problem OverviewA Case of Complicated Standards In any given enterprise conference room AV setup, options for presenting content from your computer on the TV can include:Apple Airplay Google CastMiracast (branded as Microsoft Wireless Display, Wi-Di, Samsung Smart View, LG SmartShare Cast, etc)different cable inputs (HDMI, VGA, USB-C)and others Having one standard does not guarantee that every user can use it: PCs cannot use Airplay without additional software Apple devices cannot use Miracast Newer laptops have limited port selectionand so onEach of these options also require users to break the conference room’s Highfive setup by switching to a different input on the connected TV. We all know TV remotes are a pain. Overview Easier Local Presentation via Chrome To allow customers to present to their Highfive-enabled TVs without messing with their setups, Highfive allows users to cast content through the Chrome browser. With the ubiquity of Chrome, this feature has been well-received by our customers. Highfive.link was borne while I was using this feature and realised we could make it even more seamless through the use of a dedicated URL with timed ID codes. <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/a3611d942bccda2588e87c65c63d449de86274044649738be6a2672a1159e10a/hflink-comp.png" data-mid="57805360" border="0" src="https://freight.cargo.site/w/1000/i/a3611d942bccda2588e87c65c63d449de86274044649738be6a2672a1159e10a/hflink-comp.png" /> Expanded UX Flow Underneath the Ease-of-UseTo make that hero flow a reality, I worked collaboratively with the my SWE to design the supporting backend logic.<img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/cd5ae7d6e926da101e780edd46c14cd44b0cb1c4195ef855aafb7e8c13de5cd0/hflink-flow.png" data-mid="57819441" border="0" src="https://freight.cargo.site/w/1000/i/cd5ae7d6e926da101e780edd46c14cd44b0cb1c4195ef855aafb7e8c13de5cd0/hflink-flow.png" /> Execution Implementation Across Current Product Screens I redesigned our Highfive TV screens to contain the Highfive.link code. <img width="1360" height="868" width_o="1360" height_o="868" data-src="https://freight.cargo.site/t/original/i/a2df99d4b28d1b34a0e464fbb02372615a16358b31c81f9fb57ea458d53fde80/tv-no-branding.png" data-mid="61066576" border="0" src="https://freight.cargo.site/w/1000/i/a2df99d4b28d1b34a0e464fbb02372615a16358b31c81f9fb57ea458d53fde80/tv-no-branding.png" /><img width="1360" height="868" width_o="1360" height_o="868" data-src="https://freight.cargo.site/t/original/i/fcf80a78c5935fb2bec3764806c9c1d80d2205938ce4a32a6cb86b25dc709d4c/tv-custom-brand.png" data-mid="61066604" border="0" src="https://freight.cargo.site/w/1000/i/fcf80a78c5935fb2bec3764806c9c1d80d2205938ce4a32a6cb86b25dc709d4c/tv-custom-brand.png" /> I also designed the code into in-meeting screens for our TV products so that users could use the same Highfive.link method to screenshare directly onto on-going TV meetings.<img width="1360" height="876" width_o="1360" height_o="876" data-src="https://freight.cargo.site/t/original/i/cb0d28ff7d71ef931d1d79365d4d47118ab88272d4cdc50407565a6711d84b8f/tv-in-call-sharing.png" data-mid="61066619" border="0" src="https://freight.cargo.site/w/1000/i/cb0d28ff7d71ef931d1d79365d4d47118ab88272d4cdc50407565a6711d84b8f/tv-in-call-sharing.png" /> On the browser side of our product, I designed fast-loading code entry screens for the browser and a special local-presentation-only in-meeting screen without the other meeting controls for a simplified UI.<img width="2304" height="1440" width_o="2304" height_o="1440" data-src="https://freight.cargo.site/t/original/i/be95a40d585a9cfe0dd4500f43e9125b7c6f7f6ddb0136e796945ba19484615c/Apple-Macbook-Space-Grey-Copy-2.png" data-mid="57846184" border="0" src="https://freight.cargo.site/w/1000/i/be95a40d585a9cfe0dd4500f43e9125b7c6f7f6ddb0136e796945ba19484615c/Apple-Macbook-Space-Grey-Copy-2.png" /><img width="2304" height="1440" width_o="2304" height_o="1440" data-src="https://freight.cargo.site/t/original/i/7b839ace6f2b15b0ad396450af5b1093cd8b312679bb52537d075751dbc5484d/Apple-Macbook-Space-Grey-Copy.png" data-mid="57846185" border="0" src="https://freight.cargo.site/w/1000/i/7b839ace6f2b15b0ad396450af5b1093cd8b312679bb52537d075751dbc5484d/Apple-Macbook-Space-Grey-Copy.png" /><img width="2304" height="1440" width_o="2304" height_o="1440" data-src="https://freight.cargo.site/t/original/i/66960bab62466fe04f1c08ab013566ade963bdea3d7ae85bc0fdbac512625c43/Apple-Macbook-Space-Grey.png" data-mid="57846282" border="0" src="https://freight.cargo.site/w/1000/i/66960bab62466fe04f1c08ab013566ade963bdea3d7ae85bc0fdbac512625c43/Apple-Macbook-Space-Grey.png" /> Impact Successful Release Highfive.link has just been released to the public and we are still collecting feedback from our users! For the future, we’re assessing shortening the security code, and the viability of letting our customers use their own domain link. https://georgegoh.digital/Nespresso-Wi-Fi-Espresso-Machine-UX Thu, 15 Mar 2018 19:45:58 +0000 George Goh https://georgegoh.digital/Nespresso-Wi-Fi-Espresso-Machine-UX Nespresso Wi-Fi Espresso Machine UX Nespresso approached NONOBJECT to help develop it’s next-generation Wi-Fi-enabled espresso machine. We were responsible for the entire product concept, from&nbsp; industrial design to the user experience. Role: UX Lead Contribution: Hardware UX, iOS app Team: 4 designers across entire project ProcessUnifying Hardware and Software The team worked closely together from the beginning until we developed a unified product strategy. Thereafter, I unblocked the hardware team by fleshing out the hardware UX and MMI with them before breaking off to focus on the companion iOS app.<img width="2740" height="1120" width_o="2740" height_o="1120" data-src="https://freight.cargo.site/t/original/i/3b68d034f623119a7663851246d549c5fd00f78f53447a938db44d9dc4484cf8/Asset-72.png" data-mid="56930414" border="0" src="https://freight.cargo.site/w/1000/i/3b68d034f623119a7663851246d549c5fd00f78f53447a938db44d9dc4484cf8/Asset-72.png" /> Background Replacing the&nbsp;Bluetooth-enabled Prodigio The Prodigio line-up was Nespresso’s first attempt at an IoT coffee machine.Leveraging Bluetooth, it could give you details about your machine through the app on your phone.count the number of capsules that passed through the machine and deduct it from your inventory.schedule the brewing of a capsules at a specific time. <img width="2100" height="1260" width_o="2100" height_o="1260" data-src="https://freight.cargo.site/t/original/i/ba0950b7ac0aeeef2bf090a7c1f594209e3590b7bcffb5ec470067250bf64f05/Asset-8.png" data-mid="13624739" border="0" src="https://freight.cargo.site/w/1000/i/ba0950b7ac0aeeef2bf090a7c1f594209e3590b7bcffb5ec470067250bf64f05/Asset-8.png" /> <img width="2100" height="1260" width_o="2100" height_o="1260" data-src="https://freight.cargo.site/t/original/i/24a58cd66936e7172737a856f7cf59abb001a28b38654fa84344f0eeb328d24e/Asset-11.png" data-mid="13624742" border="0" src="https://freight.cargo.site/w/1000/i/24a58cd66936e7172737a856f7cf59abb001a28b38654fa84344f0eeb328d24e/Asset-11.png" /> <img width="2100" height="1260" width_o="2100" height_o="1260" data-src="https://freight.cargo.site/t/original/i/3152cdd8d81a025e3995631bde4215bc196c1d51c3d0e9629720cf858ede0da1/Asset-9.png" data-mid="13624740" border="0" src="https://freight.cargo.site/w/1000/i/3152cdd8d81a025e3995631bde4215bc196c1d51c3d0e9629720cf858ede0da1/Asset-9.png" /> <img width="2100" height="1260" width_o="2100" height_o="1260" data-src="https://freight.cargo.site/t/original/i/610e58cee13b6c005718359a120370d4b2b6daaf58df6db49b15c8384341ed60/Asset-10.png" data-mid="13624741" border="0" src="https://freight.cargo.site/w/1000/i/610e58cee13b6c005718359a120370d4b2b6daaf58df6db49b15c8384341ed60/Asset-10.png" /> <img width="2100" height="1260" width_o="2100" height_o="1260" data-src="https://freight.cargo.site/t/original/i/58b39706cdf50d6ef6daa23be559bfd08a0fcab0f81e963532d237114e4fcc57/Asset-12.png" data-mid="13624743" border="0" src="https://freight.cargo.site/w/1000/i/58b39706cdf50d6ef6daa23be559bfd08a0fcab0f81e963532d237114e4fcc57/Asset-12.png" /> <img width="2100" height="1260" width_o="2100" height_o="1260" data-src="https://freight.cargo.site/t/original/i/69a3409f442d5267bf656d791493db115ab949c5c381178e44b7ec1505abafc1/Asset-13.png" data-mid="13624744" border="0" src="https://freight.cargo.site/w/1000/i/69a3409f442d5267bf656d791493db115ab949c5c381178e44b7ec1505abafc1/Asset-13.png" /> Understand Insights from User Feedback We studied user reviers and interviewed existing Prodigio owners to learn about the product’s shortcomings. Users were upset that the Bluetooth connectivity and smart functionality did not enhance their experience in any way over a normal Nespresso machine. <img width="2740" height="1962" width_o="2740" height_o="1962" data-src="https://freight.cargo.site/t/original/i/960c2991d495e342c5a0c8c781d84e929bf4249142ce279f623675b8c918f74a/Asset-71.png" data-mid="56928936" border="0" src="https://freight.cargo.site/w/1000/i/960c2991d495e342c5a0c8c781d84e929bf4249142ce279f623675b8c918f74a/Asset-71.png" /> AlignPrioritising User Needs: Coffee without App I proposed to the team that the product UX should not require the app to make a coffee; that would remain solely the domain of the machine. Smart features and the app should strive to simply value-add to the users experience by automatically ordering capsules when they run lowproviding content relevant to your coffee habits such as recipes or articles enabling further fine tuning of the machine’s brew parameters <img width="2740" height="1462" width_o="2740" height_o="1462" data-src="https://freight.cargo.site/t/original/i/14ee21969eb04a300f468bb606b9fc7f6b1c2bdbea9eb8d761f860a7418ac357/Asset-74.png" data-mid="56990147" border="0" src="https://freight.cargo.site/w/1000/i/14ee21969eb04a300f468bb606b9fc7f6b1c2bdbea9eb8d761f860a7418ac357/Asset-74.png" /> Develop Hardware UX: Sensors, Specs, Mechanisms I worked with the hardware team to design ensure that the machine’s MMI was intuitive, delightful, and brought added value compared to existing machines like the Prodigio. <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/d35bc9bccc53c19c082f72796b6458ff8866a7df35c12510c3acccff18bf6e1f/Asset-69.png" data-mid="55282782" border="0" src="https://freight.cargo.site/w/1000/i/d35bc9bccc53c19c082f72796b6458ff8866a7df35c12510c3acccff18bf6e1f/Asset-69.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/b47cf4f91521dfe8603ed308e3056b37202a3ce54a1e28d81148a1262f3a6267/Asset-66.png" data-mid="55282790" border="0" src="https://freight.cargo.site/w/1000/i/b47cf4f91521dfe8603ed308e3056b37202a3ce54a1e28d81148a1262f3a6267/Asset-66.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/042438e5d2f73a698914fcac2089548b83df09bc5707fd843285ecfa3e2a6528/Asset-67.png" data-mid="55282808" border="0" src="https://freight.cargo.site/w/1000/i/042438e5d2f73a698914fcac2089548b83df09bc5707fd843285ecfa3e2a6528/Asset-67.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/db7b1686a4448179bdac474491bc0cb0450b47865cb36f8440846e4bd242cc0c/Asset-68.png" data-mid="55282802" border="0" src="https://freight.cargo.site/w/1000/i/db7b1686a4448179bdac474491bc0cb0450b47865cb36f8440846e4bd242cc0c/Asset-68.png" /> We implemented:A colour sensor to accurately detect which capsule is being used for SKU-specific brew parameters.&nbsp;An automated loading tray to precisely track consumption with no error. <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/0face1d161c122592f7824f2620ffc7e026347343dd41dbc72525cbbe440c7ae/Asset-75.png" data-mid="57042806" border="0" src="https://freight.cargo.site/w/1000/i/0face1d161c122592f7824f2620ffc7e026347343dd41dbc72525cbbe440c7ae/Asset-75.png" /> A large, legible matrix display with capacitive touch controls integrated into the retracting nozzle. I provided the engineers with the display specs and timings for the animation and nozzle. <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/419e4de915b32e7bec5757c3d3c452db5a5724dd82603e20d9ac75b8acd1e23b/Asset-76.png" data-mid="57042838" border="0" src="https://freight.cargo.site/w/1000/i/419e4de915b32e7bec5757c3d3c452db5a5724dd82603e20d9ac75b8acd1e23b/Asset-76.png" /> Here are some examples of the hardware UX diagrams I created for the product bible. <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/59fb8fbb66b3b5b2aa8c5f6d3a7353a8ff33fd09a3da916ee3ca36b3aff96cfd/Asset-79.png" data-mid="57063325" border="0" src="https://freight.cargo.site/w/1000/i/59fb8fbb66b3b5b2aa8c5f6d3a7353a8ff33fd09a3da916ee3ca36b3aff96cfd/Asset-79.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/a93a188913baaf3e32455a6be9112f282604f5105d0a09c0d8f56037ac09bcbb/Asset-78.png" data-mid="57063324" border="0" src="https://freight.cargo.site/w/1000/i/a93a188913baaf3e32455a6be9112f282604f5105d0a09c0d8f56037ac09bcbb/Asset-78.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/5c7fda2feaabadd22b2f8b9834b01965b58d41ad0dcbd32ba52ac2df1a4037ad/Asset-77.png" data-mid="57063323" border="0" src="https://freight.cargo.site/w/1000/i/5c7fda2feaabadd22b2f8b9834b01965b58d41ad0dcbd32ba52ac2df1a4037ad/Asset-77.png" /> Develop App UX: Flow, Wireframes, PrototypesIn designing the companion app, I first laid out the highest level components: articles inventory boutique recipes settings These were used to create IA for the app and initial wireframes.<img width="2741" height="1620" width_o="2741" height_o="1620" data-src="https://freight.cargo.site/t/original/i/93d17b00f5143234eeecb9e43b373a5e795c31be94a9a3c0bc55452a4be35626/Asset-73.png" data-mid="56989587" border="0" src="https://freight.cargo.site/w/1000/i/93d17b00f5143234eeecb9e43b373a5e795c31be94a9a3c0bc55452a4be35626/Asset-73.png" /> To test the concept, I made some higher fidelity screens. Initial impressions internally were that the app felt oversimplified and arbitrary.<img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/b8048492b483cc8d1582bcfeca391f43a9eb22c8296c9e3b89b754002072e801/Asset-27.png" data-mid="13771188" border="0" src="https://freight.cargo.site/w/1000/i/b8048492b483cc8d1582bcfeca391f43a9eb22c8296c9e3b89b754002072e801/Asset-27.png" /> I quickly put together a clickable prototype from the wireframes and did some guerilla user testing. I received a lot of feedback regarding how many of the useful features were hidden behind too many steps, making the app feel dumb. In response to the feedback, I switched to a card-based feed for the app home. The feed surfaces relevant sections of the app to the first screen intelligently, while the bottom bar convention lent familiarity to users. <img width="2593" height="1354" width_o="2593" height_o="1354" data-src="https://freight.cargo.site/t/original/i/b307d1b5e998e47cc4aa37c4ab4df10b4a3c303590c71b52085eec6d0165b9e0/Asset-68.png" data-mid="56094791" border="0" src="https://freight.cargo.site/w/1000/i/b307d1b5e998e47cc4aa37c4ab4df10b4a3c303590c71b52085eec6d0165b9e0/Asset-68.png" /> Deliver Final Designs: New Flow &amp; MockupsThe goal of the app is to give the user what they need, when they want it. For example, you can see from this UX flow diagram how users can access recipes as featured content, related recipes, or straight from the library, Each point of entry caters to a different context. This time, guerilla user testing yielded positive results.<img width="3926" height="6801" width_o="3926" height_o="6801" data-src="https://freight.cargo.site/t/original/i/6124ba8f1b67bb1845be24b2f9a5dda13b6bfecee38c1297454a21e2cef140e1/Asset-70.png" data-mid="56096593" border="0" src="https://freight.cargo.site/w/1000/i/6124ba8f1b67bb1845be24b2f9a5dda13b6bfecee38c1297454a21e2cef140e1/Asset-70.png" />Onboarding:<img width="2620" height="1514" width_o="2620" height_o="1514" data-src="https://freight.cargo.site/t/original/i/3dbcfbdf4bbea43c107ecf8f1c78a1c1fb4b6e20ac2a71a17f41780067f499fe/Asset-51.png" data-mid="57043607" border="0" src="https://freight.cargo.site/w/1000/i/3dbcfbdf4bbea43c107ecf8f1c78a1c1fb4b6e20ac2a71a17f41780067f499fe/Asset-51.png" />Subscription / Webstore:<img width="2620" height="1514" width_o="2620" height_o="1514" data-src="https://freight.cargo.site/t/original/i/cd307c4184ba98115ab26ff0a8da0de9aa4b8d615299eb16db0cbebe60ad08a5/Asset-65.png" data-mid="56928335" border="0" src="https://freight.cargo.site/w/1000/i/cd307c4184ba98115ab26ff0a8da0de9aa4b8d615299eb16db0cbebe60ad08a5/Asset-65.png" /><img width="2560" height="4642" width_o="2560" height_o="4642" data-src="https://freight.cargo.site/t/original/i/bd59ef51c091ee728117caead58ac607cd36372a1b1ec47cde479d3013f8378e/Asset-67.png" data-mid="56928363" border="0" src="https://freight.cargo.site/w/1000/i/bd59ef51c091ee728117caead58ac607cd36372a1b1ec47cde479d3013f8378e/Asset-67.png" />Recipes: <img width="2620" height="2470" width_o="2620" height_o="2470" data-src="https://freight.cargo.site/t/original/i/add9524dde9aae20d15f4f9d8e643ca6de3369e10c1c0c513fa88500b862029f/Asset-63.png" data-mid="56928670" border="0" src="https://freight.cargo.site/w/1000/i/add9524dde9aae20d15f4f9d8e643ca6de3369e10c1c0c513fa88500b862029f/Asset-63.png" /> Settings:<img width="2620" height="1514" width_o="2620" height_o="1514" data-src="https://freight.cargo.site/t/original/i/bfa63de4b416e0579cafb27dd4ed0b99cd4778f85bd159ea1df9f8e74ab7768a/Asset-66.png" data-mid="56928686" border="0" src="https://freight.cargo.site/w/1000/i/bfa63de4b416e0579cafb27dd4ed0b99cd4778f85bd159ea1df9f8e74ab7768a/Asset-66.png" /> Impact Continuing a Partnership Nespresso was impressed with our work and returned to work with us again for the milk portion of this coffee machine. Given more time, we would have loved to sit with the SWEs to develop the app and do more user testing, but alas, the agency model proved brutal with its timeline. https://georgegoh.digital/Nespresso-Wi-Fi-Aeroccino-UX Thu, 15 Mar 2018 18:31:04 +0000 George Goh https://georgegoh.digital/Nespresso-Wi-Fi-Aeroccino-UX Nespresso Wi-Fi Aeroccino UX Our previous work had a great impact on Nespresso’s connected strategy, they returned to NONOBJECT when they were developing the next product in this system, which was the Aeroccino milk frother. Role: Project Lead Contributions: Industrial Design, Hardware UX/MMI Team: 1 designer Background Bringing IoT to the Aeroccino The Aeroccino line of products are accessories meant to accompany Nespresso’s coffee machines to help users make milk-based drinks such as lattes or cappuccinos. Nespresso wanted to design an Aeroccino that would be sold with the Wi-Fi Prodigio we developed for them. <img width="2740" height="1757" width_o="2740" height_o="1757" data-src="https://freight.cargo.site/t/original/i/4abd8c08af18e601abaf4766d07691fc4ed85dce000630ae2ad9a8e3bbdd6860/Asset-65.png" data-mid="14459121" border="0" src="https://freight.cargo.site/w/1000/i/4abd8c08af18e601abaf4766d07691fc4ed85dce000630ae2ad9a8e3bbdd6860/Asset-65.png" /> User Research Existing Interface Proved Difficult to Understand We trawled reviews for the current Aeroccinos and interviewed users for insights. The MMI ranged from: • single button, oversimplified and abstract • to multi-button with cryptic icons <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/b27e7da36d28f183f07618373468e2974e1099d442e50babdf39da7244961127/Asset-62.png" data-mid="14459022" border="0" src="https://freight.cargo.site/w/1000/i/b27e7da36d28f183f07618373468e2974e1099d442e50babdf39da7244961127/Asset-62.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/c68b5e372dc562a7a15eb63c472eb278c5e461e4feaf4dd2ed9917e91f80c2e2/Asset-61.png" data-mid="14459016" border="0" src="https://freight.cargo.site/w/1000/i/c68b5e372dc562a7a15eb63c472eb278c5e461e4feaf4dd2ed9917e91f80c2e2/Asset-61.png" /> Volume indicators also had cryptic icons that represented the types of whisk to use, and “max” and “min” were abstract and inaccurate to a lot of users, resulting in overflowing milk on the countertop.<img width="2560" height="1703" width_o="2560" height_o="1703" data-src="https://freight.cargo.site/t/original/i/2489b4299bf79e183ddc68fe01868ea41cc0c1e0a2a8f64e785215ce0a75307e/Asset-64.png" data-mid="14437380" border="0" src="https://freight.cargo.site/w/1000/i/2489b4299bf79e183ddc68fe01868ea41cc0c1e0a2a8f64e785215ce0a75307e/Asset-64.png" /> Problem Definition Can We Also Automate This? When we designed the new Prodigio for Nespresso, we focused on reducing complexity in the MMI, giving users the best coffee with the least effort and ambiguity. <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/b47cf4f91521dfe8603ed308e3056b37202a3ce54a1e28d81148a1262f3a6267/Asset-66.png" data-mid="14462412" border="0" src="https://freight.cargo.site/w/1000/i/b47cf4f91521dfe8603ed308e3056b37202a3ce54a1e28d81148a1262f3a6267/Asset-66.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/042438e5d2f73a698914fcac2089548b83df09bc5707fd843285ecfa3e2a6528/Asset-67.png" data-mid="14462609" border="0" src="https://freight.cargo.site/w/1000/i/042438e5d2f73a698914fcac2089548b83df09bc5707fd843285ecfa3e2a6528/Asset-67.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/db7b1686a4448179bdac474491bc0cb0450b47865cb36f8440846e4bd242cc0c/Asset-68.png" data-mid="14462678" border="0" src="https://freight.cargo.site/w/1000/i/db7b1686a4448179bdac474491bc0cb0450b47865cb36f8440846e4bd242cc0c/Asset-68.png" /> <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/d35bc9bccc53c19c082f72796b6458ff8866a7df35c12510c3acccff18bf6e1f/Asset-69.png" data-mid="14462723" border="0" src="https://freight.cargo.site/w/1000/i/d35bc9bccc53c19c082f72796b6458ff8866a7df35c12510c3acccff18bf6e1f/Asset-69.png" /> Integrating the Aeroccino into this setup threatened to break that seamless UX. From tapping tapping the display on the Prodigio to physical buttons on the Aeroccino, the UX felt misaligned with the Prodigio. How might we automate milk frothing on the Aeroccino? <img width="2696" height="1576" width_o="2696" height_o="1576" data-src="https://freight.cargo.site/t/original/i/dc8f513c6a03a8953d34b67873e3d450c08497aafca164be15301f1df0dc691a/Asset-70.png" data-mid="14463723" border="0" src="https://freight.cargo.site/w/1000/i/dc8f513c6a03a8953d34b67873e3d450c08497aafca164be15301f1df0dc691a/Asset-70.png" /> Develop Translating Prodigio Automation to Frothing MilkOnce we decided to automate as much of the interface as possible, we sought to translate the Prodigio experience to the Aeroccino. Just like the Prodigio’s ability to read capsules, I experimented with “What if the Aeroccino can read how much milk you add?” Since different milk-based drinks required different amounts of milk, could we utilise a volume sensor to detect the amount of milk users added as a way to select what drink to make. <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/75294b7d47b5a8a4185f104fb7d352ccb1912fbd9d3536abff7330120073bdae/Asset-73.png" data-mid="14468427" border="0" src="https://freight.cargo.site/w/1000/i/75294b7d47b5a8a4185f104fb7d352ccb1912fbd9d3536abff7330120073bdae/Asset-73.png" /> Pouring to a very specific volume proved to be difficult in our user testing, so we went with ranges to be more forgiving to the user. <img width="2696" height="1576" width_o="2696" height_o="1576" data-src="https://freight.cargo.site/t/original/i/4e3ff56328f8780b29633911d12c939b63392daff07db0c11e5b40b1f2efd015/Asset-71.png" data-mid="14468444" border="0" src="https://freight.cargo.site/w/1000/i/4e3ff56328f8780b29633911d12c939b63392daff07db0c11e5b40b1f2efd015/Asset-71.png" /> Deliver Hardware UX: User Flows For coffee,&nbsp;a user makes coffee by placing a capsule on the receiver.&nbsp; A sensor reads the capsule flavour and displays what it’s making on the Prodigio. <img width="2696" height="1575" width_o="2696" height_o="1575" data-src="https://freight.cargo.site/t/original/i/bb92bffb75145cba80312c811a609cf2f4fda342c879ba38fc23da6075ee9e80/Asset-74.png" data-mid="14472438" border="0" src="https://freight.cargo.site/w/1000/i/bb92bffb75145cba80312c811a609cf2f4fda342c879ba38fc23da6075ee9e80/Asset-74.png" /> Milk follows the same paradigm. The user pours milk into the jug and places the jug on the stand.&nbsp; A sensor detects how much milk was added, and displays what it’s making on the Prodigio. <img width="2696" height="1576" width_o="2696" height_o="1576" data-src="https://freight.cargo.site/t/original/i/e3d08a94083e66004db0aacd81c1b17fbc82eb52eb22c16eeb57fbcb8f59efaf/Asset-75.png" data-mid="14472442" border="0" src="https://freight.cargo.site/w/1000/i/e3d08a94083e66004db0aacd81c1b17fbc82eb52eb22c16eeb57fbcb8f59efaf/Asset-75.png" /> 3 different ranges define how the milk will be frothed. <img width="2740" height="1620" width_o="2740" height_o="1620" data-src="https://freight.cargo.site/t/original/i/cdeee1985cc937b450a0f3de3cd68133dc11c7b90a1a7978d9bc99d56f886912/Asset-76.png" data-mid="14474862" border="0" src="https://freight.cargo.site/w/1000/i/cdeee1985cc937b450a0f3de3cd68133dc11c7b90a1a7978d9bc99d56f886912/Asset-76.png" /> These diagrams outline the hardware flow for each task. The consistent paradigm here is automation based on user-input. Smart fine-tuning occurs in the background; each espresso can be brewed differently (eg. more acidic to balance out the milk) depending on whether it is being consumed alone or within a specific milk-based drink. The system also is lenient enough to allow the user to input milk or capsule in any order. <img width="2766" height="1620" width_o="2766" height_o="1620" data-src="https://freight.cargo.site/t/original/i/fd37a50b9b90d6e870daab48b18201386cc1bff83a56e5bfa64d282223b7abf4/Asset-77.png" data-mid="14502492" border="0" src="https://freight.cargo.site/w/1000/i/fd37a50b9b90d6e870daab48b18201386cc1bff83a56e5bfa64d282223b7abf4/Asset-77.png" /><img width="2766" height="1620" width_o="2766" height_o="1620" data-src="https://freight.cargo.site/t/original/i/c79fb15143597c092a26124e539fcd7c1ededa3b40514e0d27accf10d67d1c39/Asset-78.png" data-mid="14502506" border="0" src="https://freight.cargo.site/w/1000/i/c79fb15143597c092a26124e539fcd7c1ededa3b40514e0d27accf10d67d1c39/Asset-78.png" /><img width="2766" height="1620" width_o="2766" height_o="1620" data-src="https://freight.cargo.site/t/original/i/06003b972724bbf3c529881f6ad1e6d5bed4e9a90b9fb563ca0a281830f022c1/Asset-79.png" data-mid="14502557" border="0" src="https://freight.cargo.site/w/1000/i/06003b972724bbf3c529881f6ad1e6d5bed4e9a90b9fb563ca0a281830f022c1/Asset-79.png" /><img width="2766" height="1620" width_o="2766" height_o="1620" data-src="https://freight.cargo.site/t/original/i/7208c1ce901ea2729deb0ec54fb5d71e9958a3c6c4fa86d5905cc088d7c8675b/Asset-80.png" data-mid="14502558" border="0" src="https://freight.cargo.site/w/1000/i/7208c1ce901ea2729deb0ec54fb5d71e9958a3c6c4fa86d5905cc088d7c8675b/Asset-80.png" /> Deliver Hardware UX: Detailed MMI Timings I exhaustively detailed all possible permutations and combinations to provide guidance for the firmware and mechanical engineers in their development for both machines. These diagrams outline what happens if the user starts by frothing milk:<img width="5101" height="3301" width_o="5101" height_o="3301" data-src="https://freight.cargo.site/t/original/i/d50d0dfcbd3a64fcb66df8bb8da1cd1c9378b7c13dec5ca1520fe31543c29369/ArrowFLOW-09.png" data-mid="14543971" border="0" src="https://freight.cargo.site/w/1000/i/d50d0dfcbd3a64fcb66df8bb8da1cd1c9378b7c13dec5ca1520fe31543c29369/ArrowFLOW-09.png" /> <img width="3673" height="1919" width_o="3673" height_o="1919" data-src="https://freight.cargo.site/t/original/i/bd4f140722255bda39893d02cd17267a01109185a415583a8605a3c1ca0ef6bf/Asset-73x.png" data-mid="14592494" border="0" src="https://freight.cargo.site/w/1000/i/bd4f140722255bda39893d02cd17267a01109185a415583a8605a3c1ca0ef6bf/Asset-73x.png" /> <img width="3673" height="1919" width_o="3673" height_o="1919" data-src="https://freight.cargo.site/t/original/i/35847dee8689af1109f6abef4bbf0c5a90eb8de8bb60232edaf0f4b6e142a7c8/Asset-53x.png" data-mid="14592492" border="0" src="https://freight.cargo.site/w/1000/i/35847dee8689af1109f6abef4bbf0c5a90eb8de8bb60232edaf0f4b6e142a7c8/Asset-53x.png" /> <img width="3673" height="1919" width_o="3673" height_o="1919" data-src="https://freight.cargo.site/t/original/i/033df50349bf0dbff78b2c21245214148d7006f9b396e7b35f871bc83243b24b/Asset-63x.png" data-mid="14592493" border="0" src="https://freight.cargo.site/w/1000/i/033df50349bf0dbff78b2c21245214148d7006f9b396e7b35f871bc83243b24b/Asset-63x.png" /> <img width="3672" height="1867" width_o="3672" height_o="1867" data-src="https://freight.cargo.site/t/original/i/43c653a1dbb566cf58a9e6aeb52d7678c4ca5b6cfc43460c6e2d64af6d985701/Asset-83x.png" data-mid="14592491" border="0" src="https://freight.cargo.site/w/1000/i/43c653a1dbb566cf58a9e6aeb52d7678c4ca5b6cfc43460c6e2d64af6d985701/Asset-83x.png" /> These diagrams outline what happens if the user starts by brewing coffee: <img width="5100" height="3301" width_o="5100" height_o="3301" data-src="https://freight.cargo.site/t/original/i/2d508c895ef9d73b7106d41757cfd396a8b4424aca1718082ac5dfbf0c7fd7d8/ArrowFLOW-07.png" data-mid="14543937" border="0" src="https://freight.cargo.site/w/1000/i/2d508c895ef9d73b7106d41757cfd396a8b4424aca1718082ac5dfbf0c7fd7d8/ArrowFLOW-07.png" /> <img width="3673" height="1919" width_o="3673" height_o="1919" data-src="https://freight.cargo.site/t/original/i/ff17fe370f3512a7c1dff299cb40444e5bf7f378160137565e4c8b98dc84ee1b/Asset-33x.png" data-mid="14592337" border="0" src="https://freight.cargo.site/w/1000/i/ff17fe370f3512a7c1dff299cb40444e5bf7f378160137565e4c8b98dc84ee1b/Asset-33x.png" /> <img width="3673" height="1919" width_o="3673" height_o="1919" data-src="https://freight.cargo.site/t/original/i/f150cfbff69f67552fd37d8c9f1cf4c21b7e07980261b45d0ab07b97eb48d053/Asset-23x.png" data-mid="14592336" border="0" src="https://freight.cargo.site/w/1000/i/f150cfbff69f67552fd37d8c9f1cf4c21b7e07980261b45d0ab07b97eb48d053/Asset-23x.png" /> <img width="3673" height="1919" width_o="3673" height_o="1919" data-src="https://freight.cargo.site/t/original/i/fd23544cea00dfce1633c813e14fb5195e9eeea57bbe280e75e79907871d8df9/Asset-13x.png" data-mid="14592335" border="0" src="https://freight.cargo.site/w/1000/i/fd23544cea00dfce1633c813e14fb5195e9eeea57bbe280e75e79907871d8df9/Asset-13x.png" /> <img width="3673" height="1919" width_o="3673" height_o="1919" data-src="https://freight.cargo.site/t/original/i/c5cf72029760cf817a7c9179037c9d9dfecabb4da0a75b45ec7f5a6849bb4e2b/Asset-43x.png" data-mid="14592338" border="0" src="https://freight.cargo.site/w/1000/i/c5cf72029760cf817a7c9179037c9d9dfecabb4da0a75b45ec7f5a6849bb4e2b/Asset-43x.png" /> Because the nozzles of the two devices must take turns to dispense, the wireframes above help ensure the system works harmoniously under all circumstances. The interface is kept extremely simple for our users, and complexity is kept within the firmware. <img width="2010" height="1170" width_o="2010" height_o="1170" data-src="https://freight.cargo.site/t/original/i/15349afd76a66328dd3614eb8a9690b7e504a6a43c9c00baa308ff95493cba1a/Asset-81.png" data-mid="14570677" border="0" src="https://freight.cargo.site/w/1000/i/15349afd76a66328dd3614eb8a9690b7e504a6a43c9c00baa308ff95493cba1a/Asset-81.png" /> <img width="2010" height="1170" width_o="2010" height_o="1170" data-src="https://freight.cargo.site/t/original/i/1562d72bfed827f2f7ad39829fa4836ceeec6599d6c06b81dd0196f2b083a7f9/Asset-83.png" data-mid="14570681" border="0" src="https://freight.cargo.site/w/1000/i/1562d72bfed827f2f7ad39829fa4836ceeec6599d6c06b81dd0196f2b083a7f9/Asset-83.png" /> Impact Learning from a Difficult Project To be frank, this was the best outcome in a really difficult project. We developed the Prodigio after confirming with the client that milk-based drinks was not a priority for the product. To shoehorn the Aeroccino into the system after the fact was non-ideal. Our recommendation to Nespresso when we received the project was that they build a bigger version of the Prodigio with an integrated refrigerated milk tank so that the entire process can remain unified in automation, but as our client, they had the final say on what we built for them. https://georgegoh.digital/Ultimate-Ears-Block-Party-2 Tue, 15 Oct 2019 05:04:17 +0000 George Goh https://georgegoh.digital/Ultimate-Ears-Block-Party-2 Ultimate Ears Block Party 2 Ultimate Ears approached NONOBJECT to help envision what’s next for their hit Bluetooth speaker line-up. We proposed updates to their existing product UX. Role: Lead Designer Contributions: Industrial Design, UX Team: 1 designer Background Block Party Makes Music Social Block Party is an app-enabled feature on Ultimate Ear’s speakers that allows for music input from 3 different users. It is a rather buggy Bluetooth hack where the Boom app alternates the speaker’s connection between the 3 devices after each song. <img width="1440" height="960" width_o="1440" height_o="960" data-src="https://freight.cargo.site/t/original/i/10f5aff97a867139c55516ad5bf970de9840b5d2e7987d8a4e5e010d2ddb6c9e/nexus2cee_Ultimate-Ears-Block-Party-Lifestyle.png" data-mid="52684707" border="0" data-scale="89" src="https://freight.cargo.site/w/1000/i/10f5aff97a867139c55516ad5bf970de9840b5d2e7987d8a4e5e010d2ddb6c9e/nexus2cee_Ultimate-Ears-Block-Party-Lifestyle.png" /> Despite coming off unpolished, BOOM owners appreciated the ability to control whose music is playing, see what songs are coming up next, and control the volume of the device regardless of whose music was playing. I felt that our team could make the feature better to add value to the speakers. <img width="1440" height="2560" width_o="1440" height_o="2560" data-src="https://freight.cargo.site/t/original/i/186578e006dcfa1f646d81bdc2526d47bc41c6102897890fc0dbbb6857163734/nexus2cee_Screenshot_20151019-103828.png" data-mid="52685686" border="0" src="https://freight.cargo.site/w/1000/i/186578e006dcfa1f646d81bdc2526d47bc41c6102897890fc0dbbb6857163734/nexus2cee_Screenshot_20151019-103828.png" /> <img width="1440" height="2560" width_o="1440" height_o="2560" data-src="https://freight.cargo.site/t/original/i/f793e9c4e19a7f2f4680b3682d4bbcd25c5dbeee79da5d456cb9a4c6bde2ae34/nexus2cee_Screenshot_20151019-113320.png" data-mid="52685701" border="0" src="https://freight.cargo.site/w/1000/i/f793e9c4e19a7f2f4680b3682d4bbcd25c5dbeee79da5d456cb9a4c6bde2ae34/nexus2cee_Screenshot_20151019-113320.png" /> GoalImproving Usability and Engagement After studying reviews and user feedback collected by UE, I realised that we needed to make the UX: more inclusive and engaging&nbsp;while lowering the barrier to entry for guest users. Clockwise, from top left: If the owner is playing Bieber and you’re a hater, don’t bother fighting with him for control! He can send you a URL so you can vote on what’s playing! <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/097708480d5d0df590faf88b8d7a2977a0b7a9c6ce96e73b9fcc9f8a647d82c8/storyboard.jpg" data-mid="52817414" border="0" src="https://freight.cargo.site/w/1000/i/097708480d5d0df590faf88b8d7a2977a0b7a9c6ce96e73b9fcc9f8a647d82c8/storyboard.jpg" /> This version of Block Party would be:&nbsp; free from the limitations of Bluetooth,&nbsp;would not require guests to download an appwould not require guests to have their own streaming subscriptionsIt would also be more fun and engaging with it’s voting system. <img width="2560" height="1440" width_o="2560" height_o="1440" data-src="https://freight.cargo.site/t/original/i/a0099de2d55a2bb597d4e843ae9676495264a47d3b86c7ce62e89c01ffe36848/Overall.png" data-mid="52821229" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/a0099de2d55a2bb597d4e843ae9676495264a47d3b86c7ce62e89c01ffe36848/Overall.png" /> Development Feasibility, Architecture, Evaluation I followed our initial work by carrying out a quick prior-art research to evaluate what was on the market.We found at least two apps (Party DJ and QCast, as of 2015) that offered similar functionality in parts and tested them internally. It was fun to fight over what was on the office playlist, and we were able to verify that popular services like Spotify had APIs that allowed us to do what we’d wanted. <img width="8001" height="4501" width_o="8001" height_o="4501" data-src="https://freight.cargo.site/t/original/i/8563412df895cf4ca122f17abd42979e5e5c407b08440ee4599954b86fc7f299/appendix-03.jpg" data-mid="52825985" border="0" src="https://freight.cargo.site/w/1000/i/8563412df895cf4ca122f17abd42979e5e5c407b08440ee4599954b86fc7f299/appendix-03.jpg" /> <img width="8001" height="4501" width_o="8001" height_o="4501" data-src="https://freight.cargo.site/t/original/i/d08d86451b2d1129ddf9c097e6df3ed721b2f6c4351f3e8a591fd5d6078fe4c8/appendix-02.jpg" data-mid="52825984" border="0" src="https://freight.cargo.site/w/1000/i/d08d86451b2d1129ddf9c097e6df3ed721b2f6c4351f3e8a591fd5d6078fe4c8/appendix-02.jpg" /> Next, we needed to define the network architecture required to implement this feature. We tried different permutations and combinations of connectivity and endpoints to ensure that Ultimate Ears can maintain the same UX across different scenarios. <img width="2992" height="2705" width_o="2992" height_o="2705" data-src="https://freight.cargo.site/t/original/i/a07abffe53a649fb8057d0631d2a29016e653b77cf9e58cbe7043ed511096887/smaller.png" data-mid="55446682" border="0" src="https://freight.cargo.site/w/1000/i/a07abffe53a649fb8057d0631d2a29016e653b77cf9e58cbe7043ed511096887/smaller.png" /> Here’s what we came up with: <img width="8001" height="4501" width_o="8001" height_o="4501" data-src="https://freight.cargo.site/t/original/i/1b9a6d85f6627455c48f542ee5d94f44dc3a3f8935c1d4e23b8ff95c98a81b8c/appendix-04.jpg" data-mid="52826004" border="0" src="https://freight.cargo.site/w/1000/i/1b9a6d85f6627455c48f542ee5d94f44dc3a3f8935c1d4e23b8ff95c98a81b8c/appendix-04.jpg" /> To ensure a consistent user experience, the Boom speaker would always play music from the host’s streaming service. If Wi-Fi is present, it will play from the web directly like a Sonos or Chromecast, but when outside, your phone takes over that task and becomes the bridge to the streaming service. <img width="8001" height="4501" width_o="8001" height_o="4501" data-src="https://freight.cargo.site/t/original/i/82401bb81df4b7818368fac917a48867448c72a3223f4c605e86683a7a3705cb/appendix-08.jpg" data-mid="52826013" border="0" src="https://freight.cargo.site/w/1000/i/82401bb81df4b7818368fac917a48867448c72a3223f4c605e86683a7a3705cb/appendix-08.jpg" /> <img width="8001" height="4501" width_o="8001" height_o="4501" data-src="https://freight.cargo.site/t/original/i/ffb0cb710e423f9b51c21ce3ff5edbeaa4d49326cec4556db64bc603ea97fb2f/appendix-06.jpg" data-mid="52826005" border="0" src="https://freight.cargo.site/w/1000/i/ffb0cb710e423f9b51c21ce3ff5edbeaa4d49326cec4556db64bc603ea97fb2f/appendix-06.jpg" /> Delivery UX Flow Here’s the UX flow for Block Party within the new version of the UE app I designed for our client. <img width="5120" height="2880" width_o="5120" height_o="2880" data-src="https://freight.cargo.site/t/original/i/235d8a7ea096e5605cf710c98d84b5d0c294913e3f12ed1822f31731b87b1e83/architecture.png" data-mid="53034396" border="0" src="https://freight.cargo.site/w/1000/i/235d8a7ea096e5605cf710c98d84b5d0c294913e3f12ed1822f31731b87b1e83/architecture.png" /><img width="5120" height="1280" width_o="5120" height_o="1280" data-src="https://freight.cargo.site/t/original/i/d1d07810d3101905404936a45bfccc29899b353e063f67d7ef06411a84b32e29/architecture-web.png" data-mid="53034411" border="0" src="https://freight.cargo.site/w/1000/i/d1d07810d3101905404936a45bfccc29899b353e063f67d7ef06411a84b32e29/architecture-web.png" /> Delivery Final Designs <img width="5120" height="2880" width_o="5120" height_o="2880" data-src="https://freight.cargo.site/t/original/i/6a657579b5a95065a486a995f534d68f68b97d2896b774e46e2a0035bf7bd154/spotify.png" data-mid="53039118" border="0" src="https://freight.cargo.site/w/1000/i/6a657579b5a95065a486a995f534d68f68b97d2896b774e46e2a0035bf7bd154/spotify.png" /><img width="5120" height="2880" width_o="5120" height_o="2880" data-src="https://freight.cargo.site/t/original/i/675e3f3f76d1a4f5ebef1a88b465e4bd3f55f88961f3c558c59b71214b9b13cf/share.png" data-mid="53039125" border="0" src="https://freight.cargo.site/w/1000/i/675e3f3f76d1a4f5ebef1a88b465e4bd3f55f88961f3c558c59b71214b9b13cf/share.png" /><img width="5120" height="2880" width_o="5120" height_o="2880" data-src="https://freight.cargo.site/t/original/i/6d44fcc8b6ff7c6159c0e1d0286d8666c0f3108faf62ead1d974a7e89c658ffb/start-music.png" data-mid="53039174" border="0" src="https://freight.cargo.site/w/1000/i/6d44fcc8b6ff7c6159c0e1d0286d8666c0f3108faf62ead1d974a7e89c658ffb/start-music.png" /><img width="5120" height="2880" width_o="5120" height_o="2880" data-src="https://freight.cargo.site/t/original/i/65ff9f94403816ba015e8e4365be8409d8381ef18ffdfa1bdc5dfd5cd5f42525/browser.png" data-mid="53039272" border="0" src="https://freight.cargo.site/w/1000/i/65ff9f94403816ba015e8e4365be8409d8381ef18ffdfa1bdc5dfd5cd5f42525/browser.png" /> Impact Delivering Joy to Users Beyond the Ordinary The opportunity to work on all aspects of their speaker line-up really defined my process as a designer who saw no divide between physical and digital experiences. It is precisely this thought process that defines UE’s success in the market, with positive reviews for not just the physical design and sound quality of their speakers, but also the company’s continued commitment to adding features through updates for their products.