https://shivanitoshniwal.com Shivani Toshniwal Mon, 11 Nov 2024 22:38:31 +0000 https://shivanitoshniwal.com en https://shivanitoshniwal.com/About Mon, 11 Nov 2024 22:38:20 +0000 Shivani Toshniwal https://shivanitoshniwal.com/About My work blends creative ambition with strategic thinking to develop purpose-driven solutions. I am passionate about finding user insights, addressing stakeholder needs, and creating seamless experiences through design. Education MS. in Integrated Product Design from University of PennsylvaniaPhiladelphia, PA · 2023—Present BFA. in Communication Design, minor in Fashion Communication from Parsons School of Design, with Honors New York, NY&nbsp;· 2016—2020Study Abroad at Studio Arts College International Florence, Tuscany · 2019Babson Build Entrepreneurial ProgramWellesley, MA · 2019 Professional Experience Replit Stink Studios Amika Made of MillionsClassPass LVMH 72andSunny Visual Country D’Apostrophe Adweek Recognition Young JuryAwwwards · 2023—2024 Best UI Design, Best UX Design and Best InnovationCSS Design Awards · 2023Project: loveamika.com Special Kudos CSS Design Awards · 2023Project: loveamika.com Femme Type DirectoryType01 · 2023 Gold in Digital Design for Social Change, StudentIndigo Design Award · 2021Project: Refect.io Gold in Interactive Design, StudentIndigo Design Award · 2021Project: Refect.io Silver in Website Design, Student Indigo Design Award · 2021Project: Refect.io Silver in Digital Tools and Utilities, StudentIndigo Design Award · 2021Project: Refect.io With three years of experience in a mental health non-profit, in-house teams, and agencies, I take a well-rounded approach to designing meaningful solutions. As a graduate student in the Integrated Product Design program at the University of Pennsylvania, I get to study at Wharton, Penn Engineering, and the Weitzman School of Design. This interdisciplinary background has strengthened my ability to create human-centric solutions that skillfully integrate user experience, product-oriented business strategy, and engineering principles. “Shivani was an outstanding team player. She was always willing to jump in and work hard on whatever digital project was needed - all with a positive attitude. She also helped with competitive analysis and A | B testing. She is truly a great addition to any team!” Hannah Coffman, Director of eCommerce at Amika “Shivani joined our tiny, remote team and was able to hit the ground running. She's endlessly talented, a quick learner and great collaborator. Being a newcomer to the team, I was excited to see how she interpreted our brand guide and pushed it, creating a look for our creative that we're now able to implement across our channels. She was excited to own the redesign of our social content and came to the table with ideas beyond just her immediate deliverables. It was such a pleasure to have her be a part of our team!” Anastasia Kuznetsova,Co-Founder &amp; Creative Director of Made of Millions https://shivanitoshniwal.com/Homepage-top Mon, 11 Nov 2024 22:38:21 +0000 Shivani Toshniwal https://shivanitoshniwal.com/Homepage-top Hey! I’m Shivani, a Visual Designer turned Product Designer with a knack for creating interactive experiences. https://shivanitoshniwal.com/Homepage-bottom Mon, 11 Nov 2024 22:38:21 +0000 Shivani Toshniwal https://shivanitoshniwal.com/Homepage-bottom Selected Case Studies <img width="4503" height="2814" width_o="4503" height_o="2814" data-src="https://freight.cargo.site/t/original/i/494af3e2bc47e20d97b216a3b87737d9d0f23eabeda6d43a0093df98d93c7fb3/Replit---Cover.jpg" data-mid="221783810" border="0" src="https://freight.cargo.site/w/1000/i/494af3e2bc47e20d97b216a3b87737d9d0f23eabeda6d43a0093df98d93c7fb3/Replit---Cover.jpg" /> Replit Onboarding An interactive step-by-step checklist to assist new users in onboarding the workspace. The checklist highlights essential features, including Deployments, Teams and Replit AI Agent. Full case study coming soon! Enjoy the deck in the mean time. <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/4ee6830ece1a4da1aa08a40ee5d17385458e4f8929770ea00c1a5148bd470513/ig_brand_refresh_thumbnail.jpg" data-mid="221593476" border="0" src="https://freight.cargo.site/w/1000/i/4ee6830ece1a4da1aa08a40ee5d17385458e4f8929770ea00c1a5148bd470513/ig_brand_refresh_thumbnail.jpg" /> Instagram Brand Refresh An interactive digital experience for Instagram showcasing the refresh of key brand elements. <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/a72c91fba6d91368d21d23c127db624305747a1d9d4c727a4c619b7a93d53661/amika_thumbnail.jpg" data-mid="221593475" border="0" src="https://freight.cargo.site/w/1000/i/a72c91fba6d91368d21d23c127db624305747a1d9d4c727a4c619b7a93d53661/amika_thumbnail.jpg" /> Amika An eCommerce website for a haircare company that was kind and clean before it was a thing. <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/bc5ea329b90b4495cc11cfce5bbbad5c16eb3754c511b83b6e9fcfbe2854a20c/hinge_nfaq_thumbnail.jpg" data-mid="221593479" border="0" src="https://freight.cargo.site/w/1000/i/bc5ea329b90b4495cc11cfce5bbbad5c16eb3754c511b83b6e9fcfbe2854a20c/hinge_nfaq_thumbnail.jpg" /> Hinge Not-So-Frequently Asked Questions A campaign and microsite that offers queer dating advice from experts.&nbsp;A twist on FAQs for LGBTQIA+ daters. https://shivanitoshniwal.com/Instagram-Brand-Refresh Mon, 11 Nov 2024 22:38:23 +0000 Shivani Toshniwal https://shivanitoshniwal.com/Instagram-Brand-Refresh Instagram Brand Refresh View Live Site︎︎︎ View Sizzle Reel︎︎︎ Role—Associate Digital Designer&nbsp;Activities—Visual design, Brand development, Interaction design, Design system, Motion storyboarding, Led client workshop sessions and Visual Quality Assurance testing for the website Intro— Instagram has become one of the most iconic brands of our time. It is where culture is made and pushed forward. It was time the brand was a reflection of that. A new typeface, updated gradient and color palette, and refined approach to layout celebrates the global community of creators on their platform. Focusing on these key elements of the brand identity, we partnered with the Instagram brand team to create a highly expressive digital experience that conveyed the essence of the brand in a fun and interactive way. My team and I designed a bespoke microsite experience focusing on these key elements of the brand identity. Starting with a dynamic homepage to introduce each key element through their respective pages for Type, Layout, and Gradient page. I concepted and designed detail oriented content that follow brand guidelines showcasing the core brand elements. This content lives on the website and sizzle reel. I led a small team of motion designers to create content across the website that celebrates the tone and voice of Instagram. <img width="3240" height="3240" width_o="3240" height_o="3240" data-src="https://freight.cargo.site/t/original/i/901896ad455b5d615f00383aa44cb2a6c6cbaa8176a2079defedbbf63dd60b30/Asset-2.png" data-mid="221593480" border="0" src="https://freight.cargo.site/w/1000/i/901896ad455b5d615f00383aa44cb2a6c6cbaa8176a2079defedbbf63dd60b30/Asset-2.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/1c0fb30aa919ae4ea18d795ab8720b8ccb375491c2ad84265abda9ddface44b7/IG-home-hero.gif" data-mid="221593481" border="0" src="https://freight.cargo.site/w/1000/i/1c0fb30aa919ae4ea18d795ab8720b8ccb375491c2ad84265abda9ddface44b7/IG-home-hero.gif" /> The brand refresh introduces a new illuminated gradient, and a logo inspired by the new brand typeface, Instagram Sans. IG embraces the soft rounded corners in the glyph “squircle”.&nbsp; Through the years, Instagram has evolved to have a global recognition. It is identified by its glyph- the camera set in the iconic gradient. The hero moment above is designed to capture the audience and showcase the transition of the infamous glyph. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/3a7f539f6ed8f4d9f39ff7fcd548c14a820b2dc307998a5f914f9298d92d01e7/IG-deep_dive.gif" data-mid="221593484" border="0" src="https://freight.cargo.site/w/1000/i/3a7f539f6ed8f4d9f39ff7fcd548c14a820b2dc307998a5f914f9298d92d01e7/IG-deep_dive.gif" /> The layout deep dive card above represents the new dynamic grid system in correlation with type, glyph, and imagery. Again, it puts the brand system at the forefront. The homepage features three deep-dive moments for the core brand elements. We created dynamic hover states that previewed what was to come. In addition, we used creator imagery that highlights the IG community.&nbsp; <img width="4616" height="4080" width_o="4616" height_o="4080" data-src="https://freight.cargo.site/t/original/i/63e38771e9a77d85587dbc66790ef24764b6f11b3ad84da7e9e5ddb32e8baf2c/OOHS.jpg" data-mid="221593486" border="0" src="https://freight.cargo.site/w/1000/i/63e38771e9a77d85587dbc66790ef24764b6f11b3ad84da7e9e5ddb32e8baf2c/OOHS.jpg" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/56169fd02de5c0bd59e5f6c930a39997ff370a0d83dc08331683919774e1457b/IG-carousel.gif" data-mid="221593483" border="0" src="https://freight.cargo.site/w/1000/i/56169fd02de5c0bd59e5f6c930a39997ff370a0d83dc08331683919774e1457b/IG-carousel.gif" /> We created a cursor enabled interactive Gallery module on every landing page to showcase brand assets.&nbsp; I designed tons of OOH advertising- static and motion that elaborated on Instagram’s brand system across various mediums, whether that be highlighting Instagram business, Creator Labs, and several other campaigns.&nbsp; Through the assets in the gallery module, my goal was to emphasize the details of their new typeface and playfulness of the brand. Instagram Sans was designed with accessibility and global scripts at the core. Hence, I concepted and designed the assets to highlight these multiple global scripts that IG offers through their product including Korean, Kannada, and Arabic. In contrast, the animation tone stays true to the brand. The motion technique is an extension of their product UI with a looping, humanistic style. On the Type deep dive page, we created various interactive modules including Type Setter, Character Selector and Single asset gallery for the audience to engage with Instagram Sans. Use the interactive Type Setter to type your own message, choose between various font styles, alignment, and color schemes. Also, engage with some hover cursor interaction on the Single asset gallery module to see Instagram Sans at play in a large scale setting. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/31c45a8940ac9cb3e2d35ab3c42fdbd8179965065729d66a3f2c34f04c47f851/IG-color_picker.gif" data-mid="221593482" border="0" src="https://freight.cargo.site/w/1000/i/31c45a8940ac9cb3e2d35ab3c42fdbd8179965065729d66a3f2c34f04c47f851/IG-color_picker.gif" /> On the Gradient deep dive page, we created two additional interactive modules including Color Selector, and Gradient Picker. We created a dynamic Color Selector module that allows users to interact with the elements in a delightful way. It is a moment to showcase IG brand colors in application with other core elements like typography and layout. Initially, the Gradient Picker module is set to a default value of five color varient. The interactive module lets the audience to engage with three color combos from IG brand guidelines. <img width="3200" height="1800" width_o="3200" height_o="1800" data-src="https://freight.cargo.site/t/original/i/d0f132cddf23ae7a4ed41e19890c689b41ab99b48b580d13d497a59f95299e83/IG-mobile.png" data-mid="221593485" border="0" src="https://freight.cargo.site/w/1000/i/d0f132cddf23ae7a4ed41e19890c689b41ab99b48b580d13d497a59f95299e83/IG-mobile.png" /> From left to right- Static mobile designs for Type Deep Dive card on the homepage, Hero module from gradient deep dive page, OOH Gallery module on the homepage, and Character Selector module on the type deep dive page. Type moves freely across the dynamic grid to invite brand exploration.I conceptualized, designed and collaborated with motion designers to highlight Instagram's adaptive grid. We bring focus on the flexible nature of the grid and purposefully transform it to different aspect ratios of 9:16, 4:5, 1:1, &amp; 16:9. Professional Project—This was created at Stink Studios with some incredibly talended folks.&nbsp;Creative Mahala Nelson, Serene Wong,&nbsp;Motion Diego Holzman, Mohammed Ubaidah, Rafael Kuznicki, UX Stanley Hines Jr., Melanie Seranusoglu, Maggie Bryan, Production Kate Peach, and Greg Bennedetto. Features— It’s Nice That Adweek Tech Crunch The Verge Design at Meta Type 01 https://shivanitoshniwal.com/Amika Mon, 11 Nov 2024 22:38:24 +0000 Shivani Toshniwal https://shivanitoshniwal.com/Amika Amika View Live Site︎︎︎ Role—Lead Digital Designer&nbsp;Activities— Market Research,&nbsp;Interaction Design, User Interface Design, Brand development, Design system, A/B Testing, Visual Quality Assurance, Low-fi and High fidelity Prototyping Intro— Amika is a prestige haircare company that focuses on creating effective products for every hair type. Their brand ethos is to bend the rules while being a friend to your hair and planet. As the sole digital designer, my role was to create an end-to-end website from scratch. Collaborate with eCommerce managers,&nbsp;product marketing team, senior leadership, and third-party developers to bring this vision to life. The goal was to reimagine the Amika experience on a digital platform. Layouts and typography are extensions of iconic product packaging with vibrant colors and graphic shapes. I created micro-interactions that capture the essence of the company. The strategy was to create an end-to-end shopping experience while thinking about potential customers and the back-end CMS, where projects could be scaled with fewer complications. I was able to successfully manage projects like product launches within time and budget constraints. <img width="2880" height="13702" width_o="2880" height_o="13702" data-src="https://freight.cargo.site/t/original/i/22f28d0a1679db69c3d3059e3097ae99f9d1718f8191216ba125dd5f858ddf89/Desktop-HP.jpg" data-mid="221593491" border="0" src="https://freight.cargo.site/w/1000/i/22f28d0a1679db69c3d3059e3097ae99f9d1718f8191216ba125dd5f858ddf89/Desktop-HP.jpg" /> Before landing on the current homepage structure, I tested different layouts through heat maps and other user metrics.The page consists of several content blocks. It has a modular framework so that eCommerce managers can restructure the modules based on higher user engagement. <img width="8872" height="2668" width_o="8872" height_o="2668" data-src="https://freight.cargo.site/t/original/i/69e2d15a63fb816e185e425ba4e01bf1a196410733bd21f713902d73a3474603/Product-Cards.jpg" data-mid="221593492" border="0" src="https://freight.cargo.site/w/1000/i/69e2d15a63fb816e185e425ba4e01bf1a196410733bd21f713902d73a3474603/Product-Cards.jpg" /> Product cards have a default and hover state. The user can choose product size and sign-up for out of stock products. <img width="5421" height="2880" width_o="5421" height_o="2880" data-src="https://freight.cargo.site/t/original/i/d0dc58d0b5df7b657c2798aea0af1701fece4ae6d026d3e09b4ae0a3519e888f/PDP-Desktop---Static.jpg" data-mid="221593493" border="0" src="https://freight.cargo.site/w/1000/i/d0dc58d0b5df7b657c2798aea0af1701fece4ae6d026d3e09b4ae0a3519e888f/PDP-Desktop---Static.jpg" /> Product Display Page with subscription integration. <img width="2200" height="13338" width_o="2200" height_o="13338" data-src="https://freight.cargo.site/t/original/i/a1cc059a780cc29e9dc846ab75e497cf213a97ce2755dee7f07ee981c2313b01/Collection---Stactic.jpg" data-mid="221593489" border="0" src="https://freight.cargo.site/w/1000/i/a1cc059a780cc29e9dc846ab75e497cf213a97ce2755dee7f07ee981c2313b01/Collection---Stactic.jpg" /> A modular collections landing page with playful moments like scroll-triggered animations.The brief was to make a landing page for each collection that was deeply informative. A place where storytelling, campaign imagery, video, clinical testing stats, reviews, ingredient details, and so much more come together. View Page Live ︎︎︎ <img width="10053" height="5400" width_o="10053" height_o="5400" data-src="https://freight.cargo.site/t/original/i/b1539f3ba9c32174e216785237e2c0bfe4d8c38baf9844cc850acf011bc84297/Mobile-Collection-lp-static.jpg" data-mid="221593494" border="0" src="https://freight.cargo.site/w/1000/i/b1539f3ba9c32174e216785237e2c0bfe4d8c38baf9844cc850acf011bc84297/Mobile-Collection-lp-static.jpg" /> Mobile designs for collections landing page. I designed a templatized system for all eleven collections and seasonal content like a holiday landing page. A modular approach allows each page to be created based on available content.View Page Live ︎︎︎ <img width="5200" height="3556" width_o="5200" height_o="3556" data-src="https://freight.cargo.site/t/original/i/bbfa54f9c5dd0e696aea8a71b6d818137281b00a01e4a83467da28526a0f5670/1-Cart-Drawer---Static.jpg" data-mid="221593499" border="0" src="https://freight.cargo.site/w/1000/i/bbfa54f9c5dd0e696aea8a71b6d818137281b00a01e4a83467da28526a0f5670/1-Cart-Drawer---Static.jpg" /> <img width="5200" height="3556" width_o="5200" height_o="3556" data-src="https://freight.cargo.site/t/original/i/def353302b921ebd28508136771240357ea489030321f79fb14ec8d68bc2e248/2-Cart-Drawer---Static.jpg" data-mid="221593498" border="0" src="https://freight.cargo.site/w/1000/i/def353302b921ebd28508136771240357ea489030321f79fb14ec8d68bc2e248/2-Cart-Drawer---Static.jpg" /> <img width="5200" height="3556" width_o="5200" height_o="3556" data-src="https://freight.cargo.site/t/original/i/b16d885270f6604d2574a9845f21985f5381d266ce89e691f0075e3d9bfed935/3-Cart-Drawer---Static.jpg" data-mid="221593497" border="0" src="https://freight.cargo.site/w/1000/i/b16d885270f6604d2574a9845f21985f5381d266ce89e691f0075e3d9bfed935/3-Cart-Drawer---Static.jpg" /> <img width="5200" height="3556" width_o="5200" height_o="3556" data-src="https://freight.cargo.site/t/original/i/36b70fde31422cbefeaad25c18e171e1d845034822dbdb67a45722d6c3281891/4-Cart-Drawer---Static.jpg" data-mid="221593496" border="0" src="https://freight.cargo.site/w/1000/i/36b70fde31422cbefeaad25c18e171e1d845034822dbdb67a45722d6c3281891/4-Cart-Drawer---Static.jpg" /> Cart Design incorporates a progress bar, offers,&nbsp;account login, recommended products, subscription integrations, samples section and disclaimer text. <img width="7268" height="3412" width_o="7268" height_o="3412" data-src="https://freight.cargo.site/t/original/i/8a0d7ab007e23ff1bb3f8d0d555cb0bd228c618f87dd052f6c711abb96f35592/Cart-2---Static.jpg" data-mid="221593495" border="0" src="https://freight.cargo.site/w/1000/i/8a0d7ab007e23ff1bb3f8d0d555cb0bd228c618f87dd052f6c711abb96f35592/Cart-2---Static.jpg" /> The cart has a modular approach. It adds subscription integration to the cart design as a second layer. The challenge was to fit extensive information within the existing design system. I also needed to consider long product names, descriptions, sizes, and sale price indications. <img width="691" height="444" width_o="691" height_o="444" data-src="https://freight.cargo.site/t/original/i/cd3bd2e00402098986bd8d857c568bee636edcbd6930ab4064436d4b0b9dc923/about-high.gif" data-mid="221593488" border="0" data-scale="100" src="https://freight.cargo.site/w/691/i/cd3bd2e00402098986bd8d857c568bee636edcbd6930ab4064436d4b0b9dc923/about-high.gif" /> About PageIt is a bold moment where the Amika wordmark comes front and center. The cursor interaction triggers the logo to go back to the navigation bar and vice versa. <img width="2878" height="1640" width_o="2878" height_o="1640" data-src="https://freight.cargo.site/t/original/i/7c0ecb1693fd9361965135508bf21bead05a41c9fd0421cbbc4ee2cf370ef8ce/Search-Desktop-Prototype.gif" data-mid="221593490" border="0" src="https://freight.cargo.site/w/1000/i/7c0ecb1693fd9361965135508bf21bead05a41c9fd0421cbbc4ee2cf370ef8ce/Search-Desktop-Prototype.gif" /> A two step Search Optimization It starts with a micro-interaction. Having a dropdown that is prominent but doesn’t take up the entire page was crucial. Some user feedback included feeling trapped when the search takes up the whole screen. After the user starts typing in the search field, results dynamically appear. Only if the user presses the enter key, it takes them to a separate results landing page. 404 Error PageThe error page is usually an unexpected moment. Through playful interaction, I added an element of delight to bring back brand expression. The banner module and a back-to-homepage CTA allow users to resume their journey. TakeawaysThrough the project I’ve learnt the importance of being articulate while communicating ideas. This included interactions with senior leadership to understand their business requirements. But also work with the development team to integrate new workflows. I gained the ability to explain complex concepts clearly to technical and non-technical audiences. I used live testing and data to drive continuous improvements on the website to support optimization. This helped me stay rationale by going from ideation to the launch phases. By the end of my time at Amika I became obsessed with measuring impact and advocating for the customer needs but also back-end users.&nbsp; Results Resulted in 30% higher eCommerce sellthrough vs. last year Professional Project—This is an individual project. It was created in-house at Amika. Features— CSS Design Awards Land-Book https://shivanitoshniwal.com/Hinge-NFAQ Mon, 11 Nov 2024 22:38:25 +0000 Shivani Toshniwal https://shivanitoshniwal.com/Hinge-NFAQ Hinge NFAQ View Live Site︎︎︎Learn about the campaign︎︎︎ Role—Associate Digital Designer&nbsp;Activities— I was working on the microsite. My responsibilities included doing market research, creating style tiles, low-fi and high fidelity wireframing, prototyping, user interface design and leading the VQA testing. Intro— Hinge is a dating app. We created their first ever national campaign and a microsite so that the resource gets a permanent platform. The campaign and microsite explores a twist on traditional FAQs for LGBTQIA+ daters. Our team expanded on Hinge's brand identity while experimenting with typography and color application. The digital design team rethought an influencer-first campaign as a web experience. The goal was to have simple yet impactful interactions embedded into the microsite to keep the tone consistent throughout various mediums for the Not-So-Frequently-Asked-Questions campaign. We also focused on the back-end experience and creating a system that could be a templatized for adding new content. &nbsp; <img width="2800" height="1788" width_o="2800" height_o="1788" data-src="https://freight.cargo.site/t/original/i/09310c6314f1dc310971bcf54c1335c3f21f79daa459154281db79154e47d1a2/Grid.png" data-mid="221593500" border="0" src="https://freight.cargo.site/w/1000/i/09310c6314f1dc310971bcf54c1335c3f21f79daa459154281db79154e47d1a2/Grid.png" /> <img width="2800" height="1788" width_o="2800" height_o="1788" data-src="https://freight.cargo.site/t/original/i/65af34f1c1d136f2446775e68fcc9af90338c1d5e439ae78938e6b75e0c1b635/Brand-Guidelines.png" data-mid="221593501" border="0" src="https://freight.cargo.site/w/1000/i/65af34f1c1d136f2446775e68fcc9af90338c1d5e439ae78938e6b75e0c1b635/Brand-Guidelines.png" /> Campaign Identity with lock-up, annotation, type treatment, and color application. A large scale aesthetic with hand drawn elements to add humanistic value.&nbsp; <img width="3840" height="2162" width_o="3840" height_o="2162" data-src="https://freight.cargo.site/t/original/i/6984257f364342efeb3cecdc70354cc855af3f907e0c570a5aae1218059ebb8f/hero-moment.gif" data-mid="221593503" border="0" data-scale="85" src="https://freight.cargo.site/w/1000/i/6984257f364342efeb3cecdc70354cc855af3f907e0c570a5aae1218059ebb8f/hero-moment.gif" /> Hero AnimationA hero moment that captures the audience and briefly introduces them to the influencers answering their Not-So-Frequently-Asked-Questions. Desktop Landing PageIt begins with a carousel module, to give snippets of information shared by the influencers. Some hover interactions for the NFAQ section, scribble annotations in line with the campaign branding that personalizes each question. Micro cursor interaction for the accordion section, and so many more tiny fluid components. We created a dropdown for access to all questions at once. <img width="4800" height="2331" width_o="4800" height_o="2331" data-src="https://freight.cargo.site/t/original/i/df8ec0c4e32668199e03e3b7be6dc32302f10af16293fa1933ec97d9cb58116e/Mobile-Screens-1.png" data-mid="221593505" border="0" src="https://freight.cargo.site/w/1000/i/df8ec0c4e32668199e03e3b7be6dc32302f10af16293fa1933ec97d9cb58116e/Mobile-Screens-1.png" /><img width="4800" height="2331" width_o="4800" height_o="2331" data-src="https://freight.cargo.site/t/original/i/91e3f4d56c54d998ad2c143fc4cff6fcf3079bae8186f8b3042183d8b18f2d2b/Mobile-Screens-2.png" data-mid="221593504" border="0" src="https://freight.cargo.site/w/1000/i/91e3f4d56c54d998ad2c143fc4cff6fcf3079bae8186f8b3042183d8b18f2d2b/Mobile-Screens-2.png" /> Mobile first micrositeThe NFAQ responses are accumulated into a single resource. It also gives the audience a chance to ask their own questions, engage with the influencer socials, promote the Hinge app and LGBTQIA+ resources. <img width="2500" height="1667" width_o="2500" height_o="1667" data-src="https://freight.cargo.site/t/original/i/8279e8b4f7e8e7df53ac390e2f4993698ae39714ea82c623d2894ebd94af02a0/DSCF2111.jpg" data-mid="221593507" border="0" src="https://freight.cargo.site/w/1000/i/8279e8b4f7e8e7df53ac390e2f4993698ae39714ea82c623d2894ebd94af02a0/DSCF2111.jpg" /> <img width="2500" height="1327" width_o="2500" height_o="1327" data-src="https://freight.cargo.site/t/original/i/8435fe9b025aa5cc1ee3506bcc70eedd03616c96c8ed3ad39724af0d272d6997/22_BK-WS-109_Matchcom_230130_014326_879.jpg" data-mid="221593506" border="0" src="https://freight.cargo.site/w/1000/i/8435fe9b025aa5cc1ee3506bcc70eedd03616c96c8ed3ad39724af0d272d6997/22_BK-WS-109_Matchcom_230130_014326_879.jpg" /> Professional Project—This was created at Stink Studios with some incredibly talended folks. Digital Creatives Jaycee Masucci, Serene Wong, Brand Creatives Kevin Yoon, Garrett Close, Development Juan Laría, Kristofer Black,&nbsp;Production Allison Eng, and Zanah Thirus. Features—Adweek Gay TimesResults— Hinge saw a 60%+ increase in dates among U.S. LGBTQIA+ users* https://shivanitoshniwal.com/Beautiful-Brains Mon, 11 Nov 2024 22:38:27 +0000 Shivani Toshniwal https://shivanitoshniwal.com/Beautiful-Brains Beautiful Brains View Manual︎︎︎ Role—Lead Designer&nbsp;Activities——Visual design, Brand development, and Editorial design Intro— Beautiful Brains is a mental health manual for the modern workforce. It provides employers advice on how companies can create psychologically safe environments that best assist in employees' struggles with mental health. I redesigned Beautiful Brains for the Made of Millions Foundation, a nonprofit organization on a mission to change how the world perceives mental health. The eclectic approach to design, tone and voice of the manual is inspired by the existing visual system of Made Academy, a mental health training curriculum.&nbsp; My aim was to reimagine the aesthetics of conversations around "mental health." The design focuses on creating a balanced approach between type-driven layouts and playful illustrations. Using a vibrant color palatte makes the resource inviting and offsets the existing seriousness around the topic of mental health.&nbsp; <img width="1282" height="1832" width_o="1282" height_o="1832" data-src="https://freight.cargo.site/t/original/i/bf28465e808b55128ba1bbe5bcd0cee518705bd1462dc2686f4621e16064914f/cover_bb.png" data-mid="221593509" border="0" src="https://freight.cargo.site/w/1000/i/bf28465e808b55128ba1bbe5bcd0cee518705bd1462dc2686f4621e16064914f/cover_bb.png" /> <img width="6210" height="8278" width_o="6210" height_o="8278" data-src="https://freight.cargo.site/t/original/i/1acd13adbb1e3f32613670b3f86961fe5010da8a4f60e47b741f7f869cc4f492/beautifulbrains_overall_low-1.jpg" data-mid="221593510" border="0" src="https://freight.cargo.site/w/1000/i/1acd13adbb1e3f32613670b3f86961fe5010da8a4f60e47b741f7f869cc4f492/beautifulbrains_overall_low-1.jpg" /> This manual is available online, so I re-evaluated spreads as single pages while planning layouts. The manual is digital-friendly and works within print guidelines. I designed compositions using various graphical elements like texture, cropping, gradients, illustrations, and type to develop a bold yet whimsical look and feel. <img width="12216" height="8076" width_o="12216" height_o="8076" data-src="https://freight.cargo.site/t/original/i/165a891bd839e5b9c9458c77871fc594480f2b85c76147dc36bdb9a31b815ead/bb_1.jpg" data-mid="221593518" border="0" src="https://freight.cargo.site/w/1000/i/165a891bd839e5b9c9458c77871fc594480f2b85c76147dc36bdb9a31b815ead/bb_1.jpg" /><img width="12216" height="8076" width_o="12216" height_o="8076" data-src="https://freight.cargo.site/t/original/i/e548f88d00aa22e101c06c3a98f35762655ae39995a1ae1ae74f0e923b319647/bb_3-copy.jpg" data-mid="221593515" border="0" src="https://freight.cargo.site/w/1000/i/e548f88d00aa22e101c06c3a98f35762655ae39995a1ae1ae74f0e923b319647/bb_3-copy.jpg" /> <img width="600" height="947" width_o="600" height_o="947" data-src="https://freight.cargo.site/t/original/i/4ec6e0a13584b55f70d9c345bf14da771c0326801423f72ec225fe00df246b8f/bb_6.png" data-mid="221593521" border="0" src="https://freight.cargo.site/w/600/i/4ec6e0a13584b55f70d9c345bf14da771c0326801423f72ec225fe00df246b8f/bb_6.png" /> <img width="2000" height="1143" width_o="2000" height_o="1143" data-src="https://freight.cargo.site/t/original/i/61533249bd0ed36b74f89c9d69f02de0d66ffbae999b339568f471686c17c2e9/bb_4.jpg" data-mid="221593520" border="0" src="https://freight.cargo.site/w/1000/i/61533249bd0ed36b74f89c9d69f02de0d66ffbae999b339568f471686c17c2e9/bb_4.jpg" /> <img width="12216" height="8076" width_o="12216" height_o="8076" data-src="https://freight.cargo.site/t/original/i/64652104dd0177e158f60f594db601bec36ed3e7fc9f50ecce00151dd4aada5a/bb_4.jpg" data-mid="221593513" border="0" src="https://freight.cargo.site/w/1000/i/64652104dd0177e158f60f594db601bec36ed3e7fc9f50ecce00151dd4aada5a/bb_4.jpg" /><img width="12216" height="8076" width_o="12216" height_o="8076" data-src="https://freight.cargo.site/t/original/i/3754b91b4796a36d93d94249f61ce5eaad0dd8e651f3410db865ba739ab0a787/bb_3.jpg" data-mid="221593514" border="0" src="https://freight.cargo.site/w/1000/i/3754b91b4796a36d93d94249f61ce5eaad0dd8e651f3410db865ba739ab0a787/bb_3.jpg" /> <img width="12216" height="8076" width_o="12216" height_o="8076" data-src="https://freight.cargo.site/t/original/i/03a7434dc352fc6bc1d936a406b2e230c7f6babd09804af3e879b6877ac19391/bb_7.jpg" data-mid="221593511" border="0" src="https://freight.cargo.site/w/1000/i/03a7434dc352fc6bc1d936a406b2e230c7f6babd09804af3e879b6877ac19391/bb_7.jpg" /> <img width="12216" height="8076" width_o="12216" height_o="8076" data-src="https://freight.cargo.site/t/original/i/8ad45ff9b4418051744558ed3ef0d45cc65c4895c6e4f4f812b6defc1d35a1c7/bb_5.jpg" data-mid="221593512" border="0" src="https://freight.cargo.site/w/1000/i/8ad45ff9b4418051744558ed3ef0d45cc65c4895c6e4f4f812b6defc1d35a1c7/bb_5.jpg" /> <img width="1500" height="844" width_o="1500" height_o="844" data-src="https://freight.cargo.site/t/original/i/62cfbcf6e157ffea373cd644104a5835c7a1824bd28970f2aa0a3f35b0e41dd3/bb_8.jpg" data-mid="221593523" border="0" src="https://freight.cargo.site/w/1000/i/62cfbcf6e157ffea373cd644104a5835c7a1824bd28970f2aa0a3f35b0e41dd3/bb_8.jpg" /> <img width="1500" height="844" width_o="1500" height_o="844" data-src="https://freight.cargo.site/t/original/i/729b2aec8332f8e91363131ebd0c446dcdbcd96aaa2e1032be6552fac29ce089/bb_9.jpg" data-mid="221593524" border="0" src="https://freight.cargo.site/w/1000/i/729b2aec8332f8e91363131ebd0c446dcdbcd96aaa2e1032be6552fac29ce089/bb_9.jpg" /> Personal and Professional Project—This was created with Co-Founder and Creative Director Anastasia Kuznetsova, Illustrations by Emily Eldrige,&nbsp;Written and Edited by&nbsp;Lauren O’Shaughnessy, Aaron Harvey, Rose Cartwright, and Beth Roeser. Features— Inc Magazine https://shivanitoshniwal.com/Made-of-Millions Mon, 11 Nov 2024 22:38:31 +0000 Shivani Toshniwal https://shivanitoshniwal.com/Made-of-Millions Made of Millions Role—Designer&nbsp;Activities——Visual design, Design System, and Brand development Intro— Made of Millions is a non-profit organization all about breaking the stigma around mental health. Their resources reach over 3 million sufferers each year through editorial, video content, and live-streaming services accessible through their website, Instagram, YouTube, and Twitch.&nbsp;I led a visual rebrand of Made of Million's Instagram account, one of the organization's most prominent platforms. The rebranding occurred during the pandemic when mental wellness was crucial. The goal was to add consistency while redefining the aesthetics of conversation around "mental health." I created a design system including a gradient library and social content templates that work with the existing website while keeping the tone of the foundation intact. <img width="2500" height="2501" width_o="2500" height_o="2501" data-src="https://freight.cargo.site/t/original/i/e9604d6de6fd64391fb987bbb30a8a8a8b659f3e1a9541db7a2d0dc6d0eb7700/grid_st_mmf.jpg" data-mid="221593543" border="0" src="https://freight.cargo.site/w/1000/i/e9604d6de6fd64391fb987bbb30a8a8a8b659f3e1a9541db7a2d0dc6d0eb7700/grid_st_mmf.jpg" /> The process included designing social assets in an easy-to-edit templatized form. The new system included iconography, typography, and a custom gradient library. A black-and-white palette is the identity's base, but bold colors with gradients are applied to add emotion and fluidity. I accounted for layouts promoting various content forms, including editorial, online event promo, stats, and educational material. <img width="3912" height="3381" width_o="3912" height_o="3381" data-src="https://freight.cargo.site/t/original/i/54a0622ad30bc6f1a7a6989427d297b78a0ef897ade34e31df08e390b0e255b8/Social-Templates.jpg" data-mid="221593550" border="0" src="https://freight.cargo.site/w/1000/i/54a0622ad30bc6f1a7a6989427d297b78a0ef897ade34e31df08e390b0e255b8/Social-Templates.jpg" /> <img width="2500" height="2253" width_o="2500" height_o="2253" data-src="https://freight.cargo.site/t/original/i/b228164e021253b815763122a56b42bdd45121ad2929c1441ff619a8b40d4648/stories-01-01.jpg" data-mid="221593546" border="0" src="https://freight.cargo.site/w/1000/i/b228164e021253b815763122a56b42bdd45121ad2929c1441ff619a8b40d4648/stories-01-01.jpg" /> <img width="2100" height="1200" width_o="2100" height_o="1200" data-src="https://freight.cargo.site/t/original/i/4f6ac13c42beb12e058e41baa00c3f407e87ffccfabe76d44e389cbed9288185/1.jpg" data-mid="221593541" border="0" src="https://freight.cargo.site/w/1000/i/4f6ac13c42beb12e058e41baa00c3f407e87ffccfabe76d44e389cbed9288185/1.jpg" /> <img width="2100" height="1200" width_o="2100" height_o="1200" data-src="https://freight.cargo.site/t/original/i/526f4558947c8cade35ee0b3de67bcbbe00a7293c341789e03ed17cf45f937c9/2.jpg" data-mid="221593542" border="0" src="https://freight.cargo.site/w/1000/i/526f4558947c8cade35ee0b3de67bcbbe00a7293c341789e03ed17cf45f937c9/2.jpg" /> <img width="2500" height="1694" width_o="2500" height_o="1694" data-src="https://freight.cargo.site/t/original/i/8652cf10430ee10db9b85c17f772ba55aa5a6976d845793fb4a2aa8541b02142/st_web_posters_1-02.jpg" data-mid="221593545" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/8652cf10430ee10db9b85c17f772ba55aa5a6976d845793fb4a2aa8541b02142/st_web_posters_1-02.jpg" /> <img width="2500" height="1694" width_o="2500" height_o="1694" data-src="https://freight.cargo.site/t/original/i/f44a05b89a20b9cd38d898e66d34fae1334360d8f1bc8d21d47dafef9ba977ed/st_web_posters_3.jpg" data-mid="221593547" border="0" data-scale="97" src="https://freight.cargo.site/w/1000/i/f44a05b89a20b9cd38d898e66d34fae1334360d8f1bc8d21d47dafef9ba977ed/st_web_posters_3.jpg" /> <img width="2500" height="1694" width_o="2500" height_o="1694" data-src="https://freight.cargo.site/t/original/i/af3b07283e660b4a687cbbbbffb70d6d52bff66d016b84a9761cb0476caee5f3/st_web_posters_1.jpg" data-mid="221593548" border="0" data-scale="92" src="https://freight.cargo.site/w/1000/i/af3b07283e660b4a687cbbbbffb70d6d52bff66d016b84a9761cb0476caee5f3/st_web_posters_1.jpg" /> I designed various merch and multiple web posters for their Original Series that currently lives on their web platform. The visual language was an extension of their centralized identity with a mission of engaging, building advocacy &amp; educating a community. <img width="2500" height="2754" width_o="2500" height_o="2754" data-src="https://freight.cargo.site/t/original/i/8ee4b5938ca107c5de504584eb8223bd2461f29a9312426cadb7dcd9cbf318b7/site-03.jpg" data-mid="221593544" border="0" src="https://freight.cargo.site/w/1000/i/8ee4b5938ca107c5de504584eb8223bd2461f29a9312426cadb7dcd9cbf318b7/site-03.jpg" /> I also worked with the Creative Director on more web based solutions. First, on Made of Millions website, and second on their Made Academy microsite landing page.The platform design iterations included incorporating the donation CTA in the navigation bar for higher prominence and easy access to the users. Other design iterations focused on the hamburger menu. Additionally, iterations included updating the content structure to expand user reach to existing expansive content and adding CTAs to drive account conversations. <img width="2500" height="11056" width_o="2500" height_o="11056" data-src="https://freight.cargo.site/t/original/i/413621987272ec7789f3668295e322231d3e6cf24cde4e936bddcec736d47421/desktop_3-01.jpg" data-mid="221593549" border="0" src="https://freight.cargo.site/w/1000/i/413621987272ec7789f3668295e322231d3e6cf24cde4e936bddcec736d47421/desktop_3-01.jpg" /> Professional Project—This is an individual project. It was created in-house at Made of Millions Foundation.