https://clairesyoon.com Claire Yoon Fri, 01 Mar 2024 10:21:19 +0000 https://clairesyoon.com en https://clairesyoon.com/ASML Thu, 18 Jan 2024 02:14:07 +0000 Claire Yoon https://clairesyoon.com/ASML <img width="8000" height="3655" width_o="8000" height_o="3655" data-src="https://freight.cargo.site/t/original/i/17abb66e0bfc9707bf84dc37576878de73d2a10a5e63e4bb1f4def18f4831b14/asml-blue-portfolio-02.png" data-mid="202085364" border="0" src="https://freight.cargo.site/w/1000/i/17abb66e0bfc9707bf84dc37576878de73d2a10a5e63e4bb1f4def18f4831b14/asml-blue-portfolio-02.png" /> ASML UI/UX Design, Design system Designed intuitive and user-friendly interfaces for the company's advanced semiconductor manufacturing equipment. At my time at ASML, I worked with the HMI-UX design team to redesign HMI’s scalable design system and as the main designer on the Multi Beam inspection (MBI) team. I collaborated in cross functional teams to help with product development. I am adept at creating and testing new features, by designing mockups for graphical user interfaces in the MBI system. My experience at ASML showcases my ability to lead the redesign of complex systems, resulting in significant improvements such as a 61.1% reduction in user setup time and a 15x throughput increase in the HMI Multi Beam Inspection system Team Development&nbsp;&amp; Engineering Duration09.22-1.24 ToolsFigma Miro This project highlights an internal application. To protect confidentiality, specific details, processes, and data have been adjusted or removed. Every screen was rebuilt in Figma to closely mirror the original designs. All data presented is placeholder data. Key components and screens from this system were also recreated in Sketch to demonstrate cross-tool workflow and design system scalability. Design system This is an example of one of the components used in the ASML design system that I have created<img width="999" height="1081" width_o="999" height_o="1081" data-src="https://freight.cargo.site/t/original/i/cd54627557a8f4d900bd1732a5c898d5316d780aa7a38ec27eba1014f1c5f63a/Colours.png" data-mid="248859884" border="0" data-scale="47" src="https://freight.cargo.site/w/999/i/cd54627557a8f4d900bd1732a5c898d5316d780aa7a38ec27eba1014f1c5f63a/Colours.png" /><img width="999" height="1081" width_o="999" height_o="1081" data-src="https://freight.cargo.site/t/original/i/bbcae3820f00a6ac4cbb5e461aa403eb967138935dc1204ed2338750c968923a/Typography.png" data-mid="248859885" border="0" data-scale="47" src="https://freight.cargo.site/w/999/i/bbcae3820f00a6ac4cbb5e461aa403eb967138935dc1204ed2338750c968923a/Typography.png" /> <img width="1313" height="811" width_o="1313" height_o="811" data-src="https://freight.cargo.site/t/original/i/87e4376dc4d9390ce6e3ae5314c60472fc219d8ba8b5a052ce9d1b6ea0b57f90/Frame-9.png" data-mid="227183503" border="0" src="https://freight.cargo.site/w/1000/i/87e4376dc4d9390ce6e3ae5314c60472fc219d8ba8b5a052ce9d1b6ea0b57f90/Frame-9.png" /> <img width="1313" height="811" width_o="1313" height_o="811" data-src="https://freight.cargo.site/t/original/i/750719c25b125d4b380d5a20c88004e424e282d6d774f5c9f49c0a13156a7f63/Nonmodal-Notification-and-Dialog.png" data-mid="246818626" border="0" src="https://freight.cargo.site/w/1000/i/750719c25b125d4b380d5a20c88004e424e282d6d774f5c9f49c0a13156a7f63/Nonmodal-Notification-and-Dialog.png" /> <img width="1313" height="811" width_o="1313" height_o="811" data-src="https://freight.cargo.site/t/original/i/e86c022a5ddff80169969d0fc5bf04586a6447c1579e9f1a523d944a78eb0552/Frame-8.png" data-mid="227183598" border="0" src="https://freight.cargo.site/w/1000/i/e86c022a5ddff80169969d0fc5bf04586a6447c1579e9f1a523d944a78eb0552/Frame-8.png" /> Main Frame This is the main frame/directory template that I have created where I designed most of the interfaces on for the wafer inspection system<img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/a49673e02b87e99d9db4a4ede634ca2f6559fb1d8e6f106da0f52b7304e02432/home-page.png" data-mid="246819517" border="0" src="https://freight.cargo.site/w/1000/i/a49673e02b87e99d9db4a4ede634ca2f6559fb1d8e6f106da0f52b7304e02432/home-page.png" /> https://clairesyoon.com/Goal-Go Mon, 14 Feb 2022 08:17:01 +0000 Claire Yoon https://clairesyoon.com/Goal-Go <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/edc3674eef690d1b6ecc6a6eaf66c05a66bf31bf2dbebbf594a5af5d8f8e9de5/-Deliverable-3--Design-Case-Presentation---Team-4-Onboarding-2-1.png" data-mid="133523957" border="0" src="https://freight.cargo.site/w/1000/i/edc3674eef690d1b6ecc6a6eaf66c05a66bf31bf2dbebbf594a5af5d8f8e9de5/-Deliverable-3--Design-Case-Presentation---Team-4-Onboarding-2-1.png" /> Goal go UI/UX Design, Research Client: City of Bridges High School A guided goal-setting platform for student-directed learning GoalGo helps students at City of Bridges High School turn their interests, skills, and values into actionable learning goals. The platform guides students through goal discovery, planning, and progress tracking, giving them structure to navigate their learning journey independently. CollaboratorsShang-Yuan Wang, Yinru Sun, Zijing Lu Duration10 weeks ToolsFigma Miro Problem space How might we help students navigate a self-directed learning environment? City of Bridges High School uses a competency-based education model, where students develop skills through personalized learning experiences rather than following a strictly standardized curriculum. For new students, this freedom can make it difficult to decide what to learn, identify meaningful goals, and determine how to get started. The design opportunity: Create enough structure to help students get started without taking away the independence that makes self-directed learning valuable. Design Approach We explored the student onboarding experience to understand the challenges students face when adapting to a new learning environment. Through journey mapping and concept generation, we examined opportunities to support both students setting goals and teachers facilitating the process. We focused on creating a structured experience that helps students move from exploring their interests to defining goals and planning their next steps. The Solution GoalGo is an interactive web-based platform that guides students through goal-setting and helps them manage their learning goals over time. The platform aims to equip students with self directed goal-setting skills that enact long-term benefits. Feature 01Discover and Define Learning Goals GoalGo guides students through a step-by-step process to explore their interests, skills, and values, brainstorm potential goals, prioritize ideas, and define actionable milestones. <img width="3500" height="4358" width_o="3500" height_o="4358" data-src="https://freight.cargo.site/t/original/i/645b62090ddf4282aac763313dc17a42b2ce68ee87475bf94018d24e0279c602/-Deliverable-3--Design-Case-Presentation---Team-4-Onboarding-3-3.png" data-mid="133861388" border="0" src="https://freight.cargo.site/w/1000/i/645b62090ddf4282aac763313dc17a42b2ce68ee87475bf94018d24e0279c602/-Deliverable-3--Design-Case-Presentation---Team-4-Onboarding-3-3.png" /> Feature 02Track your progress towards goals A centralized dashboard helps students review their learning goals, manage schedules, and track progress toward milestones. <img width="3500" height="2102" width_o="3500" height_o="2102" data-src="https://freight.cargo.site/t/original/i/c272956627d28da413d143f916d26a2b689b7a68014f13fa73bb3c4307f99623/-Deliverable-3--Design-Case-Presentation---Team-4-Onboarding-2.png" data-mid="133861391" border="0" src="https://freight.cargo.site/w/1000/i/c272956627d28da413d143f916d26a2b689b7a68014f13fa73bb3c4307f99623/-Deliverable-3--Design-Case-Presentation---Team-4-Onboarding-2.png" /> Feature 03Build your goal library Students can save their goals, revisit earlier goal-setting stages, and review their goal history. This allows them to refine their ideas and adjust their direction as their interests and priorities evolv <img width="1920" height="810" width_o="1920" height_o="810" data-src="https://freight.cargo.site/t/original/i/130233a3f4f6df2b0c94bf7c0964a0a6f41f837de9dc64268ae13a2333a0b9a0/-Deliverable-3--Design-Case-Presentation---Team-4-Onboarding-1-1-1.png" data-mid="133861407" border="0" src="https://freight.cargo.site/w/1000/i/130233a3f4f6df2b0c94bf7c0964a0a6f41f837de9dc64268ae13a2333a0b9a0/-Deliverable-3--Design-Case-Presentation---Team-4-Onboarding-1-1-1.png" /> Design System The core value for our UI design is to make our product become a friendly and supportive sidekick that accompanies the learners during their learning journey. Therefore, we used some illustration and game-like design elements to deliver our visual design in a delightful design language that expresses the joy of learning. Here are our 4 core design principles: Inviting but not overwhelming Casual but not rash Joyful but not entertaining Supportive but not icy <img width="892" height="1146" width_o="892" height_o="1146" data-src="https://freight.cargo.site/t/original/i/83f5cd9b4c3df4fa227b322b3c4d3ce58fae87606a8eeac83648f0b20a365cf1/MacBook-Pro---103.png" data-mid="133861637" border="0" data-scale="38" src="https://freight.cargo.site/w/892/i/83f5cd9b4c3df4fa227b322b3c4d3ce58fae87606a8eeac83648f0b20a365cf1/MacBook-Pro---103.png" /> Research For a more indepth process documentation Click to view our notion&nbsp; <img width="3913" height="1386" width_o="3913" height_o="1386" data-src="https://freight.cargo.site/t/original/i/f3eee812aff07b9e50aed6ec5116e5c911d50a5aacd811899bba1d4602f95930/Frame-7.png" data-mid="133863593" border="0" src="https://freight.cargo.site/w/1000/i/f3eee812aff07b9e50aed6ec5116e5c911d50a5aacd811899bba1d4602f95930/Frame-7.png" /> Concept Generation We mapped the existing student journey to understand the challenges of adapting to a self-directed learning environment. We then explored a vision for a more supportive experience, considering how students, teachers, and the broader educational process connect. By mapping the service and brainstorming potential opportunities, we narrowed our focus to goal-setting: helping students move from open-ended interests to structured, actionable learning plans. <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/5f13ec470fdc5f40668ebc54fc2224421ab3c9975aa7a674086d287ff8801306/Untitled-copy.png" data-mid="133866477" border="0" src="https://freight.cargo.site/w/1000/i/5f13ec470fdc5f40668ebc54fc2224421ab3c9975aa7a674086d287ff8801306/Untitled-copy.png" /><img width="8260" height="4646" width_o="8260" height_o="4646" data-src="https://freight.cargo.site/t/original/i/f5696d28397a2f9036c043808ca4c8f51f28aec9371258f537c6a9fc047ccd0a/Slide-16_9---2.png" data-mid="133866514" border="0" src="https://freight.cargo.site/w/1000/i/f5696d28397a2f9036c043808ca4c8f51f28aec9371258f537c6a9fc047ccd0a/Slide-16_9---2.png" /><img width="8260" height="4646" width_o="8260" height_o="4646" data-src="https://freight.cargo.site/t/original/i/8cb25f6e3c773e6aaa8bae7e0e4c5e9d7a97fa1da2e3cb54c8cd1114a35c8d91/Slide-16_9---3.png" data-mid="133866515" border="0" src="https://freight.cargo.site/w/1000/i/8cb25f6e3c773e6aaa8bae7e0e4c5e9d7a97fa1da2e3cb54c8cd1114a35c8d91/Slide-16_9---3.png" /> Wireframing Translating the concept into a guided experienceWe translated the goal-setting process into user flows and interface wireframes. These flows established how students would move through goal discovery, prioritization, milestone planning, and progress tracking. The resulting interface was designed to make each stage of the process clear while allowing students to revisit and refine their goals over time. <img width="16060" height="10554" width_o="16060" height_o="10554" data-src="https://freight.cargo.site/t/original/i/5938c4f29aae8f97b1383c7bbe99cc8dc573a362640e02f73178c60743d986f0/Frame-1-9.png" data-mid="133866703" border="0" data-scale="81" src="https://freight.cargo.site/w/1000/i/5938c4f29aae8f97b1383c7bbe99cc8dc573a362640e02f73178c60743d986f0/Frame-1-9.png" /><img width="9058" height="5409" width_o="9058" height_o="5409" data-src="https://freight.cargo.site/t/original/i/176c98f60a7506dcc3f3947669b44942897df6be7ead753c3b7da236b054adad/Onboarding---Frame-1.jpg" data-mid="133866673" border="0" data-scale="81" src="https://freight.cargo.site/w/1000/i/176c98f60a7506dcc3f3947669b44942897df6be7ead753c3b7da236b054adad/Onboarding---Frame-1.jpg" /> Feedback &amp; Iteration We presented our GoalGo prototype to students, teachers, and education professionals at City of Bridges High School to gather feedback on the concept and user flow. What worked Reviewers appreciated how the guided prompts broke goal-setting into manageable steps.The ability to revisit goals and saved ideas was well received. What needed improvement Students needed more guidance turning goals into actionable next steps.The dashboard needed a clearer overview of goals and progress.The experience needed to better account for teachers' roles in supporting students. Key takeaway The feedback reinforced our approach to making goal-setting more structured, while revealing an opportunity to extend that support beyond defining goals to help students manage progress over time. Due to the project's limited timeline, we collected feedback through a prototype presentation rather than formal usability testing. Further testing and iteration would be needed to validate the proposed improvements. Reflection This project reinforced the importance of understanding the broader system before designing individual features. Through contextual inquiry, stakeholder research, journey mapping, and service blueprinting, we explored how students, teachers, and the learning environment interact. These insights helped us move beyond designing a standalone goal-setting tool to consider how a structured digital experience could support students throughout their learning journey. The project showed me how research can reveal opportunities that address not just individual user needs, but the relationships and challenges across an entire system. <img width="1440" height="246" width_o="1440" height_o="246" data-src="https://freight.cargo.site/t/original/i/5fc52fbc12af49f5fd2e53ba2ad9a248cbbedf44f8e9f2864f8b329f232ca93b/MacBook-Pro---1.png" data-mid="133863005" border="0" data-scale="85" src="https://freight.cargo.site/w/1000/i/5fc52fbc12af49f5fd2e53ba2ad9a248cbbedf44f8e9f2864f8b329f232ca93b/MacBook-Pro---1.png" /> https://clairesyoon.com/IKEA-Sell-back-Program-Redesign Fri, 01 Mar 2024 10:21:19 +0000 Claire Yoon https://clairesyoon.com/IKEA-Sell-back-Program-Redesign <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/00c951425006a916726305bb721b23504fef39833611c6c774efc05394ba8a9d/1-Cover.png" data-mid="205831485" border="0" src="https://freight.cargo.site/w/1000/i/00c951425006a916726305bb721b23504fef39833611c6c774efc05394ba8a9d/1-Cover.png" /> IKEA Sell-back program Redesign&nbsp; UI/UX Design, Research Design Buddies &amp; Liftyz Innovate 48 Hackathon Winner An interactive and AI-facilitated sell-back process to increase efficiency &amp; task completion rates&nbsp;The goal of this project is to revamp the sell-back and As-Is market purchasing processes for enhanced scalability, usability, and sustainability Collaborators Phoebe Tang Guan Nie Katherine Zhao Yan (Wendy) Wu Ding Li Duration48 Hours ToolsFigma Problem space How might we optimize IKEA's sell-back process for its users to create seamless scalability, reduce labor intensity, and increase task completion rates? The current IKEA‘s sell-back process demands significant manpower and extended processing time, making it hard to scale up. We were tasked with adding new features for customers to easily browse, list, see the missing parts and purchase second-hand furniture online (without visiting a local store). Video Presentation Feature 01Item recognition &nbsp; <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/5bcd2a0aaf637198cfb28c976e9dcb4761b5bd51352a916e9272a3012befde58/15-Key-Feature-pt1.png" data-mid="219572892" border="0" src="https://freight.cargo.site/w/1000/i/5bcd2a0aaf637198cfb28c976e9dcb4761b5bd51352a916e9272a3012befde58/15-Key-Feature-pt1.png" /> Feature 02Categorization guides <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/5056e6df4af97579dad374ebb2504b679fc4a6f18da1ccc785e101f96a4d2254/16-Key-Feature-pt2.png" data-mid="219572913" border="0" src="https://freight.cargo.site/w/1000/i/5056e6df4af97579dad374ebb2504b679fc4a6f18da1ccc785e101f96a4d2254/16-Key-Feature-pt2.png" /> Feature 03Confirmation QR code <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/268fe0146c7ab19068a7e7cb632f59ece3c615de9a87bfb9f895064803b7d03d/17-Key-Feature-pt3.png" data-mid="219572916" border="0" src="https://freight.cargo.site/w/1000/i/268fe0146c7ab19068a7e7cb632f59ece3c615de9a87bfb9f895064803b7d03d/17-Key-Feature-pt3.png" /> Feature 04Multiple items <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/03c5d7a2ef18159af21e7f09dc07045a70ce03ed32e7c9b0f08e661f28c9bd89/18-Key-Feature-pt4.png" data-mid="219572917" border="0" src="https://freight.cargo.site/w/1000/i/03c5d7a2ef18159af21e7f09dc07045a70ce03ed32e7c9b0f08e661f28c9bd89/18-Key-Feature-pt4.png" /> Research <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/21d7de367fa407469551c0dc99ab17da81c5418b35ca444ae4059a859bc57916/5-Research-overview.png" data-mid="219571658" border="0" src="https://freight.cargo.site/w/1000/i/21d7de367fa407469551c0dc99ab17da81c5418b35ca444ae4059a859bc57916/5-Research-overview.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/5d3b4bb19752574aa8c708f8a6e48c6f893f8b6e041636d5a629b85fb7750b5d/7-Problem.png" data-mid="227115510" border="0" src="https://freight.cargo.site/w/1000/i/5d3b4bb19752574aa8c708f8a6e48c6f893f8b6e041636d5a629b85fb7750b5d/7-Problem.png" /><img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/7ee2e83994c0341152116f30545bc85329f4d2dc545150cee862784ad5dba888/8-Research-Insights.png" data-mid="219574486" border="0" src="https://freight.cargo.site/w/1000/i/7ee2e83994c0341152116f30545bc85329f4d2dc545150cee862784ad5dba888/8-Research-Insights.png" /> User Flow Integrating AI technology will accelerate item recognition, condition assessment, and various applications. A streamlined listing process with clear guidelines will keep sellers engaged and more motivated to complete the process. <img width="5500" height="3000" width_o="5500" height_o="3000" data-src="https://freight.cargo.site/t/original/i/7b46b3e314727f80f7c75c2dc78fde3f4e457776471160a27de7b465b8b04b31/task-flow.png" data-mid="219621434" border="0" src="https://freight.cargo.site/w/1000/i/7b46b3e314727f80f7c75c2dc78fde3f4e457776471160a27de7b465b8b04b31/task-flow.png" /><img width="5500" height="3000" width_o="5500" height_o="3000" data-src="https://freight.cargo.site/t/original/i/01e839412ec46b3383e8b4da3f0267f9104be7f702805ea29ae4d07687723ff4/user-flow.png" data-mid="219621438" border="0" src="https://freight.cargo.site/w/1000/i/01e839412ec46b3383e8b4da3f0267f9104be7f702805ea29ae4d07687723ff4/user-flow.png" /><img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/cd194247596303c43541a721220df86fa091c902214ed7aa0692e718d17f0046/12-User-Flow.png" data-mid="219574319" border="0" src="https://freight.cargo.site/w/1000/i/cd194247596303c43541a721220df86fa091c902214ed7aa0692e718d17f0046/12-User-Flow.png" /> Reflection Despite the time constraint to design a project from concept to implementation in less than 48 hours, my team was able to adapt to each other’s workflow and work together in a fast paced manner. If I had more time, developing an AI chatbot adding features to allow users to monitor the whole processing progress. would further help address the users’ needs and increase efficiency. &nbsp; https://clairesyoon.com/Take-me-home Mon, 14 Feb 2022 08:17:02 +0000 Claire Yoon https://clairesyoon.com/Take-me-home <img width="1920" height="1440" width_o="1920" height_o="1440" data-src="https://freight.cargo.site/t/original/i/c39b2482cdd27e556035e7329f37b5f86ca72ba578510555f17c3989ae671439/c50abcb3-271f-463d-870f-0d2bc7c8a1f9_rw_1920.png" data-mid="133525541" border="0" src="https://freight.cargo.site/w/1000/i/c39b2482cdd27e556035e7329f37b5f86ca72ba578510555f17c3989ae671439/c50abcb3-271f-463d-870f-0d2bc7c8a1f9_rw_1920.png" /> Take me home UI/UX Design, Research Redesign the app for the escort system to increase efficiency for both students and drivers. The goal of this project is to redesign the CMU Escort experience to make the service more approachable, usable, and desirable. a Collaborators Jamie Park, Wenqing Yin Duration8 weeks ToolsAdobe CC Miro &nbsp; Problem Space How might we change people’s perception on the escort and optimize the bus routes?CMU Escort is a shuttle bus system that drops off Carnegie Mellon University's community members home safe at night. The escort does not have designated stops: It stops when the bus arrives at a rider's destination point. It is run parallel with CMU's shuttle service from 6:30pm to 11pm and is solely run from 11pm to 6:30am. Despite it being a great idea for service, not many students are aware of this system due to the lack of information. Demo video &nbsp; Research (coming soon) Wireframe <img width="1706" height="1196" width_o="1706" height_o="1196" data-src="https://freight.cargo.site/t/original/i/54b6a7ad608aa5694d871e2f76a55078dcf44fbab78cef63aaa2c18ca88876ff/4b228566-c3bb-4183-8275-8104495bf5ef_rw_1920.png" data-mid="133798553" border="0" src="https://freight.cargo.site/w/1000/i/54b6a7ad608aa5694d871e2f76a55078dcf44fbab78cef63aaa2c18ca88876ff/4b228566-c3bb-4183-8275-8104495bf5ef_rw_1920.png" /> https://clairesyoon.com/AIGA-Census-Data-Vis-1 Wed, 30 Mar 2022 06:07:44 +0000 Claire Yoon https://clairesyoon.com/AIGA-Census-Data-Vis-1 <img width="3654" height="2922" width_o="3654" height_o="2922" data-src="https://freight.cargo.site/t/original/i/b8cf5b3a78b4bb55ea70028d8b7bbf8fa38eeef06a05b08fec99a520bb707c31/mockup-data-vis.jpg" data-mid="137996724" border="0" src="https://freight.cargo.site/w/1000/i/b8cf5b3a78b4bb55ea70028d8b7bbf8fa38eeef06a05b08fec99a520bb707c31/mockup-data-vis.jpg" /> AIGA Census Data Vis Web Design, Data Vis A reflective digital experience visualizing the challenges designers face&nbsp; Through the 2019 AIGA Census data, 9,429 designers participated in informing what is currently going on in the design field during 2019. The interactions encourage users to share their own concerns in their work and allows for a collaborative "posting board" for designers to empathize with, share resources, and learn that the problems they face are shared by their peers: we, designers, are in it together. CollaboratorsJina Lee Raymond Pai Duration7 weeks ToolsFigma HTML/CSS/JS Cinema 4D Problem space How might we explain the misconceptions about design challenges through data based on the type of industry they are in?Our end concept was to use data that helped reflect the challenges that designers currently face and the assumptions that come with them. This decision was made so that users can see this data to evoke empathy and understand that they are not alone in the problems that they face with their work Website Feature 01Login page Users are asked to first add their nickname into the visualization to bring about a more comfortable and personal experience. <img width="2000" height="1136" width_o="2000" height_o="1136" data-src="https://freight.cargo.site/t/original/i/fbaa9800cd4e07673fd2bfd11dfde0cc1d079be361a103a95366ab611daf3122/Screen_Shot_2021-04-02_at_4.27.59_PM.png" data-mid="137998554" border="0" data-scale="63" src="https://freight.cargo.site/w/1000/i/fbaa9800cd4e07673fd2bfd11dfde0cc1d079be361a103a95366ab611daf3122/Screen_Shot_2021-04-02_at_4.27.59_PM.png" /> Feature 02Pick your field Users are able to choose what type of design they are. Hovering over the type of designers, lets the user see different symbols. This introduction is meant to get a better idea of where in the data this user is corelated to. <img width="2000" height="1133" width_o="2000" height_o="1133" data-src="https://freight.cargo.site/t/original/i/4a65d8d84f8eee704fd8be56ce1e771d33ca713c18678e2a7621f54f00a0a90f/Screen_Shot_2021-04-02_at_4.28.10_PM.png" data-mid="137998627" border="0" data-scale="63" src="https://freight.cargo.site/w/1000/i/4a65d8d84f8eee704fd8be56ce1e771d33ca713c18678e2a7621f54f00a0a90f/Screen_Shot_2021-04-02_at_4.28.10_PM.png" /> Feature 03Interactive waves Once the type of designer is chosen, then the users are able to get the top five waves of challenges. Each type of designer has the waves differently! This visual interaction of the waves allows users to get a subtle glimpse of the data. When hovering over a wave, users are given a sticker that explains more about how many designers in their fields agree with them. <img width="2000" height="1136" width_o="2000" height_o="1136" data-src="https://freight.cargo.site/t/original/i/55e2df52295a33137fe10233c15146e3a09ce7ba84d19515c9f23017cc487415/Screen_Shot_2021-04-02_at_4.28.21_PM.png" data-mid="137998628" border="0" data-scale="63" src="https://freight.cargo.site/w/1000/i/55e2df52295a33137fe10233c15146e3a09ce7ba84d19515c9f23017cc487415/Screen_Shot_2021-04-02_at_4.28.21_PM.png" /><img width="2000" height="1133" width_o="2000" height_o="1133" data-src="https://freight.cargo.site/t/original/i/b565e9b12ff3ad10f53a945da15bfac7bcb8f4d285fc7e29cf846b6c08d78459/Screen_Shot_2021-04-02_at_4.28.46_PM.png" data-mid="138000615" border="0" data-scale="63" src="https://freight.cargo.site/w/1000/i/b565e9b12ff3ad10f53a945da15bfac7bcb8f4d285fc7e29cf846b6c08d78459/Screen_Shot_2021-04-02_at_4.28.46_PM.png" /> Feature 04Reflection of your perspective If there is a challenge that resonates with a designer, then they are able to click on it and have a reflective piece. Then after submitting their reflection, then users will be able to see other perspectives that other designers added. <img width="1760" height="1000" width_o="1760" height_o="1000" data-src="https://freight.cargo.site/t/original/i/530fb88f7ba6b5653571563989ad82bad30c3e02a5f3967acc6dbb8060de6f32/Screen_Shot_2021-04-02_at_4.30.51_PM.png" data-mid="138000297" border="0" data-scale="63" src="https://freight.cargo.site/w/1000/i/530fb88f7ba6b5653571563989ad82bad30c3e02a5f3967acc6dbb8060de6f32/Screen_Shot_2021-04-02_at_4.30.51_PM.png" /><img width="1760" height="998" width_o="1760" height_o="998" data-src="https://freight.cargo.site/t/original/i/c5bc3ac7e3a9445f0cebb32a726241f077fbaf1aa8b5b14a7470d0f9adeb86c5/Screen_Shot_2021-04-02_at_4.31.09_PM.png" data-mid="138000299" border="0" data-scale="63" src="https://freight.cargo.site/w/1000/i/c5bc3ac7e3a9445f0cebb32a726241f077fbaf1aa8b5b14a7470d0f9adeb86c5/Screen_Shot_2021-04-02_at_4.31.09_PM.png" /> Design System The main visual focuses on using waves as a metaphor to reflect how designers feel about the challenges they currently face and give them a space to reflect and form agency over their struggles. The design system was thought out to use warm beach tones to evoke comfort in the users. In addition, the serif brings about a sophisticated mood which works well with simple interactions and white space. <img width="1445" height="900" width_o="1445" height_o="900" data-src="https://freight.cargo.site/t/original/i/cb5a013302160fd5c40e577610fd33782db2978aa5b12e48a93323b2c3a0171f/designsysten-1.png" data-mid="138000637" border="0" src="https://freight.cargo.site/w/1000/i/cb5a013302160fd5c40e577610fd33782db2978aa5b12e48a93323b2c3a0171f/designsysten-1.png" /> Research For a more indepth process documentation Click to view our notion&nbsp; Reflection Web has its own affordances that should be emphasized. Because coding was new, it was challenging at first to get everything working. However, after watching multiple tutorials and reading posts about others experience with coding, it was much easier and now something that I am much more confident in. The storytelling of data is important so that users are able to easily identify and understand. It is important to thoroughly understand the data first so that you are able to explain in in a much more unique manner. Content is crucial in influencing an experience in the sense that you need to focus on the hierarchy so that the interactions don’t get lost. Never add elements because you just want to fill up the page. Simplicity is not a bad thing and should not be something that you are afraid of. https://clairesyoon.com/Splash-of-Flavor Wed, 30 Mar 2022 17:02:50 +0000 Claire Yoon https://clairesyoon.com/Splash-of-Flavor <img width="5000" height="3750" width_o="5000" height_o="3750" data-src="https://freight.cargo.site/t/original/i/8a13a7912ed56527a55b07d686cb16f5b506fd57dd027d502427e4efdeb77fe0/poster-mockup-min.png" data-mid="138066157" border="0" src="https://freight.cargo.site/w/1000/i/8a13a7912ed56527a55b07d686cb16f5b506fd57dd027d502427e4efdeb77fe0/poster-mockup-min.png" /> Splash of flavor Branding, Participatory design Branding campaign and asphalt art for a neighborhood safety intervention Splash of Flavor is an asphalt art project and community potluck to bring the community together and promote safety in the five way intersection in Friendship, PA. a CollaboratorsIndividual Duration6 weeks Tools Illustrator Photoshop Figma &nbsp; Overview The Bloomberg Philanthropies Asphalt Art Initiative aims to help cities around the U.S. to improve street safety by revitalizing public spaces through art. In 2020 - 2021, Pittsburgh was chosen as one of the 16 cities to receive a grant for this initiative. Splash of flavor is my proposal that is actually inspired by&nbsp;families gathering at the table to eat a meal and this serves as a metaphor for the community to come together to paint a variety of foods. Asphalt art The street art has a very playful and vibrant mood and is also a formatted like a melting pot with these flavors flowing into each other and overlapping <img width="2779" height="1563" width_o="2779" height_o="1563" data-src="https://freight.cargo.site/t/original/i/3770de30860c515d5fdddafdb25541f56fc580adde479bfcc4b6658c003c3b21/asphalt-2.png" data-mid="138068332" border="0" src="https://freight.cargo.site/w/1000/i/3770de30860c515d5fdddafdb25541f56fc580adde479bfcc4b6658c003c3b21/asphalt-2.png" /> Campaign I designed various brand assets to complement the asphat art and engage the community <img width="16000" height="9000" width_o="16000" height_o="9000" data-src="https://freight.cargo.site/t/original/i/bf01ae7fca6c68dda884ce463a733e621480a385a831a84a8b6744ad90f62cf7/friendship-asphalt-art-presentation2.png" data-mid="138067708" border="0" src="https://freight.cargo.site/w/1000/i/bf01ae7fca6c68dda884ce463a733e621480a385a831a84a8b6744ad90f62cf7/friendship-asphalt-art-presentation2.png" /> Bold saturated colors with a very circular font that pertains to the curves in the splashes<img width="16000" height="9000" width_o="16000" height_o="9000" data-src="https://freight.cargo.site/t/original/i/6556fc70cd2348a7659decbaec4faf1e5cc64fd0502285c3adcdc544a48e9c30/friendship-asphalt-art-presentation4.png" data-mid="138068802" border="0" src="https://freight.cargo.site/w/1000/i/6556fc70cd2348a7659decbaec4faf1e5cc64fd0502285c3adcdc544a48e9c30/friendship-asphalt-art-presentation4.png" /><img width="16000" height="9000" width_o="16000" height_o="9000" data-src="https://freight.cargo.site/t/original/i/c612bde4768ba15d2c29d6894b3045898d3dc018740a7e84394e9860aa08507c/friendship-asphalt-art-presentation5.png" data-mid="138068803" border="0" src="https://freight.cargo.site/w/1000/i/c612bde4768ba15d2c29d6894b3045898d3dc018740a7e84394e9860aa08507c/friendship-asphalt-art-presentation5.png" /><img width="16000" height="9000" width_o="16000" height_o="9000" data-src="https://freight.cargo.site/t/original/i/726e091822d0439310e956593960164a9e2b320d438aed8d9b333aff5f428944/friendship-asphalt-art-presentation6.png" data-mid="138068804" border="0" src="https://freight.cargo.site/w/1000/i/726e091822d0439310e956593960164a9e2b320d438aed8d9b333aff5f428944/friendship-asphalt-art-presentation6.png" /> https://clairesyoon.com/Homepage Wed, 02 Feb 2022 00:23:26 +0000 Claire Yoon https://clairesyoon.com/Homepage Hello, I am Claire!&nbsp;UX Designer based in the bay area, passionate about creating human centered experiences. Previously designed at ASML&nbsp;