https://jennifersiu.com jennifer siu Thu, 13 Mar 2025 17:55:34 +0000 https://jennifersiu.com en https://jennifersiu.com/Product-design Fri, 10 Jan 2025 03:37:54 +0000 jennifer siu https://jennifersiu.com/Product-design <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/5d165569ed7e448aa27c4088050e792541c757a17e1572c425eba5b0290b6c29/Main-image.png" data-mid="226439939" border="0" src="https://freight.cargo.site/w/1000/i/5d165569ed7e448aa27c4088050e792541c757a17e1572c425eba5b0290b6c29/Main-image.png" /> Onboarding new devices How do we introduce new and familiar users to an OTC hearing aid experience and onboard their devices? <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/9d2542371eb70f4638a5a1f3e3bee91c3e586f5cd3c8f85e647d421c3616002e/Main-image.png" data-mid="227044976" border="0" src="https://freight.cargo.site/w/1000/i/9d2542371eb70f4638a5a1f3e3bee91c3e586f5cd3c8f85e647d421c3616002e/Main-image.png" /> Designing a sound profile system Visual language and system for customized sound profiles.&nbsp; <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/913051534fe195d44beaeb2f097024a85fecbda65a687c8b5b9444288d6f9b2f/Main-image.png" data-mid="228331558" border="0" src="https://freight.cargo.site/w/1000/i/913051534fe195d44beaeb2f097024a85fecbda65a687c8b5b9444288d6f9b2f/Main-image.png" /> Building a design system Scaling and creating a design system. <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/937cd5674cb3061f42d7c9a56df508d2de2f65a1047bb23a76004d8d44a16d6b/Deletion-final-designs.png" data-mid="227310208" border="0" src="https://freight.cargo.site/w/1000/i/937cd5674cb3061f42d7c9a56df508d2de2f65a1047bb23a76004d8d44a16d6b/Deletion-final-designs.png" /> Replacing, adding, and mixing sound profiles How do you make the ultimate sound profile to hear clearly? View graphic design projects https://jennifersiu.com/Graphic-design Mon, 03 Mar 2025 17:36:09 +0000 jennifer siu https://jennifersiu.com/Graphic-design <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/d28be1a8c81a7a799b260ae214aafa078d74d7646f649b3c03a9626fe2cc98f3/SFS-1.png" data-mid="227574995" border="0" src="https://freight.cargo.site/w/1000/i/d28be1a8c81a7a799b260ae214aafa078d74d7646f649b3c03a9626fe2cc98f3/SFS-1.png" /> Marketing classical music <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/af1ea6f7590cb0317a4459a54ce8811268c4622026b0667dca7628847a925e15/CCA-animation-1.png" data-mid="227574997" border="0" src="https://freight.cargo.site/w/1000/i/af1ea6f7590cb0317a4459a54ce8811268c4622026b0667dca7628847a925e15/CCA-animation-1.png" />Social media animations <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/28a9c8201eae9a0827076f6c4a582f4ecfc15568410fdf7e0d79fbd04317b680/Interruptions-1.png" data-mid="227574992" border="0" src="https://freight.cargo.site/w/1000/i/28a9c8201eae9a0827076f6c4a582f4ecfc15568410fdf7e0d79fbd04317b680/Interruptions-1.png" /> Creative event program <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/778883f476c5782c5a0ce104308ca7d76841021e45bdb6476b2a94a2e97c65b0/CCA-1.png" data-mid="227574996" border="0" src="https://freight.cargo.site/w/1000/i/778883f476c5782c5a0ce104308ca7d76841021e45bdb6476b2a94a2e97c65b0/CCA-1.png" />Art school poster design <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/db3cab2c6b1890f6100e6bb40dbfd431a1c1a117291d73ed9e8864e31363199b/CCA-instagram-1.png" data-mid="227574993" border="0" src="https://freight.cargo.site/w/1000/i/db3cab2c6b1890f6100e6bb40dbfd431a1c1a117291d73ed9e8864e31363199b/CCA-instagram-1.png" />Creative direction for instagram series <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/7476c93c0dab5b6cc2fd62ffced30f94a93c1354e89b7e1971da7026a998aae4/Lunchbag-1.png" data-mid="227574990" border="0" src="https://freight.cargo.site/w/1000/i/7476c93c0dab5b6cc2fd62ffced30f94a93c1354e89b7e1971da7026a998aae4/Lunchbag-1.png" /> Voting through design <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/cdbf32d00bf0e86c2d6b48537fdf0aa0f2881da61b2748d7860db498a51716b5/Garden-1.png" data-mid="227574991" border="0" src="https://freight.cargo.site/w/1000/i/cdbf32d00bf0e86c2d6b48537fdf0aa0f2881da61b2748d7860db498a51716b5/Garden-1.png" /> Art exhibition marketing View product design projects https://jennifersiu.com/About-1 Wed, 22 Jan 2025 19:15:46 +0000 jennifer siu https://jennifersiu.com/About-1 <img width="2366" height="2886" width_o="2366" height_o="2886" data-src="https://freight.cargo.site/t/original/i/7ae063e159aa8017560a44f01c96ba4f47815b341456da3dc523790efb244341/IMG_6850.jpg" data-mid="225352087" border="0" src="https://freight.cargo.site/w/1000/i/7ae063e159aa8017560a44f01c96ba4f47815b341456da3dc523790efb244341/IMG_6850.jpg" /> Hi I’m Jennifer Siu! I’m a product designer based in Brooklyn, New York. I have a Bachelor of Arts in Architecture at the College of Environmental Design at UC Berkeley. I am mission driven and design for the community—specific to disability-advocacy, youths education, mental health, and the fine arts. I’m excited about:꩜ Making playlists: I’ve been pretending I’ve been asked to play radio shows, and making an abundance of playlists based on my moods. ꩜ Architecture: When I travel, I make it a point to visit my favourite artists’ homes. Recently I visited Georgia O’Keeffe and Luis Barragán‘s homes!꩜ Art: I love going to new exhibits and gallery hopping. Some of my favourite artists are James Turrell and Isamu Noguchi.꩜Random paper crafts: I get very fixated to projects, such as making clamshell boxes. I’m currently working on re-upholstering a vintage giant fan to turn into a piece of art.&nbsp; https://jennifersiu.com/Onboarding-new-devices Tue, 14 Jan 2025 22:19:33 +0000 jennifer siu https://jennifersiu.com/Onboarding-new-devices Onboarding new devices This case study focuses on creating an onboarding experience for new and familiar users who bought our Concha Sol Hearing Aids. Concha Labs <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/fcb385a4283b2844a48e11dda94eb9ce19804e1df7e2da965c811d25451efe3f/Main-image.png" data-mid="226439937" border="0" src="https://freight.cargo.site/w/1000/i/fcb385a4283b2844a48e11dda94eb9ce19804e1df7e2da965c811d25451efe3f/Main-image.png" /> Background and mission The Concha Labs™ App is a hearing aid app that allows users to personalise their hearing straight from home. Our users must purchase our hearing aids, download the app, and then take Soundscope® in order to receive their personalised sound profiles. The hearing aids are Over-The-Counter (OTC) FDA approved. The problem The problem When I joined the team in 2021, the app designs were just a draft on Figma and there was no onboarding. We needed to create an onboarding experience, because whenever users buy our hearing aids, they must connect them to their iPhones through iOS’ MFi connection and Bluetooth. We had many things to consider when designing this experience: How do we empower hearing aid users during this experience?How do we lead users through the process without excessive hand-holding?How do we design for a medical device, while still creating a fun and intuitive onboarding experience?How do we make onboarding familiar and simple for new and familiar users? Onboarding is the first impression of the app, so the experience needed to be as seamless as possible to prevent any returns. &nbsp; <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/d5091c05d5e34bc119eafd1e1f05dc3bea8043a2d5b2a0188e5cf95ba69bd8de/Android-version-1.png" data-mid="226138166" border="0" src="https://freight.cargo.site/w/1000/i/d5091c05d5e34bc119eafd1e1f05dc3bea8043a2d5b2a0188e5cf95ba69bd8de/Android-version-1.png" /> These are the previous Android iterations of the app. Users had to onboard each hearing aid separately, and the visual language of the app felt unfinished and like a wireframe. The problem (cont.)&nbsp; When I joined, we had drafts of Android designs from the previous designer. We learned that we switching from Android to iOS, which would change the entire app and affect onboarding greatly due to the pairing process. Previously, users onboarded each hearing aid separately, but with iOS and updated hardware, we could connect both left and right hearing aids, which cut down onboarding time immensely. My job was to tackle the problems of: Creating an onboarding experience. Transition the app from Android to iOS.Re-design our visual language. Ideation + brainstorming Ideation and brainstorming I led a brainstorm session with the iOS team to discuss any pain points and features that may be impacted. These sessions are always fun, because everyone has a variety of thoughts which allows us to make something amazing in the end! <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/2605ae797f978dfe95b5a04c77d20fcd3ae8565e759bab1aac6e295c7894c663/App-paint-points.png" data-mid="224853654" border="0" src="https://freight.cargo.site/w/1000/i/2605ae797f978dfe95b5a04c77d20fcd3ae8565e759bab1aac6e295c7894c663/App-paint-points.png" /> We set a timer and had our team put down as many pain points they could think of! We then categorised the stickies, discussed general resolutions, and ranked their priority.&nbsp; <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="//freight.cargo.site/t/original/i/e1388be391c59a5fcb3fcfc3eb69d86e302c18cec88d185d9ce9da8277c47dc0/Onboarding-user-flow.png" data-mid="224850753" border="0" style="width: 670.144px; height: 376.956px; display: none;"><img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/1f4647c4e09f7182d37f8082e554e5b8c6c55f20e206de5af7636d5dac95a6fe/Onboarding-user-flow.png" data-mid="224853656" border="0" src="https://freight.cargo.site/w/1000/i/1f4647c4e09f7182d37f8082e554e5b8c6c55f20e206de5af7636d5dac95a6fe/Onboarding-user-flow.png" /> We spent another meeting working on a rough draft of the onboarding user flow, based on our own experiences, ideas, and referencing the Android designs. It was important to me that we innovated our own user flow first before research, to document our ideas without influence. Market research Market research We researched and studied how our direct competitors implemented onboarding to compare and take note of current innovations. We also researched large hearing aid companies to make sure that we met industry standards. While every hardware works differently, it was helpful to see how every company designed differently around their product’s attributes. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/93777aa401e5b46f0dd4e054b8eae9aa734a7d6e9871f64e1061577594223f38/Hearing-aid-onboarding-research.png" data-mid="224931022" border="0" src="https://freight.cargo.site/w/1000/i/93777aa401e5b46f0dd4e054b8eae9aa734a7d6e9871f64e1061577594223f38/Hearing-aid-onboarding-research.png" /> Comparing specific sections, such as the pairing section, was helpful to see how they took users through the Bluetooth pairing flow.<img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/f6056d2bc7247f40392b6da27e84150c874eb1f65f5c9df6c672cc11da9c04db/What-we-liked-from-hearing-aid-research.png" data-mid="224931546" border="0" src="https://freight.cargo.site/w/1000/i/f6056d2bc7247f40392b6da27e84150c874eb1f65f5c9df6c672cc11da9c04db/What-we-liked-from-hearing-aid-research.png" /> We also noted some design that we liked, such as Audifon’s visual display of hearing aids, Eargo’s searching waves, Signia’s reminder, and Audifon’s tour. Market research (cont.) The design of these hearing aid apps often felt very outdated and seemed to target only an elderly audience. We wanted our represention in the hearing aid space to be refined, modern, and inclusive of all audiences.I took some notes on what we could do:More models/photos of hearing aids: Depicting our product accurately with photos and models develops trust with our users. Visuals are important, since our users have hearing loss.&nbsp;Minimal branding: Overwhelming branding can overpower design. I have a “less is more” approach, so when branding elements are in play, they make a bigger impact.<img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/a5bd0e4fbe1a3db1a698b73d651ffa03403ff1ccdff23c5dfbca6296638d3688/Comparison-chart.png" data-mid="224928209" border="0" src="https://freight.cargo.site/w/1000/i/a5bd0e4fbe1a3db1a698b73d651ffa03403ff1ccdff23c5dfbca6296638d3688/Comparison-chart.png" /> I compared the onboarding process from competitor hearing aid companies to see what they prioritised. Though this was helpful, we kept in mind how their product differs from ours! Market research (cont.) Through the comparison chart I noted things I needed to include, such as: Bluetooth pairing requestPermissions (microphone, camera, etc)Troubleshooting The prescription hearing aid companies often did not have information on how to use the hearing aids, likely due to an audiologist in-office sharing that information.&nbsp;Because we were a B2C business, our users skip the audiologist process and can personalise from home. Every hearing aid is different, and I wanted new and familiar users to have a safe and informative experience using our hearing aids.&nbsp; To resolve for this, I included a short tutorial section for the most important hearing aid knowledge, for safety reasons, and created a help section on the website with video and written tutorials.&nbsp; Switch to iOS + creating the user flow From Android to iOS While these design changes were fun to focus on, the biggest change in this project was the switch from Android to iOS.&nbsp;Previously, users had to onboard each hearing aid separately. With more research and time, now we could finally onboard both hearing aids at the same time. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/c5d2738486f8995cc584130c1e8b6878a77b244131595787013af75717c02d60/Left---right-onboarding.png" data-mid="225373999" border="0" src="https://freight.cargo.site/w/1000/i/c5d2738486f8995cc584130c1e8b6878a77b244131595787013af75717c02d60/Left---right-onboarding.png" /> Users had to repeat pairing and configuration twice, even if they only needed one hearing aid. This was difficult because it allowed for many troubleshooting issues, and was very long. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/e490021c04ea4b7821c18f71fffe29c8ac3efe2f7a5e290897633027513511df/Android-iOS-onboarding.png" data-mid="225425747" border="0" src="https://freight.cargo.site/w/1000/i/e490021c04ea4b7821c18f71fffe29c8ac3efe2f7a5e290897633027513511df/Android-iOS-onboarding.png" /> Connecting the hearing aids and pairing them together shortened onboarding! Creating the onboarding user flow After looking through our own draft of the onboarding flow and our market research, the iOS team got together to map out our high-level onboarding flow to start with. Our goals with the user flow were: Keeping it simple and efficientHaving onboarding be quickEducational for first time and familiar users <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/f70436f32108a9fbb5b60acd96ee8e008b2b03ccc9aa613d93553df0e0ee4fe7/High-level-onboarding-flow.png" data-mid="226133990" border="0" src="https://freight.cargo.site/w/1000/i/f70436f32108a9fbb5b60acd96ee8e008b2b03ccc9aa613d93553df0e0ee4fe7/High-level-onboarding-flow.png" /> We came up with a general high-level onboarding flow that highlighted all of the major steps that new users will have to go through. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/8c76d4f15636e700ae81df3a97857d081965939a2991fbe1211bdb99e72a1888/Final-onboarding-user-flow.png" data-mid="226134301" border="0" src="https://freight.cargo.site/w/1000/i/8c76d4f15636e700ae81df3a97857d081965939a2991fbe1211bdb99e72a1888/Final-onboarding-user-flow.png" /> We mapped out the details of this user flow, which we continued to edit throughout the process.&nbsp; Creating the onboarding user flow (cont.) After looking through our own draft of the onboarding flow and our market research, we came up with a high-level onboarding flow that tackled some issues that we resolved by:&nbsp; Educating new and familiar users with our hearing aids and how they work. Every hearing aid is different, and our users needed to know the basics of how to power on their hearing aids before the next step.&nbsp; Pairing and configuring the hearing aids, which requires a quiet environment.&nbsp; Initial explorations + design research Initial exploration and first drafts While the process for every project varies, for this project I began the initial exploration by making small and quick edits to the Android designs, to see how I felt about the existing elements.&nbsp;I made quick changes in the following screens such as: Turning the hearing aids inwards to feel centeredSwitching from square to circle hearing aid buttons to be on brandRemoving the top header and bottom navigationEnhancing Bluetooth searching waves <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/363361eafc704fdb89a948b58a0ae259c109df21ca7881223ce3af25907943b5/First-edits.png" data-mid="226138183" border="0" src="https://freight.cargo.site/w/1000/i/363361eafc704fdb89a948b58a0ae259c109df21ca7881223ce3af25907943b5/First-edits.png" /> Sometimes a complete re-design can be daunting! For this case, I eased myself into the re-design by playing with existing elements to see what their potential was.&nbsp; Design research I like to do another round of research for inspiration, especially for the design phase, to make sure that the final designs are current. Since hearing aids are audio-based devices, it made sense to look at other hearing devices, such as earphones. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/c26c8256a40d0f4446b77556ddb3822f77c1bbc3b474e46ceead1746b0d0a746/Bose.png" data-mid="225149959" border="0" src="https://freight.cargo.site/w/1000/i/c26c8256a40d0f4446b77556ddb3822f77c1bbc3b474e46ceead1746b0d0a746/Bose.png" /> Design research (cont.) What I mainly learned from Bose’s onboarding was that they balanced showing vs telling. Since hearing aid users are hard-of-hearing, it was important to make sure they had clear visuals and copy to onboard their hearing aids correctly.&nbsp;From these designs, we took some notes on what we liked. A foundation of grayscale for a more simple designClean product photosSimple text hierarchyMinimal branding elementsWe were excited to incorporate these notes into our final designs! Refinement in design After playing around with the initial design style, I was ready to do an overhaul. With notes taken from research, there were some design elements I made adjustments such as:Modernizing elements, such as editing button styles from rounded corners to a smaller border radiusFormulating a simple text hierarchy with left aligned text at the bottom of each screen.Changing the background from grey to whiteImages of the product and people to increase trust and a sense of communityGrayscale base with colour when needed, to focus on the onboarding process itselfThese simple changes made a huge difference on the design of the app! <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/9b83b44d9844027ee292b5da3ced1b96451b6bff5b7714aa5411186242dc46fa/Separate-hearing-aids.png" data-mid="226351641" border="0" src="https://freight.cargo.site/w/1000/i/9b83b44d9844027ee292b5da3ced1b96451b6bff5b7714aa5411186242dc46fa/Separate-hearing-aids.png" /> This is an example of both combining the hearing aids for pairing, and also designing for onboarding!&nbsp; Beta + usability testing Internal Beta testing The customer support team ran a beta program of 39, from the ages of 18 to 75. The process of receiving feedback involved A 1-hour unboxing/onboarding call with a member from customer support, our QA engineer, and a member of the iOS team. During this call they would ask questions and document feedback.&nbsp; Customer support schedules a follow up call for more feedback, after the users has used the app for some time.&nbsp;We additionally have Instabug, so users can directly send feedback or ideas through the app. During this process, the customer support team and QA engineer would collect feedback and ideas and have meetings with me and key stakeholders, and create action items from those meetings.&nbsp; Beta testing feedback and how we resolved it One major issue we learned from beta testing, was during our configuration: we learned that despite letting our users know that they need to be in a quiet environment, they would not understand why or would at times talk over configuration. We needed a way to let our users know that they had to be in a quiet environment, so I researched some ideas and options. With our findings, our team landed on creating a noise detection tool because: Animated visuals to help users to understand if they are in a quiet or loud environmentThe visuals also demonstrate the importance of being in a quiet environment I designed a noise detection tool that became red and had amplified visuals when the background was too loud, and included copy to ensure that it was extra clear. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/43fabc955bfdfc2fe3235495cfc10a7f8a9d1b4d7dd9f240128fe8b8719cb4d0/Configuration.png" data-mid="226361976" border="0" src="https://freight.cargo.site/w/1000/i/43fabc955bfdfc2fe3235495cfc10a7f8a9d1b4d7dd9f240128fe8b8719cb4d0/Configuration.png" /> This simple tool allowed our users to understand the importance of being in a quiet environment. FDA Usability Testing During the summer of 2023, we sent our 510k submission to the FDA, which is a premarket submission that demonstrates whether our product is safe, effective, and most importantly, works. WeAfter our submission was approved we went through FDA Usability Testing, which involved observing 15 participants unbox, onboard, and use our product for an hour each. Our customer support team documented the participants’ feedback and brought them back to the team for further discussion, after the testing was over. The&nbsp;Concha Labs™ App and Concha Sol Hearing Aids were FDA approved and were officially Over-The-Counter (OTC) hearing aids as of March 2024!! Key takeaways User error vs app error During the process of both beta testing and usability testing, we needed to determine whether the feedback given was a user error versus an app error. For example, even though we improved our configuration process to remind users to be in a quiet environment, some people still talked through configuration due to the product being something they set up from home and not set up by an audiologist. OTC hearing aids are still newer in the hearing aid space, thus some people do need to adjust to the process, specifically older users. User bias We had some users who were a lot more interested in the product and gave specific feedback often. We appreciated their interest in testing our product, and had to keep in mind their background while gathering information to move forward with what feedback to prioritise. To keep the user bias in check, our customer support team went through every beta video to synthesise what the main issues were. It was important to determine whether the feedback was an actual blocker through looking at data and patterns within all of our users. The final designs The final designs With the updates from beta testing and more internal testing, we were so excited to launch with this onboarding, as we wanted our users to have a good experience and be excited to use our app.&nbsp; <img width="2868" height="1666" width_o="2868" height_o="1666" data-src="https://freight.cargo.site/t/original/i/5defab5b526ec47d9708eada95000eab718d9ee0670f82d3228add8454cc0106/Onboarding-gif.gif" data-mid="227368847" border="0" src="https://freight.cargo.site/w/1000/i/5defab5b526ec47d9708eada95000eab718d9ee0670f82d3228add8454cc0106/Onboarding-gif.gif" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/d7b247c8f6bbebb8a5845a3fc3e6b2df32624d1701146948a69f6b43c330a2e9/Onboarding-intro.png" data-mid="226362196" border="0" src="https://freight.cargo.site/w/1000/i/d7b247c8f6bbebb8a5845a3fc3e6b2df32624d1701146948a69f6b43c330a2e9/Onboarding-intro.png" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/cbc7bc426f331b67944888c1bee4114514e56e22375f9d5348f5a6e422c82ed6/Hearing-aid-tutorial.png" data-mid="226362406" border="0" src="https://freight.cargo.site/w/1000/i/cbc7bc426f331b67944888c1bee4114514e56e22375f9d5348f5a6e422c82ed6/Hearing-aid-tutorial.png" /> <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/e2ac3e8740b58b5d6f1fef16a6f702a7068bfd36d9a9e542be2635be8f577cd6/Pairing-and-configuring.png" data-mid="226362418" border="0" src="https://freight.cargo.site/w/1000/i/e2ac3e8740b58b5d6f1fef16a6f702a7068bfd36d9a9e542be2635be8f577cd6/Pairing-and-configuring.png" /> What’s next We were excited to continue to explore more ways of making onboarding better for new users, but had to work on other projects in the meantime. In the future, I’m excited to develop more innovative features of the app, that allows for more personalisation and efficiency.&nbsp; View the next case study https://jennifersiu.com/Sound-profile-system Fri, 10 Jan 2025 03:37:53 +0000 jennifer siu https://jennifersiu.com/Sound-profile-system Designing a sound profile systemVisual language and system for customized hearing aid sound profiles. Concha Labs <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/48d177b7ca209b48af257390a2314774e01956fe67e5a7cbe808cc936e80f6a2/Main-image.png" data-mid="227044984" border="0" src="https://freight.cargo.site/w/1000/i/48d177b7ca209b48af257390a2314774e01956fe67e5a7cbe808cc936e80f6a2/Main-image.png" /> Background and mission The Concha Labs™ App is a hearing aid app that allows users to personalise their hearing straight from home. Our users must purchase our hearing aids, download the app, and then take Soundscope® in order to receive their personalised sound profiles. The hearing aids are Over-The-Counter (OTC) FDA approved. This case studies focuses on collaborating with multiple teams, to develop product strategy in creating a system for sound profiles, so our users can have a customised way to hear clearly.&nbsp; Product development, handoff meeting, + brainstorming Product development Balancing short-term and long-term product thinking:&nbsp;This re-design of the app was a big project. I understood that we would be focused on solidifying the foundation of what our app is, but also that there may be more features and updates in the future.&nbsp; Our product development flow looked something like this:&nbsp; Handoff meetingBrainstormingDesignTesting + refinementLaunch <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/aadbb3f6051e625e9c5bbeb77d57af7dc059cdff45af921a380113aca86905eb/Product-strategy-flow.png" data-mid="226678343" border="0" src="https://freight.cargo.site/w/1000/i/aadbb3f6051e625e9c5bbeb77d57af7dc059cdff45af921a380113aca86905eb/Product-strategy-flow.png" />This is how the product development flow looked like for this project. While the basis is same for most projects, it really depends on the scope and details of the project itself! The problem I was brought onto the team in 2021, in the beginning stages of the app and during the transition from creating an Android product to an iOS product. This change from Android to iOS was exciting and led to a re-conceptualisation of the entire app. With this opportunity to re-design the app, the main question we needed to resolve was: How do we design a medical app to ensure that it is approachable, efficient, and fosters trust with our users? For this project, we specifically needed to create a system for the concept of sound profiles. Some questions we needed to resolve were: How do we portray the concept of a “linked sound profile”? How do we highlight the different types of sound profiles that we have?And most importantly: How do we visually articulate, and create a system, for the concept of a sound profile, a new concept in the hearing space, that doesn’t exist? My overall responsibilities for this project were to: Create a sound profile system.Visually transition the app from Android to iOS. Re-design our visual language. *This case study will use an example of creating a linked sound profile as a primary focus (a linked sound profile is for both left and right ears) <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/c55d98e434a83218cb44dd11855f426b2792e29e50126d16bebefacc3eff5b63/The-problem.png" data-mid="226745317" border="0" src="https://freight.cargo.site/w/1000/i/c55d98e434a83218cb44dd11855f426b2792e29e50126d16bebefacc3eff5b63/The-problem.png" /> These are the Android iterations of the Concha Labs Hearing Aids App. The concept of having to connect and disconnect each hearing aid separately in order to edit each sound profile was confusing and inefficient, and the visual language of the app was still unclear. Handoff meeting I led the product handoff meeting to learn more, take notes, and to ask questions for this project, with the Product Owners of our Marketing, Audio, iOS teams, and with the CEO. As Lead Product Designer, I both needed to know the possibilities, scope, and any long-term ideas that may impact design. Since I have hearing loss, I also participated in product strategy by testing these audio ideas. &nbsp; Brainstorming In order to design for short-term and long-term product thinking, it was important to gather the Product Owners to document all of their ideas, upcoming projects, and possibilities of what we could do.&nbsp; I would gather all of this information and determine the priority order, and then create action items from this list.&nbsp; <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/73e88897a104b4ecb8eade530a84b41c3e283c99483655d81d3d62ae474b2e9b/Memory-bank-brainstorming.png" data-mid="226574369" border="0" src="https://freight.cargo.site/w/1000/i/73e88897a104b4ecb8eade530a84b41c3e283c99483655d81d3d62ae474b2e9b/Memory-bank-brainstorming.png" /> I led a brainstorming session to talk through this project. This often comprised of: Ideas, concerns, an action-item list, and notes. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/419d39a7c209df3197503f35ac0a04dc8242416e9ce3db2022cc737e70d32e32/More-brainstorming.png" data-mid="224608333" border="0" src="https://freight.cargo.site/w/1000/i/419d39a7c209df3197503f35ac0a04dc8242416e9ce3db2022cc737e70d32e32/More-brainstorming.png" /> We gathered the iOS team to discuss any ideas, concerns, and must-haves for this project. Brainstorming (cont.) It’s always important to me to bring our team together to ensure that everyone’s ideas are heard and considered. We also needed to ensure that the ideas that we had could be implemented.Most of our decisions were determined by a few things: What the audio team was capable of engineeringOur timeline to release our product. My focus was to ensure that the basis of this sound profile system would be a solid foundation for any future updates, and that the way we designed this project would be confident and also modular. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/6a78ced6d7a7afe58737a0150aedf1dc728fdf6096de5ae20352f06447b1a72b/High-level-plan.png" data-mid="226574438" border="0" src="https://freight.cargo.site/w/1000/i/6a78ced6d7a7afe58737a0150aedf1dc728fdf6096de5ae20352f06447b1a72b/High-level-plan.png" /> After listening to the audio team’s detailing of the project, I created a short-term and long-term product timeline. Brainstorming (cont.) After a few rounds of brainstorming and internal research, I came up with a short-term and long-term product strategy. For this meeting, I created a table for definitions so we could all be consistent and on the same page. On the right, I created six paths for how this feature could look like, and highlighted the one we recommended. The green is the MVP phase, blue is the second update,and purple is the third update. Over time, we all agreed that there would be three different sound profiles, and a mute state, all four inserted into the hearing aids’ memory banks: Primary sound profile Noise Comfort sound profile Streaming Comfort sound profile Mute Research Audio research What is a sound profile? I collaborated with the audio team to understand what a sound profile is. I knew that users take Soundscope for each ear, to receive a set of parameters that allows them to hear. We call this a “sound profile”. &nbsp;We determined that . It is essentially a prescription for your ears, to hear clearly. What we came to also understand, is that the sound profile is the foundation of the app. Without the sound profile, the product would cease to exist, and our users would not be able to hear clearly.I met with the audio team throughout the process to receive updates on the audio developments of the projects, further insights on how certain audio features will work, and feedback on designs. It was important for me to create designs that were modular, to attune for current needs and future needs of the product. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/aa1e32bea543b65c1a015dc8f29c3923c35a9a0cdf8b35ce291d9cf1eef914bb/Sound-profile-document.png" data-mid="224610132" border="0" src="https://freight.cargo.site/w/1000/i/aa1e32bea543b65c1a015dc8f29c3923c35a9a0cdf8b35ce291d9cf1eef914bb/Sound-profile-document.png" /> We worked with the audio team to understand what a sound profile is and how we can visually translate the concept in the app. Hearing aid app research With the basis of the project ready, we began to research current hearing aid apps on the market. During this research, I was quick to realise that all the hearing aid apps that we had access to study, had pre-set programs that audiologists often had to program into people’s hearing aids. Because the Concha Labs App is unique in that users do not have to go into an audiologist’s office and can take&nbsp; Soundscope® from home, there were few products we could reference off of the market.&nbsp;We also noted that these designs were often outdated and not intuitive to use. This proved to be exciting as we had the opportunity to design our product from scratch, and to create something that doesn’t exist in the industry yet!<img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/9fb6c3444783963c85d931edadfacf40298b53af325cd14b3f13866bfc842eba/Hearing-aid-companies.png" data-mid="224608931" border="0" src="https://freight.cargo.site/w/1000/i/9fb6c3444783963c85d931edadfacf40298b53af325cd14b3f13866bfc842eba/Hearing-aid-companies.png" /> Four examples of market hearing aid companies’ designs for audio programs. These apps did not allow unlimited sound profiles, and had pre-set settings/programs that one could not edit. Music app research It was helpful to study the hearing aid apps that were out on the market, even though they didn’t have the features that our app had. Moving forward, we looked at music apps to see how they organised and visually represented their audio files. We found this research to be helpful, as while we cannot make any edits to songs themselves, there are many actions involved in music apps that can inform how we could design our product. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/df2aa3d59f0521cbe5934a27b97e098c02bd13ef1689dab64b9fe05dd6bdd65d/Music-app-research.png" data-mid="224613951" border="0" src="https://freight.cargo.site/w/1000/i/df2aa3d59f0521cbe5934a27b97e098c02bd13ef1689dab64b9fe05dd6bdd65d/Music-app-research.png" /> We noted that many music apps followed the concepts of: 1. Having a vertically stacked song library 2. Contextual menus and a bottom sheet for actions for each song 3. Individual screens for information dedicated to each song Wireframing + Design Understanding the project through design Before beginning design, we had to make sure that we understood the audio aspects of the project before translating them into design. Here were some things that we knew we would have to integrate into this project: Four memory banks: Users can switch easily through four memory banks in their hearing aids. We can put any set of parameters in those memory banks. Mute functionality: This is helpful for if users need to mute but don’t want to take off their hearing aids. Sound profile variations: We knew that there would be different types of sound profiles eventually. I began by designing for a basic sound profile first, since it was the foundation of the app. To do this, we had to understand the concept of a linked sound profile: <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/2154d1d604e1aece12e2db86e8fa3f83613e4748db72a9c0f206712c47e98fa5/How-to-get-a-sound-profile.png" data-mid="226572495" border="0" src="https://freight.cargo.site/w/1000/i/2154d1d604e1aece12e2db86e8fa3f83613e4748db72a9c0f206712c47e98fa5/How-to-get-a-sound-profile.png" /> Essentially, a sound profile design must accommodate for being linked, left-only, or right-only. Understanding the project through design (cont.) During this process, we still collaborated with the iOS and audio team to work on features and learn updates to this project. Through this collaboration, we resolved the factors that we had previously, which were:Four memory banksMute functionality Sound profile variationsBy combining all of these functionalities together, we created a feature that we called “Favorites.” Essentially, users will have have these sound profiles automatically slotted into their memory banks after taking Soundscope™, as well as Mute automatically slotted.&nbsp; We also learned that the audio team decided that the three sound profile variations would be: Primary Noise Comfort Streaming Comfort <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/98534f7357bcee49b8a44473f6ee7af01da54f90023e3acfeb8a14eeb20a72fd/Memory-banks.png" data-mid="226746568" border="0" src="https://freight.cargo.site/w/1000/i/98534f7357bcee49b8a44473f6ee7af01da54f90023e3acfeb8a14eeb20a72fd/Memory-banks.png" /> For this project, we knew that we could slot sound profiles into their memory banks. That way users can switch sound profiles easily with and without the app!<img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/5f3febb447ab5091f947409f4c8a05cac07de22283fcb1783437a382449bdcab/Memory-bank-user-flow.png" data-mid="226747384" border="0" src="https://freight.cargo.site/w/1000/i/5f3febb447ab5091f947409f4c8a05cac07de22283fcb1783437a382449bdcab/Memory-bank-user-flow.png" />We discussed how “Favorites” would look like short-term and long-term. Understanding the project through design (cont.) Through discussing this feature with the teams, I knew that we needed some sort of visual indication on the sound profile, to show that sound profile was either In a Favorite (previous called memory bank)A sound profile variation Muted or not muted It was clear to me that we needed some sort of tag or mode indicator! Wireframing The Android designs accommodated for engaging with the left and right hearing aid separately, which led to long and laborious processes such as onboarding or pairing the devices. After the transition to iOS, the iOS engineers developed a way to internally link the hearing aids, which made using the app much more efficient and quick.Before diving into the complete redesign of the app from Android to iOS, I&nbsp; worked on a few iterations and wireframes of what this system could look like. These ideas were never implemented, but were helpful in solidifying our product strategy. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/a93b8ba6fec5c518d4b1bb7ff477c56d92701fd89eaf262e16e3142a60280212/Versions-of-sound-profiles.png" data-mid="226745322" border="0" src="https://freight.cargo.site/w/1000/i/a93b8ba6fec5c518d4b1bb7ff477c56d92701fd89eaf262e16e3142a60280212/Versions-of-sound-profiles.png" /> During our time designing for Android, we had a few changes to the app that led to quick re-designs of the sound profile and the sound profile library. These ideas were never implemented, and these designs were drafts. Wireframing (cont.) As the concept of our product became clearer, we were able to create the fundamentals of how we believed a sound profile to both look and be utilised. We understood that the sound profile component must have:A visual element anchored to the left to display whether the sound profile is a left, right, or both left and right sound profile.The sound profile name&nbsp; Date of creationContextual menu for actionsA section for tags I studied what music and audio-based apps were doing to see what worked for them, and what we could take inspiration from, in order to build the foundational wireframe for our sound profile.&nbsp; <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/3f62acf6cd095a5f45384e669d291241064997f9f9d61286951282c39cc4a436/Foundation-of-sound-profile.png" data-mid="226745327" border="0" src="https://freight.cargo.site/w/1000/i/3f62acf6cd095a5f45384e669d291241064997f9f9d61286951282c39cc4a436/Foundation-of-sound-profile.png" /> By looking at our research and own iterations of similar concepts, we determined a foundation for the concept of a “sound profile.” <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/7a6e592e08ade759cd450580b211eb4d26f156df0a123642793fdd6b3370be44/Wireframes.png" data-mid="226745458" border="0" src="https://freight.cargo.site/w/1000/i/7a6e592e08ade759cd450580b211eb4d26f156df0a123642793fdd6b3370be44/Wireframes.png" />Wireframing is one of my favourite parts of the design process! I got to play with different ideas and see how the designs will work. Wireframing (cont.) Once I got the foundation of the wireframe completed, I played with how the sound profiles would look like in context. I knew that we would have the sound profiles in three areas (minimum!):&nbsp; 1. In the sound profile library 2. In a memory bank feature that would eventually be called “Favorites”&nbsp; 3. In bottom sheet modals for another feature It was important that the sound profiles exist naturally in all of these spaces. What may look good solo, may not look good stacked or in other contexts! <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/716c3019969704d26f944ed8e92f72d945dcbf1fb945044fe8e9c666de7c7ce4/Library-favorites-wireframes.png" data-mid="226828131" border="0" src="https://freight.cargo.site/w/1000/i/716c3019969704d26f944ed8e92f72d945dcbf1fb945044fe8e9c666de7c7ce4/Library-favorites-wireframes.png" /> It was important that the sound profile would be modular throughout the app, so we wireframed how this would look like. Wireframing (cont.) While we had a brief idea of what the sound profiles would look like in the app, we wireframed these ideas to make sure that they would work. The biggest concern was making sure that the sound profiles would be understood by users in our Favorites feature (more on this later in the case study!). Design the sound profile With this foundational wireframe, I took this and began iterating. We maintained the concept of the sound profile existing as a card, as we knew we would need the sound profile in three states: Not-synced:&nbsp;In-active, users are not using the sound profile. Synced:&nbsp;Active, users are currently using the sound profile. Selected: When the sound profile has been selected by the user. I also knew that this design had to be modular for our Favorites feature as well.&nbsp; <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/b7cdbaddbe1e5a47a7c14464dd2f45a2e2e8b0c9fa975fdb4413271f511c6d03/Iterating-on-sound-profile.png" data-mid="226812636" border="0" src="https://freight.cargo.site/w/1000/i/b7cdbaddbe1e5a47a7c14464dd2f45a2e2e8b0c9fa975fdb4413271f511c6d03/Iterating-on-sound-profile.png" /> By making minor adjustments to the design, we ended up with something that we made sense! <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/fc02f96889e82b41316016f2d987fd180d290ca145e36bee78ebe6a1ec2fa19f/Designed-in-context.png" data-mid="226812669" border="0" src="https://freight.cargo.site/w/1000/i/fc02f96889e82b41316016f2d987fd180d290ca145e36bee78ebe6a1ec2fa19f/Designed-in-context.png" /> I vertically stacked the sound profiles and put them in context of the app to see how they worked. Design the sound profile (cont.) Since we created the basis of the design, we needed to make some variants of it:&nbsp; Linked, Left-only, and right-only sound profiles: To indicate if the sound profile is only a left, only a right, or both a left and right sound profile. Sound profile mode tags: To indicate which mode the sound profile is. States: To visually represent if the sound profile is currently being synced, not synced, or selected. Modes: Light and dark modes. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/ab191d47c5d2848aed1235df312c7464b70b89ec79817fef9c006c177157fb50/Sides-and-tags.png" data-mid="226811363" border="0" src="https://freight.cargo.site/w/1000/i/ab191d47c5d2848aed1235df312c7464b70b89ec79817fef9c006c177157fb50/Sides-and-tags.png" /> There are a few elements at play, so I separated the sound profile by top and bottom to indicate different variables. We chose green, purple, and orange as our tag colours, to make a clear distinction as blue, red, and yellow are already our hearing aid and brand colours.<img width="2480" height="1368" width_o="2480" height_o="1368" data-src="https://freight.cargo.site/t/original/i/8cdaf48457c89b6f48a63bf281db53906f294b3e159724129087bfb1689538f0/ScreenRecording2025-02-18at12.02.30PM-ezgif.com-crop-video.gif" data-mid="226825929" border="0" src="https://freight.cargo.site/w/1000/i/8cdaf48457c89b6f48a63bf281db53906f294b3e159724129087bfb1689538f0/ScreenRecording2025-02-18at12.02.30PM-ezgif.com-crop-video.gif" /> Sofía Díaz Mendiburu worked on light and dark mode for our components. She did an amazing job! Design the sound profile (cont.) To build our our state variants, I went back to the wireframes to build out how the various states looked like stacked. I knew we needed our users to see what sound profile was already synced (active state), and if they were to switch sound profiles, they would have to select.&nbsp; <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/e8ee883fbee79fbf69cf8a170db1d36ca11ecdd4dc4c2f158e081fb92d2adc5b/Bottom-sheet-wireframes.png" data-mid="226829154" border="0" src="https://freight.cargo.site/w/1000/i/e8ee883fbee79fbf69cf8a170db1d36ca11ecdd4dc4c2f158e081fb92d2adc5b/Bottom-sheet-wireframes.png" /> I used yellow (our brand colour) selectively as yellow can be hard to read. However, it works fine as an active state as filled colour!&nbsp; <img width="2365" height="1329" width_o="2365" height_o="1329" data-src="https://freight.cargo.site/t/original/i/1fb32189493d2a505822bd8ff4e6b4219f69646599397b5e902f2e26f6586482/Bottom-sheet.gif" data-mid="226829697" border="0" src="https://freight.cargo.site/w/1000/i/1fb32189493d2a505822bd8ff4e6b4219f69646599397b5e902f2e26f6586482/Bottom-sheet.gif" /> Designing the Favorites using sound profiles Throughout this process, we knew that we would have to design for Favorites. While designing, we played with ideas for what this could look like, to ensure that our sound profile designs were modular. We needed a way to visually show people that: There are four favorites, three for each profile mode and mute The favorites are fixed to their profile modes According to our product meetings, we knew that the favorites may not always be fixed to their profile modes, so we also designed with these variables in mind!For the Favorites feature specifically, we iterated as much as possible on how the sound profile would look like. This was important because we needed our users to know that these sound profiles were in the actual hardware of their hearing aids, and they could toggle between them without the app. <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/12f676b771b49c48faa3c3af87120288e830331daf1b6a7d58ccc516bb154e57/Favorites-ideas.png" data-mid="226831411" border="0" src="https://freight.cargo.site/w/1000/i/12f676b771b49c48faa3c3af87120288e830331daf1b6a7d58ccc516bb154e57/Favorites-ideas.png" /> It was important to try out different ideas to see what worked best! This project took about three years and saw many iterations of other projects in the works.&nbsp; Designing the Favorites using sound profiles (cont.) The nature of the work we did involved a lot of communication and collaboration with the audio team, as they worked on engineering a feature. We worked with them to continue to understand the audio aspect of the project, as we felt that we could incorporate themes and approaches into the way we designed.When the audio team mentioned that the Favorites were like “slotting a sound profile into a memory bank”, we immediately thought of matchboxes and began iterating. <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/d05f1dec4cdb402f045be7ed7dc55e704e78deeae324b12c829640a440ba5f2b/Matchbox.png" data-mid="226835293" border="0" src="https://freight.cargo.site/w/1000/i/d05f1dec4cdb402f045be7ed7dc55e704e78deeae324b12c829640a440ba5f2b/Matchbox.png" /><img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/86acc8c19b14ae2685a8bab5da5f15b42c33c348ab7af05aba66d36dbb1485ac/Favorites-iterations.png" data-mid="226831607" border="0" src="https://freight.cargo.site/w/1000/i/86acc8c19b14ae2685a8bab5da5f15b42c33c348ab7af05aba66d36dbb1485ac/Favorites-iterations.png" /> Sofi and I iterated on the Favorites designs for a while. It was important to try out as many options as possible. &nbsp; Designing the Favorites using sound profiles (cont.) When iterating, I used three steps for this project: Structure: Before thinking about any other garnishes, we needed to work on a structure of the design that worked best. Variables: In our case, we had to design for three sound profile modes and mute. It was important to consider this and many questions came up (what order should they be in, what do we call them, etc?) Garnish: Design with maximalism in mind, to try everything possible! At times I work all three at the same time as one idea can often influence another (and I like to capture the ideas immediately) but in general this order works best.&nbsp; <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/3ad4ab0b243a6d86a9fd62d06047a07b827f714ad95e7a7f1aa10fd78e39053c/Memory-bank-comparison.png" data-mid="226835399" border="0" src="https://freight.cargo.site/w/1000/i/3ad4ab0b243a6d86a9fd62d06047a07b827f714ad95e7a7f1aa10fd78e39053c/Memory-bank-comparison.png" /> The solution ended up being quite simple, but we were glad we went through all the iterations! <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/45c404664a5ed225b6e797d8110370839b9d0442eb4793fd4f16412ba2071372/Favorites-finished.png" data-mid="226835744" border="0" src="https://freight.cargo.site/w/1000/i/45c404664a5ed225b6e797d8110370839b9d0442eb4793fd4f16412ba2071372/Favorites-finished.png" /> We created Favorites tags because we needed two visual way to represent that a sound profile is in a Favorite.The final designs <img width="2878" height="1662" width_o="2878" height_o="1662" data-src="https://freight.cargo.site/t/original/i/c90a793423b28ffa300b08ec117b897575793332d95b85c0e353761151d26683/Favorites-switching.gif" data-mid="226838895" border="0" src="https://freight.cargo.site/w/1000/i/c90a793423b28ffa300b08ec117b897575793332d95b85c0e353761151d26683/Favorites-switching.gif" /> <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/2502b7269fec6019d1cbf3048151ce02faa2c4a8d70ac1968b545c2bc69fccf1/Final-Favorites.png" data-mid="226839012" border="0" src="https://freight.cargo.site/w/1000/i/2502b7269fec6019d1cbf3048151ce02faa2c4a8d70ac1968b545c2bc69fccf1/Final-Favorites.png" />The user flow for switching a Primary sound profile in a Favorites A. This feature lives on the home tab, whic his meant to be a dashboard for quick access.<img width="2878" height="1662" width_o="2878" height_o="1662" data-src="https://freight.cargo.site/t/original/i/2a2288541aacce7dd29f21a6e7a266745162e19daf5cc0f8ef933cf5329fb47d/Sound-library.gif" data-mid="226842410" border="0" src="https://freight.cargo.site/w/1000/i/2a2288541aacce7dd29f21a6e7a266745162e19daf5cc0f8ef933cf5329fb47d/Sound-library.gif" /> Sound profile details and library on the Profiles tab. <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/76f94948c682f03b96ba75ea9e976f380219c7b29d456a3488a03d9834a6b861/Final-duplicating.png" data-mid="226895558" border="0" src="https://freight.cargo.site/w/1000/i/76f94948c682f03b96ba75ea9e976f380219c7b29d456a3488a03d9834a6b861/Final-duplicating.png" /> <img width="2878" height="1662" width_o="2878" height_o="1662" data-src="https://freight.cargo.site/t/original/i/6e8d895db470d357e8d9e22379a958a171afc20fbce71926729ab98fac244b64/Duplicating.gif" data-mid="226842692" border="0" src="https://freight.cargo.site/w/1000/i/6e8d895db470d357e8d9e22379a958a171afc20fbce71926729ab98fac244b64/Duplicating.gif" /> Duplicating a sound profile. <img width="1600" height="928" width_o="1600" height_o="928" data-src="https://freight.cargo.site/t/original/i/7e343ed75ea2f556c4ca4f6676a8eb719d98114a851e6136bcc64ffda9b254b7/Recommended-demo.gif" data-mid="227370234" border="0" src="https://freight.cargo.site/w/1000/i/7e343ed75ea2f556c4ca4f6676a8eb719d98114a851e6136bcc64ffda9b254b7/Recommended-demo.gif" /> What next? We played with the idea of, and even designed for some ideas that we were saving for the next release. These ideas we accounted for were: Density: Compact, Default, and Comfort mode:&nbsp; Filtering system: To sort alphabetically, date created, etc.&nbsp; Recommended sound profiles: Sound profiles recommended by AI, or by our personal audiologist! Since we had to submit our finished app for FDA testing, we saved these ideas for a next release of the app.&nbsp; View the next case study https://jennifersiu.com/Replacing-adding-and-mixing Fri, 24 Jan 2025 22:30:29 +0000 jennifer siu https://jennifersiu.com/Replacing-adding-and-mixing Replacing, adding, and mixing sound profiles Creating a way for users to personalise their sound profiles.&nbsp; Concha Labs <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/683f5c1df4d348c6d1a71852dddf65a12047270613f2c902827728bc34d0958b/Deletion-final-designs.png" data-mid="227309863" border="0" src="https://freight.cargo.site/w/1000/i/683f5c1df4d348c6d1a71852dddf65a12047270613f2c902827728bc34d0958b/Deletion-final-designs.png" /> Background and context The Concha Labs™ App is a hearing aid app that allows users to personalise their hearing straight from home. Our users must purchase our hearing aids, download the app, and then take Soundscope® in order to receive their personalised sound profiles. The hearing aids are Over-The-Counter (OTC) FDA approved. Understanding the problem The problem When I joined Concha Labs, we were working with hearing aids that were not linked, which led to a difficult process when wanting to make simple adjustments such as changing volume or editing a sound profile, as users had to do each action twice for each hearing aid. Since we knew we were going to link the hearing aids soon, we had to design a way for our users to now mix their left and right sound profiles.&nbsp; &nbsp; <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/d38405624881c7c7d94e93df2b32e0b6080c4e3bd83b66f75aeb8a4750437777/Left-and-right-to-one-sound-profile.png" data-mid="227090528" border="0" src="https://freight.cargo.site/w/1000/i/d38405624881c7c7d94e93df2b32e0b6080c4e3bd83b66f75aeb8a4750437777/Left-and-right-to-one-sound-profile.png" /> This change also affected our design! Loading a linked sound profile to your hearing aids was as easy as a tap now. Before, users had to connect and load each left and right sound profile separately. The problem (cont.) Our goal was to create a system in order for users to be able to mix left and right sound profiles to create their ultimate sound profile.&nbsp; Visualising the problem How a sound profile is created and works Below is how our user flow for how the app changed before linking and after linking. This was helpful to figure out how to design for the sound profiles to be able to be modular. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/fcbb336b1315e6863249ceba15605dbc8beaa7f7d0c1fc57edf69b063002cd42/Sound-profile-flows.png" data-mid="225508163" border="0" src="https://freight.cargo.site/w/1000/i/fcbb336b1315e6863249ceba15605dbc8beaa7f7d0c1fc57edf69b063002cd42/Sound-profile-flows.png" />Linking the left and right sound profile was much more efficient. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/23f05e490e396bdd4a998d02311a99355c411d5ad892a4f2be9de0d2f752d22f/Different-flows.png" data-mid="225508277" border="0" src="https://freight.cargo.site/w/1000/i/23f05e490e396bdd4a998d02311a99355c411d5ad892a4f2be9de0d2f752d22f/Different-flows.png" /> This was the flow to adjust a sound profile. It was frustrating to have to disconnect and reconnect. How a sound profile is created and works (cont.) With these updated user flows for linked sound profiles, users have can make three variations of linked sound profiles:Left sound profilesRight sound profilesLeft and right sound profilesWith this update, I made a visual of this concept to understand it better. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/51e3498e82e300a0b7c570b80f942b49d7f5c64f6b01b3360e616e366fafeae3/Sound-profile-variations.png" data-mid="225567115" border="0" src="https://freight.cargo.site/w/1000/i/51e3498e82e300a0b7c570b80f942b49d7f5c64f6b01b3360e616e366fafeae3/Sound-profile-variations.png" /> I first began by mapping out a visual of what this concept looks like, to understand. Basically, a user who uses one hearing aid only has one option of a left or right sound profile, but a user who uses both hearing aid has three variations of linked sound profiles! How a sound profile is created and works (cont.) With these three variations of linked sound profiles, we were posed with the main question of: What if our users made a left sound profile, but wanted to link it to a different right sound profile?&nbsp; Brainstorming + creating user flow <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/344d7f62193d0bd2cb833a5a61e7d1f67bdfc1815d0a72bd4f117611d97989d5/More-brainstorming.png" data-mid="227217007" border="0" src="https://freight.cargo.site/w/1000/i/344d7f62193d0bd2cb833a5a61e7d1f67bdfc1815d0a72bd4f117611d97989d5/More-brainstorming.png" /> Brainstorming We decided we needed a way for users to mix sound profiles, so that they could come up with the ultimate sound profile that suit their needs, instead of re-taking Soundscope® until they made a perfect set.I led a brainstorming session with the iOS team to figure out what concerns we had, ideas, and action items. It was helpful to understand our limits before going into design.&nbsp; Edge case #1 We mainly came across two edge cases that we needed to work through before solidifying this feature. Let’s say our users were in a rush and could only create a right sound profile. They have a few action items to finish that sound profile to make it fully linked. &nbsp; Create a left sound profile by taking Soundscope®. Add a left sound profile from a different sound profile.I created visuals of both #1 and #2 to explain how this would work. I already knew we would be working with a design that featured the left and right sound profile, so visualising this was simple. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/e8c1ea97f69a64a61d446e06d72e7f7272405613892f34d575ecc4126e4c7934/Take-soundscope-to-make-A-Left.png" data-mid="225569909" border="0" src="https://freight.cargo.site/w/1000/i/e8c1ea97f69a64a61d446e06d72e7f7272405613892f34d575ecc4126e4c7934/Take-soundscope-to-make-A-Left.png" />You can simply take Soundscope® to complete your linked sound profile! <img width="1326" height="714" width_o="1326" height_o="714" data-src="https://freight.cargo.site/t/original/i/e2f3ac66ea3dffe87e5a255cff81faec540860c45de3999d8c02ad82153faa98/Add-left-large.gif" data-mid="225567382" border="0" src="https://freight.cargo.site/w/1000/i/e2f3ac66ea3dffe87e5a255cff81faec540860c45de3999d8c02ad82153faa98/Add-left-large.gif" /> Adding B Left to empty A Left is just like copying and pasting! Edge case #2 Let’s say our users made two sound profiles (both are finished for this example), and prefer a left and right sound profile, from the different sound profiles. They have a few action items from here: Delete a side, and from there they can do the action items from Edge Case #1 (Take Soundscope® or add a left sound profile from a different sound profile).Replace a side with a different side from another sound profile. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/cabc3a93d7548c0a7b30d5c5c33684e1a6b31e4bf17a56b705d6087e644d1db8/Delete-a-side.png" data-mid="225570508" border="0" src="https://freight.cargo.site/w/1000/i/cabc3a93d7548c0a7b30d5c5c33684e1a6b31e4bf17a56b705d6087e644d1db8/Delete-a-side.png" /> The user flow for deleting a left/right side of a finished sound profile, and the options to finish that sound profile.&nbsp;<img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/12d404ea673920d8ae939324772528df555e4a6bc08ae8f790fa0587c248b16b/Replacing-sound-profiles.png" data-mid="225571005" border="0" src="https://freight.cargo.site/w/1000/i/12d404ea673920d8ae939324772528df555e4a6bc08ae8f790fa0587c248b16b/Replacing-sound-profiles.png" />The user flow of replacing a left/right sound profile. It’s pretty simple! Note that replacing is not swapping, replacing is simply duplicating or copy and pasting a side of a sound profile. Final user flow Through this process of visualising the edge cases and user flows, I left with understanding that we needed to design for three needs of the users. When a user wants to delete a sound profile. When a user wants to replace a sound profile. When a user wants to take Soundscope™. Wireframing + Designing Previous iterations Before we officially began this project, I had worked on a project that involved both mixing the sound profiles, and also linking and unlinking them. This idea never came to fruition because we now we can link sound profiles, but it was helpful to have drafted them as we developed our product strategy for this project.&nbsp; <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/dd21dbc15659a14203e88b76b7f8cad112615f027cdbe4b52422000a3b5374fc/First-draft.png" data-mid="227148153" border="0" src="https://freight.cargo.site/w/1000/i/dd21dbc15659a14203e88b76b7f8cad112615f027cdbe4b52422000a3b5374fc/First-draft.png" /> <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/6e412a494a6918797f1d70d6c5696985328088591c26a04828c5eefdded624bd/Second-draft.png" data-mid="227148158" border="0" src="https://freight.cargo.site/w/1000/i/6e412a494a6918797f1d70d6c5696985328088591c26a04828c5eefdded624bd/Second-draft.png" /> These iterations were inspired by something similar to a drag-and-drop mechanism. Essentially, users made separate left and right sound profiles, and could link and unlink them whenever.&nbsp; Wireframing When working on the wireframe, I came to understand that what we needed to design, was an edit and delete functionality. While there aren’t any existing hearing apps that share this same concept, I thought about common ways of deletion, replacing, and adding. First I began with just simply placing this feature in our current progress of re-designing the app.&nbsp; <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/80cc1c084364cd5a0f55292778c9f124144686dbad2217eff629c377d0afc6bb/First-Profiles-wireframe.png" data-mid="227217945" border="0" src="https://freight.cargo.site/w/1000/i/80cc1c084364cd5a0f55292778c9f124144686dbad2217eff629c377d0afc6bb/First-Profiles-wireframe.png" />We played with the idea of putting the hearing aids visual in this feature, but decided it didn’t represent audio properly. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/e67be2efb7bf70f4a571b458ff5d7b7e242cad5f95f6184425fa28abb8e1e73e/Wireframes.png" data-mid="225638398" border="0" src="https://freight.cargo.site/w/1000/i/e67be2efb7bf70f4a571b458ff5d7b7e242cad5f95f6184425fa28abb8e1e73e/Wireframes.png" /> While the app was in this in-between stage, I wire-framed an idea I thought of regarding to linked sound profiles.&nbsp; Wireframing (cont.) I decided to keep these new wireframes simple. I felt like a basic design of a left and right side, explained how a sound profile worked without confusion. I went ahead and worked with circles, as it was a part of our branding. This is what I knew I had to design:&nbsp; Left and right sound profiles: We needed to explain that this feature, and the entire app, is exactly how a set of hearing aids work, which is that it has a left and right hearing aid.&nbsp; Functionalities: Delete, add, and replace Next, I began exploring options for the functionalities: <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/604efe47afaf816c82d8cd3ee26076d42d10c7b030290635f4fb915727d86338/Different-icons.png" data-mid="225640018" border="0" src="https://freight.cargo.site/w/1000/i/604efe47afaf816c82d8cd3ee26076d42d10c7b030290635f4fb915727d86338/Different-icons.png" /> Some ideas for functionality on the sound profiles, and an empty state. Designing I played with a few options, such as a pencil edit icon, garbage delete icon, minus delete icon, and a plus icon for adding. While the edit functionality made sense at first to verbally tell our users what the feature could do, it was another click to get to the final action. In addition, an edit pencil icon was not as clear that the sound profile could be deleted. Because of this, I decided on a minus icon rather than a garbage can icon for simplicity and universal recognition. <img width="2500" height="1404" width_o="2500" height_o="1404" data-src="https://freight.cargo.site/t/original/i/04634934bd37af73f0c731032a7a87eab6a578608024f56fb83fcd2eece63c24/Editprofiles.gif" data-mid="227216717" border="0" src="https://freight.cargo.site/w/1000/i/04634934bd37af73f0c731032a7a87eab6a578608024f56fb83fcd2eece63c24/Editprofiles.gif" /> I played with the idea of the edit functionality, but ultimately decided that having multiple clicks to get to the final action was not ideal. Designing (cont.) In the center, I placed a link icon to show that these are linked sound profiles. Then, I made the first iterations of these designs, which included the three state of these components. Filled: When the sound profile has been made and is active,Empty: When there is no sound profile created.Muted: When there is a sound profile but users have muted their hearing aids. <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/8c52aa7774f3bd5e58c33fd70eed4c6d8d7bbf9c9e8b174da14a08ea84037226/First-designs.png" data-mid="225640529" border="0" src="https://freight.cargo.site/w/1000/i/8c52aa7774f3bd5e58c33fd70eed4c6d8d7bbf9c9e8b174da14a08ea84037226/First-designs.png" /> (These designs examples, as two empty sound profiles cannot exist). I utilised the blue to match the left hearing aid receiver colour, and the red to match the right hearing aid receiver colour. It can be confusing for people to know which hearing aid goes in which ear. Designing (cont.) These designs featured sound waves to re-inforce the idea that our sound profiles allow user to hear clearly. However, I wanted a way to give the experience more meaningful information. It was important to me that we give our users helpful data to inform their decision of if they even wanted to mix their sound profiles.&nbsp; After discussing with the iOS engineers, we learned that we could derive data from the amplification chart that users receive after taking Soundscope®, and input the waves into the sound profile designs. Here is what the amplification chart looked like. We did a quick re-design in order to continue the process of re-designing the app.&nbsp; <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/eb8bf1064fe2653c5fc2d43736cb23a7f3d1540fb46d52caee4b4cb2d4b535ef/Amplification-chart.png" data-mid="225686449" border="0" src="https://freight.cargo.site/w/1000/i/eb8bf1064fe2653c5fc2d43736cb23a7f3d1540fb46d52caee4b4cb2d4b535ef/Amplification-chart.png" /> I maintained the left-blue and right-red for consistency, and made the chart more simple. We also needed to eliminate some information, such as the lines on the graph and amp information. Please note that these amp chart waves are not accurate and are visual demonstration only.&nbsp; <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/ee55d1fbc16da8441a59963ba1ff91cb8d5b1757063341407272e6d328795cbe/Final-linked-profiles.png" data-mid="225684467" border="0" src="https://freight.cargo.site/w/1000/i/ee55d1fbc16da8441a59963ba1ff91cb8d5b1757063341407272e6d328795cbe/Final-linked-profiles.png" /> With this amp chart information, I updated our designs for the linked sound profiles!&nbsp; Designing (cont.) While users can look at their amplification charts to compare the differences in their sound profiles, I decided that consistency was best to ensure that our users could understand what our system meant, in relation to their hearing loss. The final designs Final designs With the user flow already finished, I put together the final designs.&nbsp; &nbsp; <img width="2870" height="1658" width_o="2870" height_o="1658" data-src="https://freight.cargo.site/t/original/i/955d3996b463ff19f8d0c47db9d36c0e579e3cb823a899294151d61081867db0/ReplaceRight.gif" data-mid="227300480" border="0" src="https://freight.cargo.site/w/1000/i/955d3996b463ff19f8d0c47db9d36c0e579e3cb823a899294151d61081867db0/ReplaceRight.gif" /> <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/b1c618cae5825fc64ef17d8bd9644a9954d8e8579caa0c3989c0a5af363814eb/Replacing-final-design.png" data-mid="227300960" border="0" src="https://freight.cargo.site/w/1000/i/b1c618cae5825fc64ef17d8bd9644a9954d8e8579caa0c3989c0a5af363814eb/Replacing-final-design.png" /> Replacing a sound profile. <img width="1602" height="928" width_o="1602" height_o="928" data-src="https://freight.cargo.site/t/original/i/7617215b1e2290bed8379a4c07daac5786fb3be5c1752f4ea13a13185624e26f/Delete-right.gif" data-mid="227308629" border="0" src="https://freight.cargo.site/w/1000/i/7617215b1e2290bed8379a4c07daac5786fb3be5c1752f4ea13a13185624e26f/Delete-right.gif" /> <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/683f5c1df4d348c6d1a71852dddf65a12047270613f2c902827728bc34d0958b/Deletion-final-designs.png" data-mid="227309863" border="0" src="https://freight.cargo.site/w/1000/i/683f5c1df4d348c6d1a71852dddf65a12047270613f2c902827728bc34d0958b/Deletion-final-designs.png" /> Deleting a side of a sound profile <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="//freight.cargo.site/t/original/i/933a8ccfd7a6eacdb00a6efd5c14abe13a12d35cc439746ff20e5ecd80c31770/Configuration-changes.png" data-mid="225375414" border="0" style="width: 671.547px; height: 377.745px; display: none;"> What we learned While not every user is advanced or interested enough to use this feature, we knew it would resolve for the issue for when someone makes a separate left and right sound profile and wanted to combine them into a linked sound profile.&nbsp; In the future, we would love to provide more audio details to our sound profiles, so people know exactly the differences between sound profiles. That way, they can have a clearer sense of what sound profile they are making when mixing their profiles. In addition, we have created a tool where they can quickly preview their sound profile and listen to them during the replacing process, but we did not include that feature in the scope of this project for many reasons.&nbsp; This project was so much fun to work on, and I personally enjoyed playingn around the sound profiles! View the next case study https://jennifersiu.com/Building-a-design-system Thu, 13 Mar 2025 17:55:34 +0000 jennifer siu https://jennifersiu.com/Building-a-design-system Building a design system Creating a design system from scratch Concha Labs <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2110549c059d2d1f19d1ab646ae9b0b7a0d8f0d42445bfc7d88499e3a404ffa8/Main-image.png" data-mid="228331549" border="0" src="https://freight.cargo.site/w/1000/i/2110549c059d2d1f19d1ab646ae9b0b7a0d8f0d42445bfc7d88499e3a404ffa8/Main-image.png" /> As the lead product designer of Concha Labs, I had the responsibility of building and maintaining a design system that would be the foundation for success in our product design work. When I joined, I inherited a design system that was not expandable and would collapse under times of broader use. By the time I left, I established a design process, solidified a visual language, and created a system to ensure that the design system was a shared priority between all collaborators.&nbsp; Role Lead Product Designer Team Product Design Team Impact After creating the design system, we saw an improvement in the flow of designing, positive user feedback, decrease in rogue components,&nbsp; Understanding the problem The problem When I joined Concha Labs, I inherited a design system which was in its early stages of development and was also designed for Android. I had the responsibility of building a design system that would allow us to be more efficient and be viable for long term design. Looking at the previous design system, I noticed some things that I could improve upon: The designs looked like wireframes and were unfinished While the style was consistent, it felt outdatedThe designs were not scalableLow contrast and not accessible &nbsp; <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6b93117a103aa45c921b1b6beb906c34d36d45f6bc973b30e4b531cad49d1b76/Previous-design-system-1.png" data-mid="228293228" border="0" src="https://freight.cargo.site/w/1000/i/6b93117a103aa45c921b1b6beb906c34d36d45f6bc973b30e4b531cad49d1b76/Previous-design-system-1.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/d5d841bb0ef0308acf243332bd8a1543c3d86e9316d3d544f450701a7666cfb1/Previous-design--system-3.png" data-mid="228292077" border="0" src="https://freight.cargo.site/w/1000/i/d5d841bb0ef0308acf243332bd8a1543c3d86e9316d3d544f450701a7666cfb1/Previous-design--system-3.png" /> In the previous design system, not many components were created, and there was little documentation, and the system was small. When put into design, the designs felt like wireframe.&nbsp; The problem (cont.) While the design system had its own style, it was not expandable and would collapse under times of broader use. The components were not built to be responsive, there was a lack of clear visual language, and variants were quickly built without documentation. I developed some goals to keep in mind while designing: Create consistency through patterns Improve readability and accessibility Scalable and modular designs, for short and long term product strategy Develop our branding through subtle details Above all, a good design system feels effortless and is a foundation to a good product. Setting up the foundation Foundation At the time, the company was prepping the app to be ready for FDA Usability testing, and my goal was to re-design the app in order to be ready for ship. I knew that we had to get ahead of the issue so we could set ourselves up for success in creating a good foundational design system.&nbsp;The timing of re-designing the design system was perfect, as I had this opportunity during the same time as re-designing the app. I worked with another product designer on the team to catalogue and prioritise the components that we had in the previous design system, to take notes on what to improve and set up an infrastructure to do so. We knew that we could not design each component in isolation, and that every decision we made had to complement the larger structure of our design.&nbsp; <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7b36fb0457984e383c44be5872ae6e8584e620f6c208178b1185199c8bcfcd97/Atoms-molecules.png" data-mid="228293303" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/7b36fb0457984e383c44be5872ae6e8584e620f6c208178b1185199c8bcfcd97/Atoms-molecules.png" />The previous design system had all the components in three pages and was very confusing. I made sure to also create new pages for components that are specific to our app! While it’s great to follow best practises, I also encourage creating your own system that is useful to you. Foundation (cont.) I set up the design system first through separating current components into atoms, molecules, and organisms. There were so many components that we had floating around in the design system that I wanted to solidify, so I began by separating the re-design process into two steps parts: Visual design elements: It was important to consider all the elements of making a component and ensure that at the end of the day, they look good.Scalability of the design: Consider how these elements contribute to the larger ecosystem. Designing + scaling Example: Buttons An example of how I began this process was looking at components that I knew would be both important to the user experience, and also are common in our ecosystem. An example of this is the button. I like to do re-designs in steps instead of an overhaul—here is an example of how I first made edits to the previous design system. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/099aa8a01c080e2b1f3c24e889132fc473d4ce472328cb3a64652a9797ab9dd3/Old-buttons.png" data-mid="228293047" border="0" src="https://freight.cargo.site/w/1000/i/099aa8a01c080e2b1f3c24e889132fc473d4ce472328cb3a64652a9797ab9dd3/Old-buttons.png" />The original buttons. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/5f68f4e78c57291877589aec267509b6de17634a5dcc41ff1949c541bd9b1e60/Medium-buttons.png" data-mid="228293048" border="0" src="https://freight.cargo.site/w/1000/i/5f68f4e78c57291877589aec267509b6de17634a5dcc41ff1949c541bd9b1e60/Medium-buttons.png" /> My first edits. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6c0baa46cc4bfddb7237b134860452feac3eeecfc0710794c8b20e87d47994b0/Finished-buttons.png" data-mid="228294476" border="0" src="https://freight.cargo.site/w/1000/i/6c0baa46cc4bfddb7237b134860452feac3eeecfc0710794c8b20e87d47994b0/Finished-buttons.png" />The final buttons. &nbsp; Example: Buttons (cont.) The previous designs contained too many colours in each variant, and the all caps text was difficult to read. I made the colours more simple and changed the text to sentence case.&nbsp; I continued to do overhauls like these for other components we had in our system, by considering how the component itself looked isolated but also how it worked in context with other elements. Creating an ecosystem Ecosystem It is important to document and communicate how the ecosystem works, in order for engineering to understand the components they are working on when building them out in the back-end. The design system also helps onboard any new team member who needs to quickly familiarise themselves with how the app works.&nbsp; <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/0cb6eb585468f04aad32a2930c0449455c9372af357a5c2550d074ffa9ee1335/Molecules.png" data-mid="228321275" border="0" src="https://freight.cargo.site/w/1000/i/0cb6eb585468f04aad32a2930c0449455c9372af357a5c2550d074ffa9ee1335/Molecules.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/54035987e8551e9cb10e9a15a31c49883e638050fda79206c49f253e621efe24/Organisms.png" data-mid="228316554" border="0" src="https://freight.cargo.site/w/1000/i/54035987e8551e9cb10e9a15a31c49883e638050fda79206c49f253e621efe24/Organisms.png" /> Ecosystem ​(cont.) With each atom, molecule, and ecosystem, I made sure to label and describe the variant, the component, and how this component is to be used in the larger picture. Final thoughts + impact Final thoughts + impact While building the design system itself was fun and challenging, I felt rewarded by seeing the direct impact of how our new design system improved both our design process and our work flow. By having a clear and defined patterns, processes, and guidelines on how to use the design system, the product team were able to move forward with a clear foundation and understanding of the infrastructure of the product. Since the visual language is consistent and defined, documentation of how to use components has been thorough, the design team has more room now to focus on the invisible aspects of design, such as how to evolve the designs and why they matter. I truly believe that the most successful design systems are thorough, consider all aspects of design and how they affect both design and engineering teams, and prioritise communication.&nbsp; View the next case study https://jennifersiu.com/Marketing-classical-music Fri, 10 Jan 2025 03:37:20 +0000 jennifer siu https://jennifersiu.com/Marketing-classical-music MARKETING CLASSICAL MUSICDigital and print advertisement, print collateral such as postcards, posters, flyers, and more for the San Francisco Symphony, an institution that aims to inspire and serve audiences and communities throughout the Bay Area and the world through the power of musical performance. San Francisco Symphony San Francisco Symphony Season 2016 winter branding option <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/029ed5e323f340fe7daeeec3274124bfe1d64a7b599dcff80939922f41a38f33/SFS-1.png" data-mid="227576804" border="0" src="https://freight.cargo.site/w/1000/i/029ed5e323f340fe7daeeec3274124bfe1d64a7b599dcff80939922f41a38f33/SFS-1.png" /> <img width="5520" height="3900" width_o="5520" height_o="3900" data-src="https://freight.cargo.site/t/original/i/35c4fd4f7b6c855fcca58fea052e5f4b3c973e4498281c99e46490084abb0cba/SFS-2.png" data-mid="227576805" border="0" src="https://freight.cargo.site/w/1000/i/35c4fd4f7b6c855fcca58fea052e5f4b3c973e4498281c99e46490084abb0cba/SFS-2.png" /> <img width="2400" height="1800" width_o="2400" height_o="1800" data-src="https://freight.cargo.site/t/original/i/2e331fd228a45639a94ab28f0502d87781cbb5e43d5431f4d572748d229ef1dd/Double_Horizontal_4.png" data-mid="227576803" border="0" src="https://freight.cargo.site/w/1000/i/2e331fd228a45639a94ab28f0502d87781cbb5e43d5431f4d572748d229ef1dd/Double_Horizontal_4.png" /> San Francisco Symphony Season 2016–17 design <img width="1200" height="800" width_o="1200" height_o="800" data-src="https://freight.cargo.site/t/original/i/6baa034df003c2b3730e9731650023b363d823c14b53ab4c984c7309484cadae/SFS_WinterSale_1_final_small.jpg" data-mid="224477085" border="0" src="https://freight.cargo.site/w/1000/i/6baa034df003c2b3730e9731650023b363d823c14b53ab4c984c7309484cadae/SFS_WinterSale_1_final_small.jpg" /> <img width="1300" height="866" width_o="1300" height_o="866" data-src="https://freight.cargo.site/t/original/i/9496812f7c8d3e24227d92a9af95a67d1b88c022d5e47ca12e943e71cd87e018/SFS_WinterSale_4_final_small.jpg" data-mid="224477088" border="0" src="https://freight.cargo.site/w/1000/i/9496812f7c8d3e24227d92a9af95a67d1b88c022d5e47ca12e943e71cd87e018/SFS_WinterSale_4_final_small.jpg" /> <img width="1300" height="866" width_o="1300" height_o="866" data-src="https://freight.cargo.site/t/original/i/bfcc3494c831fccd7bb8440b33be2d9f8e7df9b9fc696883fd7ad6a9c8e773da/SFS_WinterSale_2_final_small.jpg" data-mid="224477086" border="0" src="https://freight.cargo.site/w/1000/i/bfcc3494c831fccd7bb8440b33be2d9f8e7df9b9fc696883fd7ad6a9c8e773da/SFS_WinterSale_2_final_small.jpg" /> <img width="1300" height="866" width_o="1300" height_o="866" data-src="https://freight.cargo.site/t/original/i/f2bdba532960c0cd6e12cbd1efac17aaa351e536401aa4847e82cfa0a8a0674f/SFS_WinterSale_3_final_small.jpg" data-mid="224477087" border="0" src="https://freight.cargo.site/w/1000/i/f2bdba532960c0cd6e12cbd1efac17aaa351e536401aa4847e82cfa0a8a0674f/SFS_WinterSale_3_final_small.jpg" /> <img width="1300" height="866" width_o="1300" height_o="866" data-src="https://freight.cargo.site/t/original/i/5fe1d7894aeff22262bec5ae9773d25f40917809987a4afe549078dda96838ee/SFS_WinterSale_6_final_small.jpg" data-mid="224477090" border="0" src="https://freight.cargo.site/w/1000/i/5fe1d7894aeff22262bec5ae9773d25f40917809987a4afe549078dda96838ee/SFS_WinterSale_6_final_small.jpg" /> <img width="1300" height="866" width_o="1300" height_o="866" data-src="https://freight.cargo.site/t/original/i/109f7dcc0e16b8b009ecea42227937fb327f541a19e0fbeb2aae48832b34c488/SFS_WinterSale_5_final_small.jpg" data-mid="224477089" border="0" src="https://freight.cargo.site/w/1000/i/109f7dcc0e16b8b009ecea42227937fb327f541a19e0fbeb2aae48832b34c488/SFS_WinterSale_5_final_small.jpg" /> <img width="1300" height="866" width_o="1300" height_o="866" data-src="https://freight.cargo.site/t/original/i/6c0f4038886a896999242b0e9803553415ce91561861f04c1d622e0f04258c50/SFS_Brochure_2016_Diagonal_final_small.jpg" data-mid="224477103" border="0" src="https://freight.cargo.site/w/1000/i/6c0f4038886a896999242b0e9803553415ce91561861f04c1d622e0f04258c50/SFS_Brochure_2016_Diagonal_final_small.jpg" /> <img width="1800" height="1200" width_o="1800" height_o="1200" data-src="https://freight.cargo.site/t/original/i/b557048c039539b88540ffcc88594d7392acaa1f15365bb6e3a2ccedb718841d/SFS_Brochure_2016_TopView_final_small.jpg" data-mid="227576802" border="0" src="https://freight.cargo.site/w/1000/i/b557048c039539b88540ffcc88594d7392acaa1f15365bb6e3a2ccedb718841d/SFS_Brochure_2016_TopView_final_small.jpg" /> <img width="1500" height="1000" width_o="1500" height_o="1000" data-src="https://freight.cargo.site/t/original/i/bf3acc6e0e71c8599358cfa936d13e991180c02ceddde4b318a42c7372f53980/SFS_Brochure_2016_Multiple_final_small.jpg" data-mid="224477104" border="0" src="https://freight.cargo.site/w/1000/i/bf3acc6e0e71c8599358cfa936d13e991180c02ceddde4b318a42c7372f53980/SFS_Brochure_2016_Multiple_final_small.jpg" /> San Francisco Symphony Season 2015–16 design <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/8639e393340381a3173830ecf29337459a2672a245e7516986c4217da421ed47/SFS_SpringSale_1_final_small.jpg" data-mid="224477092" border="0" src="https://freight.cargo.site/w/1000/i/8639e393340381a3173830ecf29337459a2672a245e7516986c4217da421ed47/SFS_SpringSale_1_final_small.jpg" /> <img width="1400" height="933" width_o="1400" height_o="933" data-src="https://freight.cargo.site/t/original/i/9f994437f9508a945abf5c2038f58c40a0e98e39768448ed09f70b8b66c7aa36/SFS_SpringSale_3_final_small.jpg" data-mid="224477094" border="0" src="https://freight.cargo.site/w/1000/i/9f994437f9508a945abf5c2038f58c40a0e98e39768448ed09f70b8b66c7aa36/SFS_SpringSale_3_final_small.jpg" /> <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/9ee7670cae6db9846a2930bf89068fa18a425905b1491c96b1cd045638dd2119/SFS_SpringSale_2_final_small.jpg" data-mid="224477093" border="0" src="https://freight.cargo.site/w/1000/i/9ee7670cae6db9846a2930bf89068fa18a425905b1491c96b1cd045638dd2119/SFS_SpringSale_2_final_small.jpg" /> <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/77450c1a9b5f168d722ca118d3237919fc22b7fa7b4e7e19e6cd96425fdb0c2b/SFS_SpringSale_4_final_small.jpg" data-mid="224477095" border="0" src="https://freight.cargo.site/w/1000/i/77450c1a9b5f168d722ca118d3237919fc22b7fa7b4e7e19e6cd96425fdb0c2b/SFS_SpringSale_4_final_small.jpg" /> <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/647f74d89b589723d0cba7db858c3a9fdf10e5e72dca510c36b1060c0db60b18/SFS_SpringSale_5_final_small.jpg" data-mid="224477096" border="0" src="https://freight.cargo.site/w/1000/i/647f74d89b589723d0cba7db858c3a9fdf10e5e72dca510c36b1060c0db60b18/SFS_SpringSale_5_final_small.jpg" /> <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/c4e23b9f80efd0c0b9c56fa3004256334b9e435d112d1ca7c201bcb0f432f5d8/SFS_SpringSale_6_final_small.jpg" data-mid="224477097" border="0" src="https://freight.cargo.site/w/1000/i/c4e23b9f80efd0c0b9c56fa3004256334b9e435d112d1ca7c201bcb0f432f5d8/SFS_SpringSale_6_final_small.jpg" /> <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/90ddf001c6ed7c55271b19d4e3263b3c289237262289009ad811782d35eb74de/SFS_SpringSale_7_final_small.jpg" data-mid="224477099" border="0" src="https://freight.cargo.site/w/1000/i/90ddf001c6ed7c55271b19d4e3263b3c289237262289009ad811782d35eb74de/SFS_SpringSale_7_final_small.jpg" /> <img width="1500" height="1000" width_o="1500" height_o="1000" data-src="https://freight.cargo.site/t/original/i/2d98f9b1487515ea29ee1db34da7312b315b1afb278aec3894ad4b99799bb3da/SFS_Brochure_2016_TwoCards2_final_small.jpg" data-mid="227576801" border="0" src="https://freight.cargo.site/w/1000/i/2d98f9b1487515ea29ee1db34da7312b315b1afb278aec3894ad4b99799bb3da/SFS_Brochure_2016_TwoCards2_final_small.jpg" /> <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/a17b95ba0dd61692659d3fc4508572d72c98b9aa2671c495bede81c20a525188/SFS_Brochure_2016_1_exterior_final_small.jpg" data-mid="224477100" border="0" src="https://freight.cargo.site/w/1000/i/a17b95ba0dd61692659d3fc4508572d72c98b9aa2671c495bede81c20a525188/SFS_Brochure_2016_1_exterior_final_small.jpg" /> <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/6ac885cccc134138de0ddc801f15a82d7edce3476ae02b7091ceb28e561c6562/SFS_Brochure_2016_3_interior_final_small.jpg" data-mid="224477102" border="0" src="https://freight.cargo.site/w/1000/i/6ac885cccc134138de0ddc801f15a82d7edce3476ae02b7091ceb28e561c6562/SFS_Brochure_2016_3_interior_final_small.jpg" /> <img width="2000" height="1333" width_o="2000" height_o="1333" data-src="https://freight.cargo.site/t/original/i/9761f08da452c2f1e65cefb61f13b451d96a848bfd0bae9a6096e909d002483b/SFS_Brochure_2016_2_inside_final_small.jpg" data-mid="224477101" border="0" src="https://freight.cargo.site/w/1000/i/9761f08da452c2f1e65cefb61f13b451d96a848bfd0bae9a6096e909d002483b/SFS_Brochure_2016_2_inside_final_small.jpg" /> <img width="1400" height="933" width_o="1400" height_o="933" data-src="https://freight.cargo.site/t/original/i/ca2af7121a0f24f5c66266f759d2381f555da013ad117bff88cf1077da6ab90d/SFS_Postcards_final_small.jpg" data-mid="224477107" border="0" src="https://freight.cargo.site/w/1000/i/ca2af7121a0f24f5c66266f759d2381f555da013ad117bff88cf1077da6ab90d/SFS_Postcards_final_small.jpg" /> Next project https://jennifersiu.com/Social-media-animations Fri, 10 Jan 2025 03:37:22 +0000 jennifer siu https://jennifersiu.com/Social-media-animations SOCIAL MEDIA ANIMATIONS I created Instagram sticker animations to boost community support, promote alumni engagement, and encourage people to support artists, at the California College of the Arts. California College of the Arts <img width="700" height="700" width_o="700" height_o="700" data-src="https://freight.cargo.site/t/original/i/11876bdf299f9a7f11a57cb4826be59b795d1206d133a4951cfbbd680ea58a5f/Comp-1_6.gif" data-mid="227578605" border="0" src="https://freight.cargo.site/w/700/i/11876bdf299f9a7f11a57cb4826be59b795d1206d133a4951cfbbd680ea58a5f/Comp-1_6.gif" /> <img width="1000" height="350" width_o="1000" height_o="350" data-src="https://freight.cargo.site/t/original/i/acdd1ec1df94373c17477ee0db71e896cf6a552d0d9fd4940e9c5ecb52f7213a/MCM_SP20_SocialMedia_Gifs_Text_ChimeraMade.gif" data-mid="227578683" border="0" src="https://freight.cargo.site/w/1000/i/acdd1ec1df94373c17477ee0db71e896cf6a552d0d9fd4940e9c5ecb52f7213a/MCM_SP20_SocialMedia_Gifs_Text_ChimeraMade.gif" /> <img width="1000" height="760" width_o="1000" height_o="760" data-src="https://freight.cargo.site/t/original/i/b782387ff8d6dd8514fa49256608127dfb7b676b425c8d337f482681ba2419c7/MCM_SP20_SocialMedia_Gifs_Shape_CCA.gif" data-mid="227578681" border="0" src="https://freight.cargo.site/w/1000/i/b782387ff8d6dd8514fa49256608127dfb7b676b425c8d337f482681ba2419c7/MCM_SP20_SocialMedia_Gifs_Shape_CCA.gif" /> <img width="1000" height="600" width_o="1000" height_o="600" data-src="https://freight.cargo.site/t/original/i/2fa06ee3a473346eee2be2cd62d2670d811f246c54f1a6f039965013d56ed317/MCM_SP20_SocialMedia_Gifs_Text_New.gif" data-mid="227578679" border="0" src="https://freight.cargo.site/w/1000/i/2fa06ee3a473346eee2be2cd62d2670d811f246c54f1a6f039965013d56ed317/MCM_SP20_SocialMedia_Gifs_Text_New.gif" /> <img width="1000" height="800" width_o="1000" height_o="800" data-src="https://freight.cargo.site/t/original/i/13f2cd436101cce1755177b0013672782b914e09acff75d8cdb5500f93eddeb3/MCM_SP20_SocialMedia_Gifs_Text_SupportWriters.gif" data-mid="227578680" border="0" src="https://freight.cargo.site/w/1000/i/13f2cd436101cce1755177b0013672782b914e09acff75d8cdb5500f93eddeb3/MCM_SP20_SocialMedia_Gifs_Text_SupportWriters.gif" /> <img width="666" height="265" width_o="666" height_o="265" data-src="https://freight.cargo.site/t/original/i/568e19f3d83862fde0d532c97d128b0cb00376e0d05ecf8d933d8ddb896f62bd/MCM_SP20_SocialMedia_Gifs_Text_SwipeUp.png" data-mid="227578684" border="0" src="https://freight.cargo.site/w/666/i/568e19f3d83862fde0d532c97d128b0cb00376e0d05ecf8d933d8ddb896f62bd/MCM_SP20_SocialMedia_Gifs_Text_SwipeUp.png" /> <img width="1000" height="500" width_o="1000" height_o="500" data-src="https://freight.cargo.site/t/original/i/52bb7e0bd333b47c1c452931d8ca6516ff37d8a86eef479555bee27f09dc5b56/MCM_SP20_SocialMedia_Gifs_Text_Fresh.gif" data-mid="227578682" border="0" src="https://freight.cargo.site/w/1000/i/52bb7e0bd333b47c1c452931d8ca6516ff37d8a86eef479555bee27f09dc5b56/MCM_SP20_SocialMedia_Gifs_Text_Fresh.gif" /> <img width="1000" height="400" width_o="1000" height_o="400" data-src="https://freight.cargo.site/t/original/i/23c33a9d98e9ebe5f55bc171c03cad753275717f820e9a109db748699bb253a9/MCM_SP20_SocialMedia_Gifs_Text_SoMeta.gif" data-mid="227578676" border="0" src="https://freight.cargo.site/w/1000/i/23c33a9d98e9ebe5f55bc171c03cad753275717f820e9a109db748699bb253a9/MCM_SP20_SocialMedia_Gifs_Text_SoMeta.gif" /> <img width="1000" height="400" width_o="1000" height_o="400" data-src="https://freight.cargo.site/t/original/i/f01f081e5b0305be14ae2d4880c0b5034650adbf78e59bb72f4d905f9282f5fc/MCM_SP20_SocialMedia_Gifs_Text_LinkinBio.gif" data-mid="227578677" border="0" src="https://freight.cargo.site/w/1000/i/f01f081e5b0305be14ae2d4880c0b5034650adbf78e59bb72f4d905f9282f5fc/MCM_SP20_SocialMedia_Gifs_Text_LinkinBio.gif" /> <img width="951" height="366" width_o="951" height_o="366" data-src="https://freight.cargo.site/t/original/i/f5cb8026ed127e46f2eb540c0780767689fdcbb67222195838e9881201b6d4fe/MCM_SP20_SocialMedia_Gifs_Text_HelloStudio.gif" data-mid="227578678" border="0" src="https://freight.cargo.site/w/951/i/f5cb8026ed127e46f2eb540c0780767689fdcbb67222195838e9881201b6d4fe/MCM_SP20_SocialMedia_Gifs_Text_HelloStudio.gif" /> <img width="700" height="700" width_o="700" height_o="700" data-src="https://freight.cargo.site/t/original/i/a84e96d1d9a3156d6a3d9abf472be1f07a006d58b4b5fcb5f7bc30f70ca5b5ed/Comp-1_5.gif" data-mid="227578606" border="0" src="https://freight.cargo.site/w/700/i/a84e96d1d9a3156d6a3d9abf472be1f07a006d58b4b5fcb5f7bc30f70ca5b5ed/Comp-1_5.gif" /> <img width="1000" height="560" width_o="1000" height_o="560" data-src="https://freight.cargo.site/t/original/i/0823a849c9d4d589815bf2011fd841a3f3fb966deea6d759749dd0e8ff3b03ba/MCM_SP20_SocialMedia_Gifs_Text_TheoryPractice.gif" data-mid="227579409" border="0" src="https://freight.cargo.site/w/1000/i/0823a849c9d4d589815bf2011fd841a3f3fb966deea6d759749dd0e8ff3b03ba/MCM_SP20_SocialMedia_Gifs_Text_TheoryPractice.gif" /> <img width="1000" height="826" width_o="1000" height_o="826" data-src="https://freight.cargo.site/t/original/i/53dfbcfae861c80ddffbe5af9c4f6f026353b589a25bdb615f45ddcf681e3d06/MCM_SP20_SocialMedia_Gifs_Text_MadeThis.gif" data-mid="227579444" border="0" src="https://freight.cargo.site/w/1000/i/53dfbcfae861c80ddffbe5af9c4f6f026353b589a25bdb615f45ddcf681e3d06/MCM_SP20_SocialMedia_Gifs_Text_MadeThis.gif" /> <img width="1000" height="1000" width_o="1000" height_o="1000" data-src="https://freight.cargo.site/t/original/i/8158ff35166587291f5dbb9f04da6cf9522fd0ebc42ac769312a959cb0f09a41/MCM_SP20_SocialMedia_Gifs_Image_Chimera.gif" data-mid="227579316" border="0" src="https://freight.cargo.site/w/1000/i/8158ff35166587291f5dbb9f04da6cf9522fd0ebc42ac769312a959cb0f09a41/MCM_SP20_SocialMedia_Gifs_Image_Chimera.gif" /> <img width="1200" height="1000" width_o="1200" height_o="1000" data-src="https://freight.cargo.site/t/original/i/ce4f7ad6639dd16794502c5e4f7db85b9114a87938c1f16f363a01cb29e10807/MCM_SP20_SocialMedia_Gifs_Shape_Clapping.gif" data-mid="227579309" border="0" src="https://freight.cargo.site/w/1000/i/ce4f7ad6639dd16794502c5e4f7db85b9114a87938c1f16f363a01cb29e10807/MCM_SP20_SocialMedia_Gifs_Shape_Clapping.gif" /> <img width="751" height="300" width_o="751" height_o="300" data-src="https://freight.cargo.site/t/original/i/34be617280751a61a5ff108acc7e86d020769e46827598507eddabaf15b71b5c/MCM_SP20_SocialMedia_Gifs_Shape_Eye.gif" data-mid="227579339" border="0" src="https://freight.cargo.site/w/751/i/34be617280751a61a5ff108acc7e86d020769e46827598507eddabaf15b71b5c/MCM_SP20_SocialMedia_Gifs_Shape_Eye.gif" /> <img width="751" height="600" width_o="751" height_o="600" data-src="https://freight.cargo.site/t/original/i/77a970e0f1764fbf02d05686990d68b1555310b36fea49c93c534f00db970cb0/MCM_SP20_SocialMedia_Gifs_Shape_Graduation.gif" data-mid="227579443" border="0" src="https://freight.cargo.site/w/751/i/77a970e0f1764fbf02d05686990d68b1555310b36fea49c93c534f00db970cb0/MCM_SP20_SocialMedia_Gifs_Shape_Graduation.gif" /> <img width="1000" height="826" width_o="1000" height_o="826" data-src="https://freight.cargo.site/t/original/i/0c5a195eadca0b44135cbe1cdc951f372b218e0b956538455d0dddc307fe0b35/MCM_SP20_SocialMedia_Gifs_Text_CritiqueVibes.gif" data-mid="227579281" border="0" src="https://freight.cargo.site/w/1000/i/0c5a195eadca0b44135cbe1cdc951f372b218e0b956538455d0dddc307fe0b35/MCM_SP20_SocialMedia_Gifs_Text_CritiqueVibes.gif" /> <img width="1000" height="1000" width_o="1000" height_o="1000" data-src="https://freight.cargo.site/t/original/i/f3baea568382c45591aaea379e17fa17e8b8056186eefbcd9540455e74fd7efc/MCM_SP20_SocialMedia_Gifs_Voting_YoVote.gif" data-mid="227579307" border="0" src="https://freight.cargo.site/w/1000/i/f3baea568382c45591aaea379e17fa17e8b8056186eefbcd9540455e74fd7efc/MCM_SP20_SocialMedia_Gifs_Voting_YoVote.gif" /> <img width="650" height="760" width_o="650" height_o="760" data-src="https://freight.cargo.site/t/original/i/4aa54df634f025784448f777dd6208d0094fd2a8f0e4aca0b76998f310914448/MCM_SP20_SocialMedia_Gifs_Text_WIP.gif" data-mid="227579315" border="0" src="https://freight.cargo.site/w/650/i/4aa54df634f025784448f777dd6208d0094fd2a8f0e4aca0b76998f310914448/MCM_SP20_SocialMedia_Gifs_Text_WIP.gif" /> <img width="1000" height="400" width_o="1000" height_o="400" data-src="https://freight.cargo.site/t/original/i/fbceff82f342a308de8ef9ea8724cd75fe87240db4423cf6a365ac40ba2ba79d/MCM_SP20_SocialMedia_Gifs_Voting_VoteEarly.gif" data-mid="227579449" border="0" src="https://freight.cargo.site/w/1000/i/fbceff82f342a308de8ef9ea8724cd75fe87240db4423cf6a365ac40ba2ba79d/MCM_SP20_SocialMedia_Gifs_Voting_VoteEarly.gif" /> <img width="1000" height="826" width_o="1000" height_o="826" data-src="https://freight.cargo.site/t/original/i/0c5a195eadca0b44135cbe1cdc951f372b218e0b956538455d0dddc307fe0b35/MCM_SP20_SocialMedia_Gifs_Text_CritiqueVibes.gif" data-mid="227579448" border="0" src="https://freight.cargo.site/w/1000/i/0c5a195eadca0b44135cbe1cdc951f372b218e0b956538455d0dddc307fe0b35/MCM_SP20_SocialMedia_Gifs_Text_CritiqueVibes.gif" /> <img width="1000" height="500" width_o="1000" height_o="500" data-src="https://freight.cargo.site/t/original/i/cf8e8161b6b88d037f05697099a5976cf4cb1e9259af9fae420e315ea30a8267/MCM_SP20_SocialMedia_Gifs_Text_DIY.gif" data-mid="227579445" border="0" src="https://freight.cargo.site/w/1000/i/cf8e8161b6b88d037f05697099a5976cf4cb1e9259af9fae420e315ea30a8267/MCM_SP20_SocialMedia_Gifs_Text_DIY.gif" /> Next project https://jennifersiu.com/Creative-event-program Fri, 10 Jan 2025 03:37:17 +0000 jennifer siu https://jennifersiu.com/Creative-event-program CREATIVE EVENT PROGRAM Program design and branding for alternative artistic events, for creatives. It was a fun challenge to make these black and white only, and on a 8.5x11”. <img width="6000" height="3900" width_o="6000" height_o="3900" data-src="https://freight.cargo.site/t/original/i/d665722917549f3a85f070327c54bdaf7041b943e720d579779e823bf9694032/Interruptions-1.png" data-mid="227581828" border="0" src="https://freight.cargo.site/w/1000/i/d665722917549f3a85f070327c54bdaf7041b943e720d579779e823bf9694032/Interruptions-1.png" /> <img width="5520" height="3900" width_o="5520" height_o="3900" data-src="https://freight.cargo.site/t/original/i/378942e2a1888048e3f8944c4df5d9416891b4dfd91c516a32a18660131c9a94/Interruptions-2.png" data-mid="227581830" border="0" src="https://freight.cargo.site/w/1000/i/378942e2a1888048e3f8944c4df5d9416891b4dfd91c516a32a18660131c9a94/Interruptions-2.png" /> <img width="5520" height="3900" width_o="5520" height_o="3900" data-src="https://freight.cargo.site/t/original/i/1733e0ef593621656323a9dc7017e33946c10d94e5cf2ae3f91cc64ece824019/Interruptions-3.png" data-mid="227581829" border="0" src="https://freight.cargo.site/w/1000/i/1733e0ef593621656323a9dc7017e33946c10d94e5cf2ae3f91cc64ece824019/Interruptions-3.png" /> Next project