https://leslieslin.com Les Sat, 20 Jun 2020 23:12:16 +0000 https://leslieslin.com en https://leslieslin.com/Home-1 Mon, 09 Sep 2019 04:23:22 +0000 Les https://leslieslin.com/Home-1 02&nbsp; Case Studies Data driven ideas.Creative solutions. <img width="372" height="442" width_o="372" height_o="442" data-src="https://freight.cargo.site/t/original/i/582096e7ca0eb9cdb3649b652293c3deb3c984ec5d6e8a37b57d83e5c103b29d/Ai-icon-cover.png" data-mid="246360158" border="0" data-scale="89" src="https://freight.cargo.site/w/372/i/582096e7ca0eb9cdb3649b652293c3deb3c984ec5d6e8a37b57d83e5c103b29d/Ai-icon-cover.png" /> Google Pixel CustomizatinAI IconsScaling Generative Personalization for 10 Million Pixel Users Google Pixel AI icons ︎︎︎&nbsp; <img width="240" height="240" width_o="240" height_o="240" data-src="https://freight.cargo.site/t/original/i/e5f77f263e6300c6daf284c466238f981c8b943d4b723f73655da4a227ccb68a/Sneaker2.png" data-mid="178594140" border="0" data-scale="100" data-no-zoom src="https://freight.cargo.site/w/240/i/e5f77f263e6300c6daf284c466238f981c8b943d4b723f73655da4a227ccb68a/Sneaker2.png" /> Sotheby’s The digital transformation of auction housePre-owned and authenticated designer brands on Sotheby’s Marketplace 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" /> IBMUser-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 ︎︎︎ 03 Info + Skills How I work <img width="3583" height="2376" width_o="3583" height_o="2376" data-src="https://freight.cargo.site/t/original/i/c819efe5cdb3c9a0801a04701349b26f2f34f91f8050ef9e5c93be39b430ab4f/49300012.JPG" data-mid="50162941" border="0" src="https://freight.cargo.site/w/1000/i/c819efe5cdb3c9a0801a04701349b26f2f34f91f8050ef9e5c93be39b430ab4f/49300012.JPG" />︎︎︎︎ ︎&nbsp;&nbsp; Creative Solutions&nbsp; Enterprise Products / Concumer Facing products / Internal Management Tools / Mobile APP / Website / UI Design / Design System/ Data Visualization / Exhibition Design︎&nbsp; Skills&nbsp; Design for AI / Agentic UI/ UX Strategy / Agile UX / User Research/ User Interview / User Testing &nbsp; Product Design /HTML / CSS&nbsp; / Figma / Sketch / PS 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. ︎︎ In the fast-moving world of 2026, I make sure the products I build are ready for whatever comes next. SPACE 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 - Sotheby’s&nbsp; -&nbsp;Hoppy CMS&nbsp;-&nbsp;A Day at the Museum&nbsp; -&nbsp;Johnson &amp; Johnson Vision Website1. IBM Skills 2. Spotify Newsroom 3. GE Report 4. Capital Ideas ©2011-2023 LESLIE LINALL RIGHTS RESERVE https://leslieslin.com/ABOUT-1 Thu, 15 Aug 2019 19:41:20 +0000 Les https://leslieslin.com/ABOUT-1 &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 — exhibit 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 - Present 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/ Sketch App/ Adobe Suite/ Unity/ Principle/ Proto.io/ Invision Home ︎ Work&nbsp;︎ 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 ︎ https://leslieslin.com/Museum Thu, 29 Aug 2019 16:54:02 +0000 Les https://leslieslin.com/Museum A Day at the Museum This is my thesis project at ITP. A day at the museum is an interactive screen-based application for art museum visitors to remember and share their museum experience with their friends and family after their visit MY ROLE Ideation, User research, Interview, UX design, Usability testing, Visual design and making responsive web and email. TECHNOLOGY Js/CSS/HTML and json file. Node.js and Express.Js. Heruko THE CHALLENGE&nbsp; Art museum are always looking ways to turn casual visitors to core visitors. But compare to other kind of museums, art museums have been slow to incorporate interactive technology into the museum experience. <img width="1875" height="1417" width_o="1875" height_o="1417" data-src="https://freight.cargo.site/t/original/i/3e2235defca247bc46deff2849c391baebf07959e6957423a49f6118c158930b/COVERVIDEO-17.jpg" data-mid="50044501" border="0" data-scale="100" data-no-zoom src="https://freight.cargo.site/w/1000/i/3e2235defca247bc46deff2849c391baebf07959e6957423a49f6118c158930b/COVERVIDEO-17.jpg" /> RESEARCH — TEST<img width="5000" height="2368" width_o="5000" height_o="2368" data-src="https://freight.cargo.site/t/original/i/727fa3aece963175e2cc16423767a0ab187a3827da8a3030f4a32b3672d26680/MUSEUM_BIG-01_o.jpg" data-mid="50044626" border="0" data-scale="95" src="https://freight.cargo.site/w/1000/i/727fa3aece963175e2cc16423767a0ab187a3827da8a3030f4a32b3672d26680/MUSEUM_BIG-01_o.jpg" />HYPOTHESIS : I visit an art museum at least once a month. I notice that usually art museum visitors don't come alone. a. What are things they can do in pairs or small groups? b. Do they like using kiosks, or using mobile app, or would try some other form factor like a interactive table?c. How can we use technology to enhance their museum experience? Like many visitors, I usually take photos of the art. I also take photos of the signage with information about the art and often collect the information sheets and brochures. a. Why we taking photos in museum? Why #artselfie?b. Do we really look back at the photo in our phone?c. How can we remember the name of our favorite artist/ object? FIELD RESEARCHCase study and participant observation I want to find a way to help museum visitors share their art museum experiences with their friends, so that they can not only talk about it but also have a way remember their visits.After I interviewed a few museum experts and did some readings about museum experience, I have some ideas for my project. I decided to make an installation inside the art museum. Because I believe the physical space plays an important role in museum experience. <img width="5000" height="2790" width_o="5000" height_o="2790" data-src="https://freight.cargo.site/t/original/i/15b0c8cd731b996fb2daa0f8b778ce73d7235882821c979e4255cd8dd56c37ec/Museumimi-02_o.jpg" data-mid="50044837" border="0" data-scale="100" data-no-zoom src="https://freight.cargo.site/w/1000/i/15b0c8cd731b996fb2daa0f8b778ce73d7235882821c979e4255cd8dd56c37ec/Museumimi-02_o.jpg" /> OPPORTUNITY To prove my concept, I also did the survey and got 167 response. Unsurprisingly, making an mobile app doesn't seem to be the best solution for museum visitors. <img width="5000" height="2790" width_o="5000" height_o="2790" data-src="https://freight.cargo.site/t/original/i/40cbd05126471d09a2cef9c20d231b1d3ee374ad163e187ac46d3eda0972cbac/MUSEUM-04_o.jpg" data-mid="50045235" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/40cbd05126471d09a2cef9c20d231b1d3ee374ad163e187ac46d3eda0972cbac/MUSEUM-04_o.jpg" /> <img width="5000" height="2790" width_o="5000" height_o="2790" data-src="https://freight.cargo.site/t/original/i/c41ccc6f381244c991eefedbe586d5cd52470cb2f079de3709bbff9cf9d0c693/MUSEUM-09_o.jpg" data-mid="50045236" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/c41ccc6f381244c991eefedbe586d5cd52470cb2f079de3709bbff9cf9d0c693/MUSEUM-09_o.jpg" /> “Compared to other kinds of museums, like science, history, children’s, and natural history museums, art museums have been slow to incorporate interactive technology into the museum experience.”&nbsp; VISUAL DESIGN &amp; USER TESTING By using a screen-based interactive tool, visitors can re-create and further engage with their museum visits by selecting images of their favorite pieces from the museum's collection, then printing them out as a postcard or emailing them home or to a friend. 01_ Landing page <img width="1471" height="854" width_o="1471" height_o="854" data-src="https://freight.cargo.site/t/original/i/3a8f800121cbdfe413d1b04456401632839f3a0aedafe621425d069af0a79976/MUSEUM_APP-05.jpg" data-mid="50045743" border="0" src="https://freight.cargo.site/w/1000/i/3a8f800121cbdfe413d1b04456401632839f3a0aedafe621425d069af0a79976/MUSEUM_APP-05.jpg" /> 02_ Home&nbsp; <img width="1471" height="854" width_o="1471" height_o="854" data-src="https://freight.cargo.site/t/original/i/591fdeff9ae682c34ad2f75e8f2c4c4650d99a2e71a918f8138e8785eef91ad5/MUSEUM_APP-06.jpg" data-mid="50045754" border="0" src="https://freight.cargo.site/w/1000/i/591fdeff9ae682c34ad2f75e8f2c4c4650d99a2e71a918f8138e8785eef91ad5/MUSEUM_APP-06.jpg" /> 03_ Search and filter&nbsp; <img width="1471" height="854" width_o="1471" height_o="854" data-src="https://freight.cargo.site/t/original/i/f8afa6d7edb9cc1c64d632430a1fc2f17162d11700b538ca161fea187f965948/MUSEUM_APP-07.jpg" data-mid="50045741" border="0" src="https://freight.cargo.site/w/1000/i/f8afa6d7edb9cc1c64d632430a1fc2f17162d11700b538ca161fea187f965948/MUSEUM_APP-07.jpg" />04_ Email sending and confirmation&nbsp; <img width="1471" height="854" width_o="1471" height_o="854" data-src="https://freight.cargo.site/t/original/i/79c02a784eec1972e479a516e68bf81af953ce9b9ab1da4418f45664d4cc7335/MUSEUM_APP-08.jpg" data-mid="50045745" border="0" src="https://freight.cargo.site/w/1000/i/79c02a784eec1972e479a516e68bf81af953ce9b9ab1da4418f45664d4cc7335/MUSEUM_APP-08.jpg" /> Email from "A Day at the Museum" And visitors can send an email or printing out as a postcard in the end. Below is the email the visitor will receive after their art museum visit. From the email, the user will see the date of their visits and related information about their favorite artist and objects. They will also receive info about the art museum, i.e upcoming exhibitions.
 <img width="4089" height="4828" width_o="4089" height_o="4828" data-src="https://freight.cargo.site/t/original/i/448e7abf993059d0a16aaa13b73b7e4ba0e7ffaeb438f683c1cc990ccd135dae/EMAILDESIGN-06.jpg" data-mid="50046207" border="0" data-scale="80" data-no-zoom src="https://freight.cargo.site/w/1000/i/448e7abf993059d0a16aaa13b73b7e4ba0e7ffaeb438f683c1cc990ccd135dae/EMAILDESIGN-06.jpg" /> Demonstration Video Watch me talk about this project ︎ Special Thanks to Sam Slover and my thesis advisor Kathleen Wilson. You can also find the beautiful code is here Back to top&nbsp;︎