https://leslieslin.com Les Wed, 27 May 2026 02:02:42 +0000 https://leslieslin.com en https://leslieslin.com/Home-1 Mon, 09 Sep 2019 04:23:22 +0000 Les https://leslieslin.com/Home-1 Engineering mind, design heart. With ten years of experience shipping products that reach millions, I am someone who still sweats the details and is always ready for whatever comes next. <img width="480" height="560" width_o="480" height_o="560" data-src="https://freight.cargo.site/t/original/i/2c8824f43ac8528f553561ef54fb7501040c0d59cb1f0bd45a866721c6c50fb6/480-x-480.png" data-mid="250996883" border="0" src="https://freight.cargo.site/w/480/i/2c8824f43ac8528f553561ef54fb7501040c0d59cb1f0bd45a866721c6c50fb6/480-x-480.png" /> Google&nbsp;NotebookLM Turns Your Sources into AnythingHow I designed trust for AI at scale. Making a complex Google AI product feel intuitive for millions. &nbsp;NotebookLM︎︎︎ <img width="480" height="560" width_o="480" height_o="560" data-src="https://freight.cargo.site/t/original/i/17001cd202eb3fba3ce27dec60164cb003b6170051d2b2aec7a75737329d7bd1/pixel.png" data-mid="250996984" border="0" src="https://freight.cargo.site/w/480/i/17001cd202eb3fba3ce27dec60164cb003b6170051d2b2aec7a75737329d7bd1/pixel.png" /> Google Zero-to-one on generative personalization for PixelShipping a first-of-its-kind generative personalization experience to 10M Pixel users, from 0 to 1. Google Pixel AI icons&nbsp;︎︎︎ <img width="480" height="560" width_o="480" height_o="560" data-src="https://freight.cargo.site/t/original/i/6ed845b766a82f153da890cf1852b20ff0600bb89a34e8e2d7ec219fe447bfb5/Sotheby-s.png" data-mid="250997463" border="0" src="https://freight.cargo.site/w/480/i/6ed845b766a82f153da890cf1852b20ff0600bb89a34e8e2d7ec219fe447bfb5/Sotheby-s.png" /> Sotheby’s The digital transformation of auction houseReinventing the auction house for the digital age. End-to-end marketplace design for the world's most prestigious luxury platform. Sotheby’s Marketplace ︎︎︎ <img width="240" height="240" width_o="240" height_o="240" data-src="https://freight.cargo.site/t/original/i/4f1ea13f49fe4c6505e1c8116807928052c952f12267ee34e821b3a6a0ac7254/Goat.png" data-mid="207835351" border="0" data-no-zoom src="https://freight.cargo.site/w/240/i/4f1ea13f49fe4c6505e1c8116807928052c952f12267ee34e821b3a6a0ac7254/Goat.png" /> Goat Group Revolutionary mobile App experienceEffortlessly see all available sizes for a product on a single screen Goat PDP ︎︎︎ <img width="240" height="240" width_o="240" height_o="240" data-src="https://freight.cargo.site/t/original/i/cc7b3044c0e4e005ad1ad25249850148deefdef5adfdb33da5eb992fad7dd36c/IBEEM.png" data-mid="178594492" border="0" data-no-zoom src="https://freight.cargo.site/w/240/i/cc7b3044c0e4e005ad1ad25249850148deefdef5adfdb33da5eb992fad7dd36c/IBEEM.png" /> IBM User-friendly learning management system ​(LMS)Learning never stops IBM Skills ︎︎︎ <img width="240" height="240" width_o="240" height_o="240" data-src="https://freight.cargo.site/t/original/i/72a41be8d91f2a33419e4b4d05cd38ef06eaaa759ac2cda8734237a97a7019ab/Hoppy3.png" data-mid="178596906" border="0" data-no-zoom src="https://freight.cargo.site/w/240/i/72a41be8d91f2a33419e4b4d05cd38ef06eaaa759ac2cda8734237a97a7019ab/Hoppy3.png" /> Anheuser-Busch InBev Boost user engagement with gamificationKnowing what you are drinking Hoppy Mobile App ︎︎︎ How I work Engineering mind, Design heart Rooted in engineering, practicing in design. I bridge the gap between technical complexity and human intuition. From Sotheby's to Google AI I've designed for high-end art collectors and for people setting up their first Android phone. Different users, same obsession: make it feel effortless. Thinking in Systems Good design breaks. Great design holds up. I build systems that stay coherent when the product evolves, the team grows, and the AI does something unexpected. ︎ &nbsp; Creative Solutions Enterprise Products / Consumer Facing products&nbsp; Internal Management Tools&nbsp; Mobile APP / Website / UI Design / Design SystemData Visualization / Exhibition Design ︎&nbsp; Skills Design AI-Native &amp; Agentic UX · Interaction Design · Design Systems · Mobile &amp; OS Design · UX Strategy Research User Interviews · Usability Testing · Data-Driven Design (Amplitude, Fullstory) Tools &amp; Code Figma · Claude · Cursor · Google AI Studio · ChatGPT · HTML / CSS SP https://leslieslin.com/Mobil-Menu Thu, 15 Aug 2019 20:58:40 +0000 Les https://leslieslin.com/Mobil-Menu Leslie Lin ︎ Home About Me Product &amp; APP - Google: NotebookLM - Google: AI icons-&nbsp;Sotheby’s&nbsp; -&nbsp;Hoppy CMS&nbsp;-&nbsp;A Day at the Museum&nbsp; Website1. IBM Skills 2. Spotify Newsroom 3. GE Report 4. Capital Ideas ©2026 LESLIE LINALL RIGHTS RESERVE https://leslieslin.com/ABOUT-1 Thu, 15 Aug 2019 19:41:20 +0000 Les https://leslieslin.com/ABOUT-1 br { display: block; margin-bottom: 24px; } &lt;!-- 2 or 3 things about meヽ(︎︎▽ﾟ︎)ノ ヽ(„• ֊ •„)ノ --&gt; I am a(n) —&nbsp; product designer,experience designer, interaction designer, ui/ux designer, content strategist, ux researcher, web and app designer, &amp; interactive prototyper. I am interested in — exhibation design, artificial intelligence , consumer behavior, AR / VR technology, ART, climbing, &amp; film critique. ContactIf you would like a project consultant, freelance work or collaborator, drop me a line. leslie.s.lin@gmail.comOr, Find me on Linkedin&nbsp;︎︎︎ EducationTisch School of the Art of New York University, Interactive Telecommunication Program (ITP) Master of Professional StudiesFu Jen Catholic University,&nbsp;Electrical and Electronics EngineeringBachelor of science Experience 12 .2024 - 06 .2026 New York, NYGoogleProduct Designer07 .2023 - 10 .2024 New York, NYGOAT GroupSenior Product Designer08 .2021 - 07 .2023 New York, NYSotheby’sSenior Product Designer 06 .2020 - 08 . 2021 New York, NYFacebook Product Designer,&nbsp;Facebook Learning Management System 08 .2019 - 04 .2020 New York, NYHavas New YorkSenior Experience Designer 11 .2015 - 08 .2019 New York, NYGroup SJR Senior Experience Designer User Experience Designer01 .2011 - 08 .2011 Taipei, Taiwan AMD (Advanced Micro Devices) Platform Application Engineer Skills UX Strategy/ Wireframe/ User Testing/ Data Visualization/ Mobile APP Design/ Responsive Web Design/ Exhibation Design/ Storyboarding/ Prototype Tools ProgrammingHTML&amp;CSS / JavaScript/ D3.js/Processing/Arduino SoftwareFigma/ Figma AI/ Cursor / Google AI Studio/ Claude/ ChatGPT Home ︎ Work&nbsp;︎ https://leslieslin.com/nlm-1 Wed, 27 May 2026 02:02:42 +0000 Les https://leslieslin.com/nlm-1 NotebookLM: A Knowledge Tool That Turns Your Sources into Anything From November 2025 to June 2026, I worked as a Product Designer on Google NotebookLM: an AI-powered research tool that lets users synthesize information from multiple sources into notes, summaries, and presentations. This was my first time working in a fully AI-native product environment. As the sole designer across multiple workstreams, I had to move fast — prototyping in Antigravity, scaling design systems with Figma Make, and making design decisions in a workflow where the product itself was changing what "design" meant. Across three shipped features, I established patterns that balance AI automation with human agency — and explored how designers themselves can work alongside AI without losing craft. https://notebooklm.google/ MY ROLE Product Designer&nbsp;Prototyping with Antigravity / Google AI studioAI-assisted Design System ​(Figma Make)Cross-platform design: mobile + desktop&nbsp; GOAL Give users meaningful control over AI-generated outputs without adding frictionScale NotebookLM from a generation tool into a personal knowledge systemEstablish AI-assisted design workflows that accelerate without sacrificing quality <img width="2422" height="988" width_o="2422" height_o="988" data-src="https://freight.cargo.site/t/original/i/5d1496ec1fdc76c7dc63125e914613a100ad2fe94e9a1093a61b401b6e9467fe/Screenshot-2026-05-26-at-11.13.48-PM.png" data-mid="248795903" border="0" src="https://freight.cargo.site/w/1000/i/5d1496ec1fdc76c7dc63125e914613a100ad2fe94e9a1093a61b401b6e9467fe/Screenshot-2026-05-26-at-11.13.48-PM.png" /> Case study 01Slide editing Problem Users can generate AI slides in one click, but they can't control the output. Whatever the AI produces is final. Wanting to change a single slide means regenerating the entire deck. Process A UXR insight from the Japanese market from Dec 2025 pointed to the core issue: users didn't dislike AI-generated content. They disliked losing control over it. The design challenge became: how do you make AI generation and human editing coexist in a single flow? I explored three ways to bring editing into the flow: Directions 1 and 2 shared the same hidden risk: they pulled users into an endless regenerate-and-refresh loop. That’s costly in GPU usage, and every regeneration is another chance for the model to drift from the source and hallucinate. Engineering data showed three or fewer regenerations was the sweet spot for accuracy. So I recommended direction 3: queued edits, regenerated together, only on the slides that changed. It keeps generations few and intentional, and it fits who NotebookLM serves: learners and educators who want to fix what’s wrong and get back to their material, not art-direct a deck. <img width="3343" height="1867" width_o="3343" height_o="1867" data-src="https://freight.cargo.site/t/original/i/90112d34100ab9c7dff955c17dc3c3b3ea977f78710574f75f72a4bc3652eba9/NLM-Slide-Table.png" data-mid="254326830" border="0" src="https://freight.cargo.site/w/1000/i/90112d34100ab9c7dff955c17dc3c3b3ea977f78710574f75f72a4bc3652eba9/NLM-Slide-Table.png" /> In just 2 weeks since initial launch, we've had:&nbsp; Shipped 100% web (Feb 25) and 100% mobile (Feb 26) 4.5M individual slides edited within two weeks of launch 2.1M decks edited Became NotebookLM's most popular studio artifact immediately after launch Design A prompt-based input on each slide lets users give instructions per page. Since changes aren't immediate, a new UI indicator marks which slides have been edited. Users can queue multiple edits and regenerate them all at once. <img width="2880" height="2048" width_o="2880" height_o="2048" data-src="https://freight.cargo.site/t/original/i/15fca8f37fa048df4fd8bf0e0abe658d850ed58e8b42a30e756c803936b223be/Mode1_-Global-Revise---Batch-Edit-1.png" data-mid="248797079" border="0" src="https://freight.cargo.site/w/1000/i/15fca8f37fa048df4fd8bf0e0abe658d850ed58e8b42a30e756c803936b223be/Mode1_-Global-Revise---Batch-Edit-1.png" /> <img width="2880" height="2048" width_o="2880" height_o="2048" data-src="https://freight.cargo.site/t/original/i/afdd3ed1088c896c713204f787d623a0b88aec2aa6287804fb79cbaed34c9eb4/Mode1_-Global-Revise---Batch-Edit.png" data-mid="248797078" border="0" src="https://freight.cargo.site/w/1000/i/afdd3ed1088c896c713204f787d623a0b88aec2aa6287804fb79cbaed34c9eb4/Mode1_-Global-Revise---Batch-Edit.png" /> <img width="3606" height="3974" width_o="3606" height_o="3974" data-src="https://freight.cargo.site/t/original/i/707f60c1333e71d82a6d993214e5357da8fbd21f17c50da7d1191a0e8a3c48a1/Revise-Slide-Deck_Mobile-App_For-Cargo.png" data-mid="248797095" border="0" src="https://freight.cargo.site/w/1000/i/707f60c1333e71d82a6d993214e5357da8fbd21f17c50da7d1191a0e8a3c48a1/Revise-Slide-Deck_Mobile-App_For-Cargo.png" /> UXR-driven Targeted regeneration Cross-platform AI x human editing Case study 02AI tagging system Problem NotebookLM lets users combine multiple sources — PDFs, web pages, videos — into a knowledge base. But as sources accumulate, finding information becomes difficult and organizing them becomes a burden. Process Behavioral observation surfaced a telling signal: power users were manually tagging sources with emoji and custom prefixes to stay organized. The design challenge was making AI suggest tags without removing user agency. The solution was two parallel flows. One followed a Gmail-style labeling system, letting users create and manage tags manually. The other was one-tap AI tagging, where the system auto-classifies all sources based on content analysis. The manual flow was deceptively complex: string length constraints, sorting logic, edge cases for long or ambiguous tag names. I worked closely with engineers throughout to make sure the manual tagging logic and AI tagging logic stayed consistent — so regardless of which flow a user chose, the underlying taxonomy made sense. OutcomeReduced the friction of manual organization to near zero Shifted NotebookLM's positioning from AI tool to personal knowledge system Evolved into one-tap AI auto-classification of all resources Design Mobile AI tagging: Two creation flows <img width="1766" height="1176" width_o="1766" height_o="1176" data-src="https://freight.cargo.site/t/original/i/41ce2970cf5f29ee0612aa4f2cbc3e70f1a11632c4a0cde91e3cb7eb8cf8b809/Screenshot-2026-05-27-at-12.10.56-AM.png" data-mid="248797787" border="0" src="https://freight.cargo.site/w/1000/i/41ce2970cf5f29ee0612aa4f2cbc3e70f1a11632c4a0cde91e3cb7eb8cf8b809/Screenshot-2026-05-27-at-12.10.56-AM.png" /> Mobile AI tagging: Edit, management flow <img width="1436" height="1160" width_o="1436" height_o="1160" data-src="https://freight.cargo.site/t/original/i/58f2e8704d015f8899eba5b1df3344e28d852dc2ac1fd473d7a9e1cf2b95a406/Screenshot-2026-05-27-at-12.11.58-AM.png" data-mid="248797790" border="0" src="https://freight.cargo.site/w/1000/i/58f2e8704d015f8899eba5b1df3344e28d852dc2ac1fd473d7a9e1cf2b95a406/Screenshot-2026-05-27-at-12.11.58-AM.png" /> Desktop AI tagging, entry point <img width="2116" height="1428" width_o="2116" height_o="1428" data-src="https://freight.cargo.site/t/original/i/c507e3d543a8f2ef8f6f1ee84f36da84c60b8c216b3b6bdb8277cb8f7d6e72a7/Screenshot-2026-05-27-at-12.15.55-AM.png" data-mid="248797796" border="0" src="https://freight.cargo.site/w/1000/i/c507e3d543a8f2ef8f6f1ee84f36da84c60b8c216b3b6bdb8277cb8f7d6e72a7/Screenshot-2026-05-27-at-12.15.55-AM.png" /> AI suggestion + human control Behavioral research Scalable system design Case study 03 AI-built mobile dark mode module Problem NotebookLM mobile needed dark mode support, but the design system wasn't complete. Building it from scratch is time-intensive — mobile dark mode requires careful attention to tokens, contrast ratios, and accessibility across every component. Process The workflow: AI generates → designer audits → iterate on failures. I started with our existing light mode tokens, exported them as JSON using Token Studio plug-in, and used Claude to generate a dark mode version based on rules I defined — things like contrast ratios, surface elevation hierarchy, and which brand colors needed to shift in luminosity. The real work was cleaning up token naming, manually reconnecting nested components that didn't inherit correctly, and auditing every output for accessibility. Error states defaulted to red text that failed dark mode contrast ratios. Our primary button ︎&nbsp; (#4259FF) frequently didn't pass WCAG, I resolved it by selecting a lighter blue already in our design system for dark mode use. AI handles generation well. What it can't do is know your system, catch hierarchy errors in deeply nested components, or make judgment calls on brand vs. accessibility tradeoffs. That's still the designer's job. Outcome Independently shipped 300+ dark mode components across mobile and web in under a week Established the team's first AI-assisted design system workflow — documented and adopted as the standard process for future work Demonstrated that AI-generated output is viable at scale when paired with structured human oversight&nbsp; Design systems AI-assisted workflow Mobile · Dark mode&nbsp; Accessibilty https://leslieslin.com/Hoppy_app Thu, 15 Aug 2019 20:58:38 +0000 Les https://leslieslin.com/Hoppy_app Hoppy As the largest brewing company, ABI is crafting a new brewery culture by educating the public on the topic of beer. After 6 months of hard work, we created a beer learning app, Hoppy, which provides a unique way to gather their employees around the world. I designed some features on the app, and the whole content management system ​(CMS) for editors from the US and Mexico will use to publish daily quiz and beer related content on Hoppy. MY ROLE&nbsp; UX Research of web data scraping and secondary research. Product thinking by planing and running a workshop, and defining the problems along with cross-functional teams. Product design&nbsp; Report and present the project outcome. GOAL ABI is the largest brewing company in the United States and employs over 30,000 people. We want to create an in-depth conversation on the topic of beer for their employees.&nbsp;By understanding beer culture, beer making process, ingredients..., people are truly&nbsp;able to enjoy every beer they sip. <img width="1722" height="618" width_o="1722" height_o="618" data-src="https://freight.cargo.site/t/original/i/c296f04661992315c4eee18123fe57f4eb0d12dddb01b9bd5e27a0cc40ead32a/Artboard.png" data-mid="49145924" border="0" data-scale="100" data-no-zoom src="https://freight.cargo.site/w/1000/i/c296f04661992315c4eee18123fe57f4eb0d12dddb01b9bd5e27a0cc40ead32a/Artboard.png" /> UNDERSTAND USER NEEDS &nbsp;&nbsp; Ideation and workshops After several brainstorm sessions and workshops, we defined the user story and use some design methods to help us created more valuable customer experience. In addition, by defined at most three business goals and available technologies, that we know our user story to achieve with KPIs.&nbsp; Earn and learn daily In the end we came out with this mobile app idea, Hoppy. Hoppy is a fun and engaging beer learning app. When user complete Daily Quizzes, they earn badges and Beer coins. User can use the beer coin to redeem the prizes. So, my task is to design a user-friendly CMS/ Backend for administrators from ABI, and to create and organize a 30-60-second learning game for daily use. At launch, we also included 110 multiple answer questions that are in both English and Spanish. https://leslieslin.com/Hoppy_Prototype Tue, 19 May 2020 22:34:32 +0000 Les https://leslieslin.com/Hoppy_Prototype <img width="1080" height="1080" width_o="1080" height_o="1080" data-src="https://freight.cargo.site/t/original/i/59dcfc538943d54ba1c868b40511006cce524b05568a7195c5f4c23a19ce2080/Comp-1.gif" data-mid="71978605" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/59dcfc538943d54ba1c868b40511006cce524b05568a7195c5f4c23a19ce2080/Comp-1.gif" /> https://leslieslin.com/Hoppy_CMS_Design-Process Wed, 20 May 2020 04:57:05 +0000 Les https://leslieslin.com/Hoppy_CMS_Design-Process CMS DESIGN PROCESS Creating the right user flow for this project was crucial. I used user flow to illustrate all the steps involved in how a user satisfies one specific task through the website or application. Due to the nature of the app, we had multiple categories and subcategories for beer lessons. Each lesson had its own quiz sections. In addition, Daily Quiz was pulled from the quiz sections, and questions answered incorrectly would resurface with greater frequency for each user. I worked with our developer team closely at this stage, to make sure the user flow was logical. Our focus was to create an open and easy to use interface for our global users. (Administrators are from different regions) 1. App screen flow and rough wireframes to communicate with key stakeholders 2. Sketches to figure out the possible user flows <img width="1519" height="885" width_o="1519" height_o="885" data-src="https://freight.cargo.site/t/original/i/710190636cbf0e8409b1de110346d0d6552c7e821adbfcfb32ce23b09e22945d/Group-40.png" data-mid="71706741" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/710190636cbf0e8409b1de110346d0d6552c7e821adbfcfb32ce23b09e22945d/Group-40.png" /> App Screen Flow <img width="1010" height="1741" width_o="1010" height_o="1741" data-src="https://freight.cargo.site/t/original/i/052568a4b71f2197d0fe63a4114869f7a4690f00a0932a7396416b9ed2734bd6/AB_ScreenFlow_v3.jpg" data-mid="111677660" border="0" data-scale="64" src="https://freight.cargo.site/w/1000/i/052568a4b71f2197d0fe63a4114869f7a4690f00a0932a7396416b9ed2734bd6/AB_ScreenFlow_v3.jpg" /> CMS Sitemap <img width="1662" height="826" width_o="1662" height_o="826" data-src="https://freight.cargo.site/t/original/i/ab0b978d607cb1ced6a13b2f52efc4f3f0f51f4d805b3a7b9c775640dfcf4075/Sitemap.jpg" data-mid="71706708" border="0" src="https://freight.cargo.site/w/1000/i/ab0b978d607cb1ced6a13b2f52efc4f3f0f51f4d805b3a7b9c775640dfcf4075/Sitemap.jpg" /> “Designing the easiest and intuitive user interface by creating the right user flow” DESIGN EXPLORATIONS + USER TESTING Fewer clicks = better User Experience? I worked with developers and stakeholders together on the content management concept, and went back and forth at the user flow. &nbsp; Have the Hoppy CMS start from Content Editing page seem intuitive and easy, but most ABI editors are not familiar with the content architecture as much as we do. After user testing with Deutsch internal team and ABI employees, I learned a beautiful content with wrong category tags will take developers and editors a lot of effort to fix after it was pushed and published. <img width="1034" height="551" width_o="1034" height_o="551" data-src="https://freight.cargo.site/t/original/i/6ea6a81bfe7be47b58263222ea545cee6b2dcb226606b6561860f57445310cc7/Group-5.jpg" data-mid="71706705" border="0" data-scale="80" data-no-zoom src="https://freight.cargo.site/w/1000/i/6ea6a81bfe7be47b58263222ea545cee6b2dcb226606b6561860f57445310cc7/Group-5.jpg" /> Mapping user flows with wireframesOur final solution is the user needs to select their task on the Content landing page. After user select from "Manage Current Content ", "Add New Lesson" or "Add New Quiz", then they select the category,&nbsp; following subcategory and then content editing page. <img width="650" height="345" width_o="650" height_o="345" data-src="https://freight.cargo.site/t/original/i/23a2ee6c80c92e3c69f7b0b4639cb3ef52028e9b16de244733fad351967c15bd/Group-13.jpg" data-mid="71706751" border="0" data-no-zoom src="https://freight.cargo.site/w/650/i/23a2ee6c80c92e3c69f7b0b4639cb3ef52028e9b16de244733fad351967c15bd/Group-13.jpg" /> POSSIBLE USER PATHS WITH WIREFRAMES 1. Manage &amp; Delete &amp; Edit current content <img width="11112" height="3182" width_o="11112" height_o="3182" data-src="https://freight.cargo.site/t/original/i/8bf2cd927deb1238745ae2d9a2d071170e394be06e50583385d98723d29dbc1b/Artboard.jpg" data-mid="71706736" border="0" src="https://freight.cargo.site/w/1000/i/8bf2cd927deb1238745ae2d9a2d071170e394be06e50583385d98723d29dbc1b/Artboard.jpg" /> 1. Choose the task - manage, delete and edit current content2. Select categoty 3. Edit name4. Delete confirmation page5. Select sub-category6. Edit name 7. Pick a lesson8. Edit / manage quiz9. Confirm to update and publish page &nbsp; 2. Add new lesson <img width="11112" height="1690" width_o="11112" height_o="1690" data-src="https://freight.cargo.site/t/original/i/ec85645b14f17549caa9f2141c553115f48d6e084bc288dcd947947d5786b3d0/Artboard-Copy.jpg" data-mid="71706738" border="0" src="https://freight.cargo.site/w/1000/i/ec85645b14f17549caa9f2141c553115f48d6e084bc288dcd947947d5786b3d0/Artboard-Copy.jpg" /> 1. Choose the task - Add new lesson2. Select categoty 3. Select sub-category 4. Content editing page for lesson5. Confirm to update and publish page 3. Add new quiz <img width="13392" height="1690" width_o="13392" height_o="1690" data-src="https://freight.cargo.site/t/original/i/1cfe006844e94516225ff531cc7bfd435d7c4a022ae3691fc9eaccf219d37db5/3.jpg" data-mid="71706739" border="0" src="https://freight.cargo.site/w/1000/i/1cfe006844e94516225ff531cc7bfd435d7c4a022ae3691fc9eaccf219d37db5/3.jpg" /> 1. Choose the task - Add new quiz2. Select categoty 3. Select sub-category 4. Select one or more lessons5. Content editing page for quiz6. Confirm to update and publish page DESIGN SYSTEM — UI DESIGN Made the UI design for CMS, expand the design system from the style guide created by our designer to the platform <img width="2827" height="1585" width_o="2827" height_o="1585" data-src="https://freight.cargo.site/t/original/i/d5822f68ceccfe8d01278332293e6329b3e872b67a37b39aaa3d956c08acf274/Style_Guide-Copy.jpg" data-mid="71706754" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/d5822f68ceccfe8d01278332293e6329b3e872b67a37b39aaa3d956c08acf274/Style_Guide-Copy.jpg" /> CMS landing page : Content <img width="2400" height="1400" width_o="2400" height_o="1400" data-src="https://freight.cargo.site/t/original/i/33a556a0b680d03770bfee21f65947349629d21e13e19c4a3d6768a91c4d1660/Frame-1.png" data-mid="111678071" border="0" src="https://freight.cargo.site/w/1000/i/33a556a0b680d03770bfee21f65947349629d21e13e19c4a3d6768a91c4d1660/Frame-1.png" /> Tooltips and language selector <img width="2400" height="1400" width_o="2400" height_o="1400" data-src="https://freight.cargo.site/t/original/i/51b4c49a9346f44040cf2f22b3850ade4f83f5285ccd8ab4888c37a407624aac/Frame-5.png" data-mid="111678072" border="0" src="https://freight.cargo.site/w/1000/i/51b4c49a9346f44040cf2f22b3850ade4f83f5285ccd8ab4888c37a407624aac/Frame-5.png" /> Category landing page <img width="2400" height="1323" width_o="2400" height_o="1323" data-src="https://freight.cargo.site/t/original/i/5195bb17939fe39b12a05a84e6d3cf50489e9628db6666f0e92d0e472a47ef5b/Frame-6.png" data-mid="111678073" border="0" src="https://freight.cargo.site/w/1000/i/5195bb17939fe39b12a05a84e6d3cf50489e9628db6666f0e92d0e472a47ef5b/Frame-6.png" /> Content editing page <img width="2400" height="1322" width_o="2400" height_o="1322" data-src="https://freight.cargo.site/t/original/i/21b0241bfd47d574ebd04c32a8cae1f2ead9898f1a8cc369e303ce0367d62e57/Frame-7.png" data-mid="111678074" border="0" src="https://freight.cargo.site/w/1000/i/21b0241bfd47d574ebd04c32a8cae1f2ead9898f1a8cc369e303ce0367d62e57/Frame-7.png" /> USER TESTING AND POST LAUNCH DESIGN RESEARCH Before Hoppy was launched, I ran a user testing session, interviewed with nine users with The STAR method for Hoppy App. It was very fun and insightful. I analyzed the result and made a report. Create effective data visualizations to communicate with stakeholders <img width="1984" height="1136" width_o="1984" height_o="1136" data-src="https://freight.cargo.site/t/original/i/7af5a933713f86de899b3bcee20393c83d8a0494a2cf59446f145adfe604471e/Bitmap.jpg" data-mid="71706750" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/7af5a933713f86de899b3bcee20393c83d8a0494a2cf59446f145adfe604471e/Bitmap.jpg" /> After shared the User Testing result with the Hoppy team, we rated the severity of the problems and fixed the most critical ones. And we started to make a plan for phase 2. _Download on the App Store ︎ Back to top&nbsp;︎ &nbsp; https://leslieslin.com/JnJPro Sat, 20 Jun 2020 23:12:16 +0000 Les https://leslieslin.com/JnJPro Johnson &amp; Johnson Vision - Enterprise Products and User Registration Flow Redesign Designing for enterprise&nbsp;products vs. consumer products is not as different as you presume. In the end, it’s the best product and UX that wins, rather than the best sales and lobbying with C level executive at the company. Here is a group consulting and design work at Deutsch for Johnson &amp; Johnson Vison. I was mainly tasked to improve the internal tool, staff empowerment dashboard, and content site redesign. I also redesign a new single platform sales dashboard for Acuvue and registration flow for J&amp;J Vision. MY ROLE&nbsp; 01 J&amp;J Registration Flow Revised the logged-in admin landing page to indicate that there are users awaiting approval to access orderingIntegrated registration flow with Surgical, ECP (Eye Care Professional) and O.D. (Doctor of Optometry).Created over 40 pages of wires in 3 months. 02 Acuvue Engine Created user flows to depict the various ways users can access data points and designed dashboards from main portal views 03 Optimized J&amp;J Vision Designed Lens Calculator for presbyopic patients Rebate Center product design New Learning Center design for login and logout/new userhttps://www.jnjvisionpro.com/ 01_J&amp;J VISION REGISTRATION FLOW Background Our goal for JJVPro is to position the platform in the minds of eye care professionals as the go-to platform for all their vision care practice needs. The Assignment Redesign the registration site linking experience offered to ECPs as they first engage with the platform to increase successful and completed registrations – including linking to their existing or new ordering account. &nbsp; Challenges and opportunities Integration To integrate with Surgical, the first step of registration should be to ask a user if they’re an ECP or an OD – from there we’ll drive them to either the regular registration or the surgical registration Optimization We need to optimize the Order Center account linking process to avoid the “black hole” Define and smooth the complex user flow We should consider users who only complete the required part of registration and avoid linking their practice to find a way to bring them back to complete registration Efficiently utilized notification center Adding the Order Center button notification icon to all user homepages and using tailored error messages for users UX Research The best why to solve complex UX problem is to use user flow diagram. To better integrate eCommerce, learning center and reward system into new JnJ Vision, I worked with my team in order to declare assumptions for us to create a starting point. <img width="1400" height="542" width_o="1400" height_o="542" data-src="https://freight.cargo.site/t/original/i/f6f59dd373321f2312bf3a036ea2294e247ed08cbf14da4466d98ffd3937f9ba/Screen-Shot-2020-06-22-at-5.22.33-PM.png" data-mid="75369010" border="0" src="https://freight.cargo.site/w/1000/i/f6f59dd373321f2312bf3a036ea2294e247ed08cbf14da4466d98ffd3937f9ba/Screen-Shot-2020-06-22-at-5.22.33-PM.png" />I studied usabality report that illustrate why users are taking certain actions in our product. And joined workshop in Jacksonville, FL, with key stakeholders as to how create a new registration flow will affect J&amp;JVision's performance. &nbsp; User Persona <img width="700" height="360" width_o="700" height_o="360" data-src="https://freight.cargo.site/t/original/i/4640b1b101a7603ac1acab76dd940214160a3747bf878e764f798c0c0ba06d64/Bitmap.png" data-mid="75371123" border="0" src="https://freight.cargo.site/w/700/i/4640b1b101a7603ac1acab76dd940214160a3747bf878e764f798c0c0ba06d64/Bitmap.png" /> Discover Pain Points by Using User Persona <img width="700" height="360" width_o="700" height_o="360" data-src="https://freight.cargo.site/t/original/i/b9ccb164a49ca1d25a0904c171a644443bb432b317a3702aa0636b6c79edda3d/Bitmap.jpg" data-mid="75372513" border="0" src="https://freight.cargo.site/w/700/i/b9ccb164a49ca1d25a0904c171a644443bb432b317a3702aa0636b6c79edda3d/Bitmap.jpg" /> <img width="700" height="360" width_o="700" height_o="360" data-src="https://freight.cargo.site/t/original/i/a72ac55ccc0063cbcf7280e26554f850009bdd151802dd3f0ad02219eeff02b9/Bitmap.jpg" data-mid="75372500" border="0" src="https://freight.cargo.site/w/700/i/a72ac55ccc0063cbcf7280e26554f850009bdd151802dd3f0ad02219eeff02b9/Bitmap.jpg" /> Validate Assumptions Based on our initial findings and concepts, I came up with different sketches to get a breadth of design ideas. Then we regrouped to discuss these designs and come up with low-fi prototypes for further iterations. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/2aa5d0fd0e6f60b9f3fa958b8bb4322105f5d808ae28367e4e8280b4b4efefb9/IMG_1788.JPG" data-mid="75374590" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/2aa5d0fd0e6f60b9f3fa958b8bb4322105f5d808ae28367e4e8280b4b4efefb9/IMG_1788.JPG" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/885f6f8f0ecfcb2dbc2ea1c97d68a2e08650d4afd05b8302e7db27d4ea05aaa2/IMG_1789.JPG" data-mid="75375218" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/885f6f8f0ecfcb2dbc2ea1c97d68a2e08650d4afd05b8302e7db27d4ea05aaa2/IMG_1789.JPG" /> <img width="3024" height="4032" width_o="3024" height_o="4032" data-src="https://freight.cargo.site/t/original/i/80efcc74c177810ab283bac924982d35d6803c3df067e66a8ab10d3cfd1faa5c/IMG_1795.JPG" data-mid="75374744" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/80efcc74c177810ab283bac924982d35d6803c3df067e66a8ab10d3cfd1faa5c/IMG_1795.JPG" /> User Flow Design&nbsp; Below are theree key users with different entry points NEW USEREXSISTING USERSURGICAL <img width="1636" height="922" width_o="1636" height_o="922" data-src="https://freight.cargo.site/t/original/i/b4ed2973dd79417332a94ef5519d548a044111c5ebfd9dead614093cf61ba851/User-Flow-1119.jpg" data-mid="75371592" border="0" src="https://freight.cargo.site/w/1000/i/b4ed2973dd79417332a94ef5519d548a044111c5ebfd9dead614093cf61ba851/User-Flow-1119.jpg" /> Out of the pain points and features we discussed, I digitized 3 solutions with wireframe for new registration flow. Primary User Flow A :&nbsp;User Choice <img width="2434" height="1720" width_o="2434" height_o="1720" data-src="https://freight.cargo.site/t/original/i/f787ad59742a5a74cd098eb2bb80c464db422daf7dab5f6b9bb3d0d18b52c85b/04---Practice-Credentials.jpg" data-mid="75376410" border="0" src="https://freight.cargo.site/w/1000/i/f787ad59742a5a74cd098eb2bb80c464db422daf7dab5f6b9bb3d0d18b52c85b/04---Practice-Credentials.jpg" /> <img width="2434" height="1720" width_o="2434" height_o="1720" data-src="https://freight.cargo.site/t/original/i/464a8fb84875cc75bc8a29aef1769056dd7724bf26668db59e4c837f007ac098/03---Ordering-Credentials.jpg" data-mid="75376409" border="0" src="https://freight.cargo.site/w/1000/i/464a8fb84875cc75bc8a29aef1769056dd7724bf26668db59e4c837f007ac098/03---Ordering-Credentials.jpg" /> Additional Use Cases/Variations <img width="2457" height="1720" width_o="2457" height_o="1720" data-src="https://freight.cargo.site/t/original/i/a1f158dc9d5b1ac80ebe97416efd9192d29b43544d8455dbb546aac1e0748124/06---Reminder.jpg" data-mid="75376607" border="0" src="https://freight.cargo.site/w/1000/i/a1f158dc9d5b1ac80ebe97416efd9192d29b43544d8455dbb546aac1e0748124/06---Reminder.jpg" /> <img width="2457" height="1720" width_o="2457" height_o="1720" data-src="https://freight.cargo.site/t/original/i/5b735f8e2605c446b8e17341e497ac0e3ad2bfc26abf37aa5d67e30e9f8d98a6/07---Pending.jpg" data-mid="75376608" border="0" src="https://freight.cargo.site/w/1000/i/5b735f8e2605c446b8e17341e497ac0e3ad2bfc26abf37aa5d67e30e9f8d98a6/07---Pending.jpg" /> Primary User Flow B:&nbsp;Start with Ordering Account <img width="2412" height="1720" width_o="2412" height_o="1720" data-src="https://freight.cargo.site/t/original/i/49c26979b3e133640053acf4461aab3f79b75ed091264d665aeb909499f9b3fc/09---Ordering-Credentials_B.jpg" data-mid="75376614" border="0" src="https://freight.cargo.site/w/1000/i/49c26979b3e133640053acf4461aab3f79b75ed091264d665aeb909499f9b3fc/09---Ordering-Credentials_B.jpg" /> <img width="2412" height="1720" width_o="2412" height_o="1720" data-src="https://freight.cargo.site/t/original/i/7a33df014eddc6a8d0ee81660f68030256fa477904e82b5e72f2789227276e4d/10---Ordering-Credentials_B.jpg" data-mid="75376615" border="0" src="https://freight.cargo.site/w/1000/i/7a33df014eddc6a8d0ee81660f68030256fa477904e82b5e72f2789227276e4d/10---Ordering-Credentials_B.jpg" /> Primary User Flow C:&nbsp;All Fields Shown at Once <img width="2412" height="1720" width_o="2412" height_o="1720" data-src="https://freight.cargo.site/t/original/i/deadf3f90122123575af70586cf049b9ddfb449138aba6a1035a032fbc9f4950/12---Ordering-Credentials_C_Error.jpg" data-mid="75376620" border="0" src="https://freight.cargo.site/w/1000/i/deadf3f90122123575af70586cf049b9ddfb449138aba6a1035a032fbc9f4950/12---Ordering-Credentials_C_Error.jpg" /> <img width="2412" height="1720" width_o="2412" height_o="1720" data-src="https://freight.cargo.site/t/original/i/fdd6f871f5aeafd79eebc62fffd16a217eafc37bf9693a03baa06e5f8037aec6/12---Ordering-Credentials_C.jpg" data-mid="75376621" border="0" src="https://freight.cargo.site/w/1000/i/fdd6f871f5aeafd79eebc62fffd16a217eafc37bf9693a03baa06e5f8037aec6/12---Ordering-Credentials_C.jpg" /> Example of Final Product With Annotations <img width="1270" height="1560" width_o="1270" height_o="1560" data-src="https://freight.cargo.site/t/original/i/1910732a42c6ddc245693afa20277bcd2f177679d95ed708ff5fce0cc4608c45/19-My-Products.png" data-mid="75377414" border="0" src="https://freight.cargo.site/w/1000/i/1910732a42c6ddc245693afa20277bcd2f177679d95ed708ff5fce0cc4608c45/19-My-Products.png" /> <img width="1270" height="1560" width_o="1270" height_o="1560" data-src="https://freight.cargo.site/t/original/i/18eb8cd1c77b6b7d26aba054939777b871953291b50835c342f3609dd40b4e2f/15-My-Practice.png" data-mid="75377385" border="0" src="https://freight.cargo.site/w/1000/i/18eb8cd1c77b6b7d26aba054939777b871953291b50835c342f3609dd40b4e2f/15-My-Practice.png" /> <img width="1270" height="1560" width_o="1270" height_o="1560" data-src="https://freight.cargo.site/t/original/i/f4c7fdbfff87d7bc9a5528aa57547d32a2af607e86ee9abec0abe363cca50911/12-My-Practice.png" data-mid="75377360" border="0" src="https://freight.cargo.site/w/1000/i/f4c7fdbfff87d7bc9a5528aa57547d32a2af607e86ee9abec0abe363cca50911/12-My-Practice.png" /> <img width="1270" height="1560" width_o="1270" height_o="1560" data-src="https://freight.cargo.site/t/original/i/49937d337679113959869ce49a664bbc1d665bec525ed1fc9e50759d4ecbb7f9/11-My-Practice.jpg" data-mid="75377358" border="0" src="https://freight.cargo.site/w/1000/i/49937d337679113959869ce49a664bbc1d665bec525ed1fc9e50759d4ecbb7f9/11-My-Practice.jpg" /> 02_Acuvue Engine Background The Engine is a single platform experience (or is supposed to be) that contains all the clients data from consumer, sales, media, site, etc. It’s purpose to provide a single source of truth and allow the entire organization access to information, moving away from silos and into a full access data lake The Assignment A cohesive visualization and UI for our new engine, with the initial landing page and 6 subsequent landing pages for their current dashboards. A toolkit/style guide for future landing page dev On Engine Landing Page Professional 360MyAcuvue RewardsCRMLink to WebsiteGfK Consumption Initial Landing page-the page that everyone sees upon logging into the system Professional 360*: This US professional view combines multiple data sets combined into a single transactional data view to provide account characteristics for account performance and brand analysis. This view contains RAS, momentum, potential, account segmentation, call frequency and by brand analysis. MyACUVUE Rewards: This view shows the submitted MyACUVUE Rewards. CRM: This view contains CRM email metrics. Paid Media*: Facebook &amp; Instagram: This direct view of Facebook and Instagram paid media provides actual campaign metrics Website: ACUVUE.com: This view is a snapshot of the US consumer facing website ACUVUE.comGfK Consumption*: This view shows JJV US panel results from GfK. Current Engine Portal <img width="1426" height="706" width_o="1426" height_o="706" data-src="https://freight.cargo.site/t/original/i/0f8cb7507f68666fe4011c957713a29b1729e98f24da2a0f25073b96bcd9e12e/Screen-Shot-2020-06-22-at-7.38.26-PM.png" data-mid="75378957" border="0" src="https://freight.cargo.site/w/1000/i/0f8cb7507f68666fe4011c957713a29b1729e98f24da2a0f25073b96bcd9e12e/Screen-Shot-2020-06-22-at-7.38.26-PM.png" /> <img width="1422" height="704" width_o="1422" height_o="704" data-src="https://freight.cargo.site/t/original/i/d572e24158b4086d9beea6fdef6c8d2b8d3967bce78d6bd921172f88391a115e/Screen-Shot-2020-06-22-at-7.38.43-PM.png" data-mid="75378955" border="0" src="https://freight.cargo.site/w/1000/i/d572e24158b4086d9beea6fdef6c8d2b8d3967bce78d6bd921172f88391a115e/Screen-Shot-2020-06-22-at-7.38.43-PM.png" /> User Path&nbsp; Explore the user path that different users take through our app.&nbsp; <img width="1380" height="828" width_o="1380" height_o="828" data-src="https://freight.cargo.site/t/original/i/317d0bf36d90c1133fbae898a3d9e4031be8382fc7ca900cde61a45fdcab3629/Bitmap.png" data-mid="75383434" border="0" src="https://freight.cargo.site/w/1000/i/317d0bf36d90c1133fbae898a3d9e4031be8382fc7ca900cde61a45fdcab3629/Bitmap.png" /> <img width="1380" height="828" width_o="1380" height_o="828" data-src="https://freight.cargo.site/t/original/i/89df6f3870621b83c449d6c9bd0abeaf7548daf075b38e65bfa72cd9ad6f4e79/Bitmap.png" data-mid="75383430" border="0" src="https://freight.cargo.site/w/1000/i/89df6f3870621b83c449d6c9bd0abeaf7548daf075b38e65bfa72cd9ad6f4e79/Bitmap.png" /> User Flow &nbsp; Based on current product and data inputs, I created a userflow in order to better categratize contents and dashboards. <img width="1532" height="826" width_o="1532" height_o="826" data-src="https://freight.cargo.site/t/original/i/5edfcb33cc69881d9c1edf2dcbdef3b1f832f1c92503aa1a55cdb0a422ec0c8d/Engine-User-flow---0822---02.jpg" data-mid="75379216" border="0" src="https://freight.cargo.site/w/1000/i/5edfcb33cc69881d9c1edf2dcbdef3b1f832f1c92503aa1a55cdb0a422ec0c8d/Engine-User-flow---0822---02.jpg" /> Final Product <img width="1024" height="799" width_o="1024" height_o="799" data-src="https://freight.cargo.site/t/original/i/7dac27098e716de0d63fab0911ae2dc501a99fa22730c06a292ea5ac467a38f6/Desktop-Copy-3.jpg" data-mid="75379661" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/7dac27098e716de0d63fab0911ae2dc501a99fa22730c06a292ea5ac467a38f6/Desktop-Copy-3.jpg" /> <img width="1024" height="640" width_o="1024" height_o="640" data-src="https://freight.cargo.site/t/original/i/a5fa59a9201f4fda1950450d87a27048d5afe993dee1b9c9ec8f157165f6ed83/Desktop-Copy-7.jpg" data-mid="75379804" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/a5fa59a9201f4fda1950450d87a27048d5afe993dee1b9c9ec8f157165f6ed83/Desktop-Copy-7.jpg" /> 03_Optimized J&amp;J Vision Background J&amp;J Vision is the professional hub for vision correction, eye surgery, and eye health. Essential online tools and resources for provisioning and enhancing your practice. The goal is&nbsp; to have 15 million new lens wearers by 2020. By achieve this goal,&nbsp; we want to provide a destination that empowers and supports ECPs to offer, sell, and champion our products efficiently. The Assignment Empower professionals and grow PRO relationship&nbsp;Designed Lens Calculator for presbyopic patients Rebate Center product design New Learning Center design for login and logout/new user Website https://www.jnjvisionpro.com/ Wireframe Example&nbsp; <img width="1442" height="4056" width_o="1442" height_o="4056" data-src="https://freight.cargo.site/t/original/i/680c5676407c8b115aabf7c9e360137f85d0c49c5261f98b72004f1e52c112bd/Bitmap.jpg" data-mid="75385207" border="0" data-scale="84" src="https://freight.cargo.site/w/1000/i/680c5676407c8b115aabf7c9e360137f85d0c49c5261f98b72004f1e52c112bd/Bitmap.jpg" /> <img width="642" height="2192" width_o="642" height_o="2192" data-src="https://freight.cargo.site/t/original/i/fc760d4136ad41f3d446e81d5f412a28f246430833d761c7e1db25d03d4ba0de/Bitmap.png" data-mid="75385391" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/642/i/fc760d4136ad41f3d446e81d5f412a28f246430833d761c7e1db25d03d4ba0de/Bitmap.png" /> <img width="642" height="2192" width_o="642" height_o="2192" data-src="https://freight.cargo.site/t/original/i/a7cacd580cda69c6e9bb059f7d265f4dbcdad84f86714c9d83a5dbf52e25fcd3/Bitmap.png" data-mid="75385416" border="0" src="https://freight.cargo.site/w/642/i/a7cacd580cda69c6e9bb059f7d265f4dbcdad84f86714c9d83a5dbf52e25fcd3/Bitmap.png" /> Back to top ︎ &nbsp; https://leslieslin.com/Spotify_News Sun, 25 Aug 2019 19:24:08 +0000 Les https://leslieslin.com/Spotify_News Spotify Newsroom As of Q1/2019, Spotify had 130 million subscribers worldwide. For this newsroom content design project, I collaborated with Spotify team on optimizing for easy social sharing and bringing high-res images and vidoes. Used color, typography, grid, burst and beautiful imagery from Spotify design system to&nbsp;make it easy to drive a story and amplify the brand, Spotify: For the Record. MY ROLE User Experience LeadUI design&nbsp;Responsive web design Interaction Design&nbsp; THE CLIENT Spotify is a music streaming platform developed by Swedish company Spotify Technology, headquartered in Stockholm, Sweden.&nbsp; Spotify goes public on The New York Stock for April 3, 2018. WEBSITE newsroom.spotify.com/ <img width="696" height="466" width_o="696" height_o="466" data-src="https://freight.cargo.site/t/original/i/0c8347a97e68eef4e23d16805de97107bbf210660b40b84417505fae00ad2b02/Group-40.jpg" data-mid="49483166" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/696/i/0c8347a97e68eef4e23d16805de97107bbf210660b40b84417505fae00ad2b02/Group-40.jpg" /> <img width="696" height="466" width_o="696" height_o="466" data-src="https://freight.cargo.site/t/original/i/79973f77c436057c3dacfe284a59faa63cede04a7c3dd24bf8bd6d56a9e24005/Group-39-Copy.jpg" data-mid="49483164" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/696/i/79973f77c436057c3dacfe284a59faa63cede04a7c3dd24bf8bd6d56a9e24005/Group-39-Copy.jpg" /> <img width="696" height="466" width_o="696" height_o="466" data-src="https://freight.cargo.site/t/original/i/a4d9e739c811debacd86b845aa1cc83f67a9ff80e07157a09d0db70fb54419f5/Group-39.jpg" data-mid="49483165" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/696/i/a4d9e739c811debacd86b845aa1cc83f67a9ff80e07157a09d0db70fb54419f5/Group-39.jpg" /> DESIGN PROCESS Before Spotify’s IPO in April, 2018, they wanted us to help build a deeper trust and relationship with customers by creating a newsroom website, “For the Record”. This is an open platform devoted to musicians, listeners and Spotify investors. We can use this site to share Spotify’s company news, music market trends, and company values. 01_Typography Chose the typography family from the Spotify style guidelines. The readability in typography is important, good typography makes the experience of reading pleasant. <img width="755" height="557" width_o="755" height_o="557" data-src="https://freight.cargo.site/t/original/i/cace006c2e87a86752af0d6626d4cc6d6fcef0cc702e6972d34f7558c322e645/Group-47.png" data-mid="49536107" border="0" src="https://freight.cargo.site/w/755/i/cace006c2e87a86752af0d6626d4cc6d6fcef0cc702e6972d34f7558c322e645/Group-47.png" /> 02_Color Palette The color on For the Record supposed to be in line with Spofity style guide but also has its own visual identity. In this phase, use design system for&nbsp;consistency between products. <img width="1510" height="1116" width_o="1510" height_o="1116" data-src="https://freight.cargo.site/t/original/i/a01acaf3d936aa271fcded75a72fa87659ab6b16494ebef4318bf96f4c437e99/Group-29.png" data-mid="49311896" border="0" src="https://freight.cargo.site/w/1000/i/a01acaf3d936aa271fcded75a72fa87659ab6b16494ebef4318bf96f4c437e99/Group-29.png" /> ↳USE DESIGN SYSTEM 03_Interaction Design Homepage&nbsp; After studied Spotify’s design system. I started UX research and competitive analysis.Then I came out with this idea - a " live radio play button" on the homepage.&nbsp; Spotify is a music streaming company, have a play button on their site so spotify can use it to share music they play from the office with their site visitors. This idea fits their brand while makes the site personalized and more engaged. <img width="1510" height="892" width_o="1510" height_o="892" data-src="https://freight.cargo.site/t/original/i/8e1314816cf99349eb4f2ba32b82c7f2c9c242997de02a6430a0a9b0a105ce70/Group-30.png" data-mid="49335563" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/8e1314816cf99349eb4f2ba32b82c7f2c9c242997de02a6430a0a9b0a105ce70/Group-30.png" /> 04_Website UI Design Article Page Continuing the “music play button” idea, this interactive sticky tool bar on article page was another feature I proposed. This tool bar follows the user when they scroll through the article page. User can click on the icons to expend the tool bar and explore the article. This also give the user an digestible overview of essential content in the article. On the top of the tool bar, it has the "play button" from the homepage. And the next four icons are: 1. Highlight quote&nbsp; 2. Notes 3. Relate articles 4. Social share buttons&nbsp; <img width="576" height="603" width_o="576" height_o="603" data-src="https://freight.cargo.site/t/original/i/4afdff40f56369370eee5a700ba840b4dbbe0434e88da58c1868a280716dd03e/Group-9.png" data-mid="49480010" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/576/i/4afdff40f56369370eee5a700ba840b4dbbe0434e88da58c1868a280716dd03e/Group-9.png" /> <img width="576" height="602" width_o="576" height_o="602" data-src="https://freight.cargo.site/t/original/i/b91a6649d1f72291c6524ca041cd77946ce1ad2c6974f420740cf39c532be3ba/Group-17-Copy.png" data-mid="49480011" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/576/i/b91a6649d1f72291c6524ca041cd77946ce1ad2c6974f420740cf39c532be3ba/Group-17-Copy.png" /> <img width="384" height="400" width_o="384" height_o="400" data-src="https://freight.cargo.site/t/original/i/a2232dc72baacb68d4707182625d651f96dc5de789ca403f4c59447880e9cf97/Group-18-Copy.png" data-mid="49480013" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/384/i/a2232dc72baacb68d4707182625d651f96dc5de789ca403f4c59447880e9cf97/Group-18-Copy.png" /> <img width="384" height="400" width_o="384" height_o="400" data-src="https://freight.cargo.site/t/original/i/5f95a0a311a403e4dd7e5194989188ee198d59169aba61449d1fc4a9fa351088/Group-38.png" data-mid="49480014" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/384/i/5f95a0a311a403e4dd7e5194989188ee198d59169aba61449d1fc4a9fa351088/Group-38.png" /> 1. Highlight quote from the article 2. Notes made by editors or generate from wikipedia &nbsp; 3. Related articles for readers 4. List of social share buttons Here is how the interactive sticky tool bar look like on desktop and mobile. <img width="1242" height="656" width_o="1242" height_o="656" data-src="https://freight.cargo.site/t/original/i/ff6c82cd5befe0506726d0db78228df19547cd7bf70b1aaca6fa6c37932a9367/Group-32-Copy.png" data-mid="49477937" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/ff6c82cd5befe0506726d0db78228df19547cd7bf70b1aaca6fa6c37932a9367/Group-32-Copy.png" /> <img width="224" height="462" width_o="224" height_o="462" data-src="https://freight.cargo.site/t/original/i/1f70766a725fed4929df7330b5306fffef4d791ee2e68dd1006225848eea5884/Group-21-Copy.png" data-mid="49481711" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/224/i/1f70766a725fed4929df7330b5306fffef4d791ee2e68dd1006225848eea5884/Group-21-Copy.png" /> WIREFRAMES AND FINAL PRODUCTSome wireframes from design process <img width="1024" height="2194" width_o="1024" height_o="2194" data-src="https://freight.cargo.site/t/original/i/30516af40929a32e0c5df16b28afc393796540115010be60e83bf06a9dc9c4a8/Bitmap.png" data-mid="49482072" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/1000/i/30516af40929a32e0c5df16b28afc393796540115010be60e83bf06a9dc9c4a8/Bitmap.png" /> <img width="320" height="2328" width_o="320" height_o="2328" data-src="https://freight.cargo.site/t/original/i/c9b254a3602eb7525ce2ffe171b73479e84a8fb169e3ae577204c44025623ba6/Bitmap.jpg" data-mid="49490784" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/320/i/c9b254a3602eb7525ce2ffe171b73479e84a8fb169e3ae577204c44025623ba6/Bitmap.jpg" /> <img width="320" height="2291" width_o="320" height_o="2291" data-src="https://freight.cargo.site/t/original/i/a5a66f6fd42853c6ec45671f53547a69cb83d8560f994c6600ef61ad59b2d076/Bitmap.jpg" data-mid="49490783" border="0" data-no-zoom="true" src="https://freight.cargo.site/w/320/i/a5a66f6fd42853c6ec45671f53547a69cb83d8560f994c6600ef61ad59b2d076/Bitmap.jpg" /> ↳05_Homepage Design <img width="2056" height="5184" width_o="2056" height_o="5184" data-src="https://freight.cargo.site/t/original/i/6d0bec59949e40608f5e00f03781f9fa4f1f6abba1a63efc9b178fe46c7d40fc/Artboard-Copy-2.png" data-mid="51470862" border="0" src="https://freight.cargo.site/w/1000/i/6d0bec59949e40608f5e00f03781f9fa4f1f6abba1a63efc9b178fe46c7d40fc/Artboard-Copy-2.png" /> ↳06_Article Page Design&nbsp; <img width="2056" height="3304" width_o="2056" height_o="3304" data-src="https://freight.cargo.site/t/original/i/2c3a0d8f83d4a900bec6367485699f4ce73efc6a78ae00c3c6f36669a639963e/Artboard-Copy-2.png" data-mid="51470638" border="0" src="https://freight.cargo.site/w/1000/i/2c3a0d8f83d4a900bec6367485699f4ce73efc6a78ae00c3c6f36669a639963e/Artboard-Copy-2.png" /> Back to top ︎ https://leslieslin.com/GE-1 Thu, 29 Aug 2019 07:26:50 +0000 Les https://leslieslin.com/GE-1 GE Report SJR helped GE redesign their content site in 2015, and the outcome was a huge success. In 2017, GE Report wanted to redesign the site once more, by providing new the content strategy and create a new reader base - female readers. After some workshops and collaborated with with the GE Report team, we came up with a couple of solutions to surprise their curious readers again. &nbsp; We measured and demonstrate content marketing success by tracking the business goals with possible metrics. MY ROLE User Experience DesignerResponsive web design THE CLIENTGE Reports is a daily news, video and social media hub covering GE’s transformation into the world’s largest digital industrial company.&nbsp; WEBSITE&nbsp; &nbsp; &nbsp; ge.com/reports/ <img width="1084" height="604" width_o="1084" height_o="604" data-src="https://freight.cargo.site/t/original/i/1b77edf256462c12f4e117fa44b4641d43ae3ea99dd7a5a3c2753c8610f619d8/Group-5.png" data-mid="49558812" border="0" data-scale="100" data-no-zoom src="https://freight.cargo.site/w/1000/i/1b77edf256462c12f4e117fa44b4641d43ae3ea99dd7a5a3c2753c8610f619d8/Group-5.png" /> Ideation and research Defining the problem, finding opportunities For 125 years, General Electric operates through more than 15 segments. It was ranked as the thirteenth-largest firm in the U.S. in 2017. All along, it has been known as a daily news, video and social media hub covering GE’s transformation into the world’s largest digital industrial company. Today, it provides all aspects of GE’s business, innovation and digital transformation. We worked closely with GE Report team to create a cohesive product strategy and to produce digital content. After studying the Google analytics report we put on the old GER site, I recognized four groups of audiences: <img width="730" height="290" width_o="730" height_o="290" data-src="https://freight.cargo.site/t/original/i/5d8244b79832ca2019db15d5754cc1c56a429d900229faf58570a022ef722a3e/Bitmap.png" data-mid="49558763" border="0" data-scale="83" src="https://freight.cargo.site/w/730/i/5d8244b79832ca2019db15d5754cc1c56a429d900229faf58570a022ef722a3e/Bitmap.png" /> With little time on my hands, I had to focus on one user scenario. I decided to focus on general GE investors (retail investors) instead of institutional investors, because I think it would cover most of the audiences from Google analytics. OLD GER Homepage <img width="828" height="960" width_o="828" height_o="960" data-src="https://freight.cargo.site/t/original/i/28c81608529a307fa47f335c3a202e0fa0b6798b0b7c786951f5cde9a99e8911/Bitmap.jpg" data-mid="49822410" border="0" src="https://freight.cargo.site/w/828/i/28c81608529a307fa47f335c3a202e0fa0b6798b0b7c786951f5cde9a99e8911/Bitmap.jpg" /> ↳QUANTITATIVE AND QUALITATIVE ANALYSIS <img width="1020" height="590" width_o="1020" height_o="590" data-src="https://freight.cargo.site/t/original/i/3932a568976a732464cc6eb5f0e86a07534805caf68cf62b6a0d64f889bdea7a/Group-25.png" data-mid="49559079" border="0" src="https://freight.cargo.site/w/1000/i/3932a568976a732464cc6eb5f0e86a07534805caf68cf62b6a0d64f889bdea7a/Group-25.png" /> Content Analysis What is it that you are presenting (content) (1 to 3) How well are you presenting it (accessibility) (1 to 3) What set of requirements are you fulfilling (user requirement) (1 to 3) Whether we fulfilled the requirement (success) (0 or 1) <img width="1020" height="590" width_o="1020" height_o="590" data-src="https://freight.cargo.site/t/original/i/c549849b33e37045d35809906bce605eb8365247493488d743d0e435bf439933/Bitmap.png" data-mid="49559082" border="0" src="https://freight.cargo.site/w/1000/i/c549849b33e37045d35809906bce605eb8365247493488d743d0e435bf439933/Bitmap.png" /> Study on content layout and design Newsroom Experience (GE Report page + News release page) Flagship Experience (GE.com) ↳ NTERVIEW THE GER READER Talked with GER readers was helpful. Here are the two major problems I collected from user interview, and I think worth taking note of: <img width="1146" height="590" width_o="1146" height_o="590" data-src="https://freight.cargo.site/t/original/i/fed8292e7e61310f1af39b6f01f89b78cac0f97414b45543aa604b91e109c3a9/Group-26.png" data-mid="49559443" border="0" data-scale="70" src="https://freight.cargo.site/w/1000/i/fed8292e7e61310f1af39b6f01f89b78cac0f97414b45543aa604b91e109c3a9/Group-26.png" /> Wireframes and final product 01 - Homepage The old GE Report page started with an full-width article.&nbsp; Following up with around 60 article then user will finally see an Email/ Newsletter Subscriptions and footer. After user interview and competitors analysis, I proposed we should do an “anti-hero” design on homepage. Instead of showing off one (and usually the most recent article) on the top. I designed the homepage starts with 3 articles in a row . <img width="1326" height="1591" width_o="1326" height_o="1591" data-src="https://freight.cargo.site/t/original/i/d29c2d19d8688e9c4da770330af56c15bc7489e7d480e7ea0d614e2f51259afa/Bitmap.png" data-mid="49982694" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/d29c2d19d8688e9c4da770330af56c15bc7489e7d480e7ea0d614e2f51259afa/Bitmap.png" /> 02 - Article Page We used to have GER article page starts with full width hero image. Following up with article tile, content, more image in full width, tags, related articles, and infinite scroll to more content. From UX perspective, I always found a webpage with article width more than 800 pixel is hard to read. Also, just to align with my homepage design, I proposed to have article title first then following hero image. <img width="1322" height="1164" width_o="1322" height_o="1164" data-src="https://freight.cargo.site/t/original/i/7aee4713f3aef7f034a89b3eb17074ff17984c9ca3a867ca864ec869e8bb5983/Group-3-Copy.png" data-mid="49982890" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/7aee4713f3aef7f034a89b3eb17074ff17984c9ca3a867ca864ec869e8bb5983/Group-3-Copy.png" /> 03 - Landing Page <img width="996" height="1631" width_o="996" height_o="1631" data-src="https://freight.cargo.site/t/original/i/f748e6aae1400fdfc28c4a6f609c12a8c1280eee27af7cf6842b285eb10dd41e/Group-27.png" data-mid="49980692" border="0" data-scale="80" src="https://freight.cargo.site/w/996/i/f748e6aae1400fdfc28c4a6f609c12a8c1280eee27af7cf6842b285eb10dd41e/Group-27.png" /> DESIGN We want the new GE Report be less tech savvy but more life-style. It needs to be cool but not too avant-garde. We determined to create a design that honored the old GE Report and adopt their present strengths. The result is a website with clean, magazine style design with endless opportunities for beautiful imagery to increase the story. Our redesign embraced the goal of making GE Report a daily tech news destination and to attract more female readers. You can see the strategy in action on new GER below. 01_Homepage <img width="1440" height="4936" width_o="1440" height_o="4936" data-src="https://freight.cargo.site/t/original/i/06862ed6fbaa78506a53c729f528aac0f931397122a1b0208af6a4556b912679/Option-2-GE-colors.jpg" data-mid="49822768" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/06862ed6fbaa78506a53c729f528aac0f931397122a1b0208af6a4556b912679/Option-2-GE-colors.jpg" /> 02_Article Page with infinite scroll and sticky bar on right hand side <img width="1440" height="5456" width_o="1440" height_o="5456" data-src="https://freight.cargo.site/t/original/i/70a341a91a0c5c849a4f67bfb0bf40ca6e02c18da12c070f0888a5b9eca546ac/Bitmap.png" data-mid="49981378" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/70a341a91a0c5c849a4f67bfb0bf40ca6e02c18da12c070f0888a5b9eca546ac/Bitmap.png" /> 03_Landing page <img width="1440" height="3802" width_o="1440" height_o="3802" data-src="https://freight.cargo.site/t/original/i/840979ce5aa38f97af95569f5e8485409ededebc9ee6c799bf02fd56825bef04/Category.png" data-mid="49981441" border="0" data-scale="90" data-no-zoom src="https://freight.cargo.site/w/1000/i/840979ce5aa38f97af95569f5e8485409ededebc9ee6c799bf02fd56825bef04/Category.png" /> 04_Search result page <img width="1440" height="3584" width_o="1440" height_o="3584" data-src="https://freight.cargo.site/t/original/i/8c1f8007ad277c65cd168fd922bd1d6db49302405aa264d53070420598253b37/Search.png" data-mid="49981575" border="0" data-scale="90" src="https://freight.cargo.site/w/1000/i/8c1f8007ad277c65cd168fd922bd1d6db49302405aa264d53070420598253b37/Search.png" /> Takeaways Throughout the project, I worked closely with GE Report team and SJR web team, and without the hard work and dedication they poured into the redesigning process, none of this would have happened. Here are four achievements I want to share with you: I designed a delightful reading experience that will attract more female readers&nbsp;We provided the GER team with an article page structure with more flexibilityThis in turn provides a friendly environment for readers to discover exciting new contentThe email subscription sign up was introduced, allowing us to stay connected with our readers Back to top ︎