https://www.msocaciu.me/contact daily 0.75 2020-12-02 https://images.squarespace-cdn.com/content/v1/5cd9b3600a38d30001381506/1562788843152-B91BYHQNM1O7Z17AL71D/image-asset.jpeg Contact https://www.msocaciu.me/about daily 0.75 2022-12-30 https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/adad16cf-7306-4141-9037-30b8db7e2045/IMG_1293.jpg https://www.msocaciu.me/work daily 1.0 2022-12-29 https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/0a193ab2-2e0d-477d-b68c-27115afcccb0/DSC03157+3-2.jpg WORK - Hi, I’m Meaghan, a product designer passionate about creating expressive design systems and fine-tuned solutions that scale. Currently working on Design Systems at Twitch. https://www.msocaciu.me/work/beautyrest monthly 0.5 2022-02-04 https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609271902164-OGEZXZYRX3BHOWSNWMZT/Beautyrest-mockup-5%402x.jpg WORK - Beautyrest.com Redesign After kicking off the project within our cross-functional team, I began my process on paper by mapping out user flows. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609645994808-WAGB623MZLUD71EB6YCJ/Beautyrest-Home-Before%402x.jpg WORK - Beautyrest.com Redesign Homepage BEFORE | Lacked a clear CTA, consistent type styles, and product imagery. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609271900808-TRIV9VS1AEX0C24U1ZJ4/Beautyrest-mockup-6%402x.jpg WORK - Beautyrest.com Redesign As part of the Beautyrest.com exploration, I sketched many different rough wireframes for the page layouts to quickly see what was successful and what wasn’t. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609645996850-JBRX3ES9Q9YY3R4OQ9FW/Beautyrest-Home-After%402x.jpg WORK - Beautyrest.com Redesign Homepage AFTER | We added a clear CTA, and imagery to inform the customer about the products being sold by Beautyrest. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609439207749-K1RLWRIEC9KLC2BEKQSK/Beautyrest-mockup-7%402x.jpg WORK - Beautyrest.com Redesign After working on wireframes and low fidelity comps, I developed a UI kit for the brand using their new visual styles. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609646456147-C7RIKH769IIWNX8C83YR/Beautyrest-PDP-before%402x.jpg WORK - Beautyrest.com Redesign Product Page BEFORE | Prior to the launch of this website, you were unable to purchase Beautyrest products online directly from the retailer. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609271902623-NKOFW9VSGY2TGUXJVE64/Beautyrest-mockup-2%402x.jpg WORK - Beautyrest.com Redesign On the Beautyrest homepage, it was important to our stakeholders that we focused on visual elements that showed the quality, history, and credibility of the company. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609646456988-8V1BO222C6NRLH9AZI3S/Beautyrest-PDP-after%402x.jpg WORK - Beautyrest.com Redesign Product Page AFTER | We added the ability to purchase Beautyrest products directly from their website. This product page includes information that is relevant to the customer, as well as the functionality to customize their mattress. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609271900840-MAV26ODU697IT89K7FBR/Beautyrest-mockup-3%402x.jpg WORK - Beautyrest.com Redesign As part of giving Beautyrest a new look and feel, I created a UI kit alongside a custom set of icons for the brand that reflected their new visual guidelines.  https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609645995375-VRQ9IXFZ7J24XRMAEAF9/Beautyrest-FAQ-before%402x.jpg WORK - Beautyrest.com Redesign Frequently Asked Questions BEFORE | The page contained a never-ending list of questions, which made it hard to find the information you were looking for. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609645995111-U3JBI89QC7VHGBMR1XAN/Beautyrest-FAQ-after%402x.jpg WORK - Beautyrest.com Redesign Frequently Asked Questions AFTER | We dialed in type styles, created question categories, and added a search bar to help the customer find the information they were looking for. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609646456996-W62IZAB2AOOJSUFIHRXE/Beautyrest-About-before%402x.jpg WORK - Beautyrest.com Redesign About BEFORE | Inconsistent type styles, layout issues, and lengthy/unclear content. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609646457352-953JQ7ET8ZU4VV9KDFRB/Beautyrest-About-after%402x.jpg WORK - Beautyrest.com Redesign About AFTER | We drew elements from the homepage to keep things consistent and gave the content a refresh all while speaking to the history of the brand. https://www.msocaciu.me/work/design-system monthly 0.5 2022-02-20 https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/648ee7d4-53ed-43cb-93d0-20b4a5b20ef4/Semantic-Colors-2.jpg WORK - Tuft & Needle Design System https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/d39bea3c-eae1-4c39-b6ad-b3d30618f3b5/product-card-demo.gif WORK - Tuft & Needle Design System https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/b7ae4f77-8226-46d9-8f01-63605f8e24a0/documentation-example.jpg WORK - Tuft & Needle Design System https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/9eb839a1-3008-4f6f-8707-7eb188a99396/3+Brands+%E2%80%93+Styles.jpg WORK - Tuft & Needle Design System https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/6bfe7e05-2274-4777-8028-8720f2ba413a/DS-Overview-Alt.jpg WORK - Tuft & Needle Design System - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.msocaciu.me/work/navigation monthly 0.5 2022-03-12 https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/a2c69f6b-fb68-4dfe-bf71-2113b8ec6cc2/Nav-Sketches.jpg WORK - Tuft & Needle Site Navigation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/d607807c-acb8-4350-aa36-8f2f74c4eae7/Nav-Research-Workshop.jpg WORK - Tuft & Needle Site Navigation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/938f5edd-21c1-4367-a5b3-fbd04f6fad83/Nav+%E2%80%93%C2%A0Old+Design.jpg WORK - Tuft & Needle Site Navigation The Existing Design Our existing design was a concept that worked okay when we had around 20 products. Quite a few opportunities here for refining hierarchy, UI, and content. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/43d6ffaf-7836-4b88-8922-96c008e4deea/Nav+%E2%80%93%C2%A0Prototype.jpg WORK - Tuft & Needle Site Navigation New Prototype for User Testing Our proposed design made with many usability improvements would set the stage for our growing product assortment in 2022. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/99cda9c9-e141-4fd0-8a2a-a63e2dc3ad0c/Hamburger+vs+More.jpg WORK - Tuft & Needle Site Navigation https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/29e7bd11-1142-4805-b35a-be5cb586d71c/Navigation-Mobile-FINAL.jpg WORK - Tuft & Needle Site Navigation https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/3327cfc3-5c22-44db-80cb-1cd79b53415b/Nav+%E2%80%93%C2%A0Final+Desktop+-+Final.jpg WORK - Tuft & Needle Site Navigation - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.msocaciu.me/work/sleep-on-it monthly 0.5 2022-02-09 https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609275013083-KPNC5C3GFX40RD3YLTY1/Sleep-on-it-mockup-5%402x.jpg WORK - Tuft & Needle Sleep On It Lander We started off our design process with an ideation sprint. We were aiming to target users who had never heard of the T&N brand before, but there was, however, the possibility that a returning customer could interact with this page as well. After determining our intent for creating the page and diving into our user flows and personas, my teammates and I worked to come up with rapid wireframes. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609275013027-FP0NXPBGG30Z2KUKFB3Q/Sleep-on-it-mockup-6%402x.jpg WORK - Tuft & Needle Sleep On It Lander From there, my responsibility was to bring our ideas into Sketch, create higher fidelity wireframes, guide the visual design, and finesse the UX/UI of the interactive module. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609275006934-5V35VL3QROABDBWJUF8G/Sleep-on-it-mockup-3%402x.jpg WORK - Tuft & Needle Sleep On It Lander When considering the page flow, we wanted to tie in elements of the campaign video first, to avoid alienating users who came in from all sorts of channels. Further down the page, we dove a bit deeper into the brand, to give additional context about the company behind the video. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609274999677-3YCQ1EOXC10NKF7ND8T6/Sleep-on-it-mockup-4%402x.jpg WORK - Tuft & Needle Sleep On It Lander Because this was a brand awareness campaign, we wanted to give users the option to create their own "Sleep On It" content. This interactive module created user-generated content, which could then be shared on various channels to increase brand awareness and visibility. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609274990707-IN1G1Z0WIS0QSVQ61QZU/Sleep-on-it-mockup-2%402x.jpg WORK - Tuft & Needle Sleep On It Lander It was fun getting to work on the flow of this small module and explore many different states, including an error state asking the user to re-evaluate their content if it included obscenities. After creating their Sleep On It graphic, the user had the option to share to social media or retry to create a new graphic. https://www.msocaciu.me/work/dog-bed monthly 0.5 2022-02-09 https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609274132433-DAWT7FQ9NRXO8OZK79SA/Dog-bed-mockup-1%402x.jpg WORK - Tuft & Needle Product Launch To take this project from start to finish, we first met within our cross-functional team to discuss the scope of the project, timeline, and determine a launch date. My process included competitor research, sketching user flows, product shots, and wireframes, working with a copywriter to determine the page flow and outline, and collaborating with our developer on the project to see it to the finish line. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609273520265-FFDJ2DR4LW9NT08TC9RQ/Dog-bed-mockup-5%402x.jpg WORK - Tuft & Needle Product Launch Before starting the design, we needed to consider the content that would live on the page. I art directed and assisted with the product photoshoot. The following are sketches from early on in the shot ideation process. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609273516666-E883285BPQB8JFRPKA0X/Dog-bed-mockup-3%402x.jpg WORK - Tuft & Needle Product Launch It was important to consider the audience we were targeting and think about what kind of information a pet owner might be looking for when considering purchasing a dog bed. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1609273519055-XFZ5J8VNJE32H3FZUK9V/Dog-bed-mockup-4%402x.jpg WORK - Tuft & Needle Product Launch To determine which product features we wanted to call out in our details section, I collaborated with our copywriter on the project, Brea DeMore. https://www.msocaciu.me/work/illustrations monthly 0.5 2021-01-03 https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607720599012-3IC2S71MPDH5DEBMABJ0/IMG_0353.JPG WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607720627440-ERQM2Y2956NZ7XH77WK7/IMG_0469.JPG WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607720921744-9GW1AOMO3S4RIMF144T2/IMG_0460.jpg WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607720962095-IQQ8PR7ECPDOHYH5PFZS/T%2526N%2BKansas%2BCity%2Bcopy-01.jpg WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607718400561-ZLS8E1RBZ2VQSMVD5DDO/image.jpg WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607706737705-HYWXKWEU4FFOFQ9KU7R1/IMG_0267.JPG WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607707679746-IBETMG1QJJ51PSCUB0RR/IMG_0406.jpg WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607718219562-A1P2FH791HXJKK0R3NI6/T%2526N%2BPortland%2BIllustration-01.jpg WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607706741207-54SGGQ7JYRIGB692OQ0S/IMG_0290.JPG WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607706974301-XU14PLACKYZDJX4E0WWF/IMG_0326_CROP.JPG WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607718131983-8EU5XPPHHOKFIBAOEVDA/IMG_0292.jpg WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607718289098-CAI2VZ53JQ2PZSHWFDGO/IMG_0402.jpg WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607708017279-W7DSCMZR3NAAV2QQH4GR/Sleep_Guide_latte.JPG WORK - Illustrations A latte sitting on top a plate. https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607707858661-0URI7KA66WXP81A5J275/image-asset.jpeg WORK - Illustrations https://images.squarespace-cdn.com/content/v1/5fc6d36ba3ccef3526e76691/1607707980165-IAEI9FFBLH42WCZRVBPB/Sleep_Guide_snakes.JPG WORK - Illustrations Snakes intertwined