https://fionafanzhili.com Fiona Fanzhi Li Design Thu, 27 Feb 2025 04:37:20 +0000 https://fionafanzhili.com en https://fionafanzhili.com/Untitled-page Sat, 30 Jun 2018 06:42:54 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/Untitled-page A designer is a wayfarer in the winds of creation. At times the observer, other times the enabler, my journey across disciplines are guided by two often repeated questions — Why are things the way they are? How might things be better? https://fionafanzhili.com/Featured-Projects Wed, 27 Jun 2018 00:35:35 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/Featured-Projects Everlab A preventative health program that helps patients detect risk of future disease and provide protocols to mitigate and reduce risk <img width="2000" height="1501" width_o="2000" height_o="1501" data-src="https://freight.cargo.site/t/original/i/4bbf9a73b85752b5538783fd582f61ed47a0fcfc8a72138d19348996fbd4ca7a/Preview-small.png" data-mid="227328807" border="0" src="https://freight.cargo.site/w/1000/i/4bbf9a73b85752b5538783fd582f61ed47a0fcfc8a72138d19348996fbd4ca7a/Preview-small.png" /> ShippitA B2B logistics SaaS product for retailers shipping diverse goods through a broad range of carrier services expanding into new markets and shipping niches <img width="2100" height="1576" width_o="2100" height_o="1576" data-src="https://freight.cargo.site/t/original/i/9544f24982ce6c489341f044cdb9ea3d18a3cc36030fcc6008871639f643dba8/Preview-3.png" data-mid="205919948" border="0" src="https://freight.cargo.site/w/1000/i/9544f24982ce6c489341f044cdb9ea3d18a3cc36030fcc6008871639f643dba8/Preview-3.png" /> Lion MarketplaceA B2B self service ecosystem for retail and on-premise customers of a leading beverage company. <img width="2160" height="1604" width_o="2160" height_o="1604" data-src="https://freight.cargo.site/t/original/i/6f2f56f0757b710ef60e6a330e0dbfa596bdca9d2963d7f7d2a214d1de1635c5/Device-mockups.png" data-mid="127900930" border="0" src="https://freight.cargo.site/w/1000/i/6f2f56f0757b710ef60e6a330e0dbfa596bdca9d2963d7f7d2a214d1de1635c5/Device-mockups.png" /> Vanguard Luxury BrandsA consumer e-commerce site as the first step of digitising the brand and retail experience of Australia’s leading importer and distributor of premium spirits. <img width="2100" height="1576" width_o="2100" height_o="1576" data-src="https://freight.cargo.site/t/original/i/9b7675b2564a2cb305b342093ae5c4e586ebc70d28de1e5f0b1c0ed348a99c07/Preview.png" data-mid="129295636" border="0" src="https://freight.cargo.site/w/1000/i/9b7675b2564a2cb305b342093ae5c4e586ebc70d28de1e5f0b1c0ed348a99c07/Preview.png" /> NSW Rural Fire ServicesAn end-to-end online volunteer application experience that starts with helping applicants discover which roles and brigades are most suitable for them. <img width="1267" height="950" width_o="1267" height_o="950" data-src="https://freight.cargo.site/t/original/i/36b645463a07256543a614d4e89db7776a25034128f525d1b0b40cb4585349fe/Preview.png" data-mid="127627512" border="0" src="https://freight.cargo.site/w/1000/i/36b645463a07256543a614d4e89db7776a25034128f525d1b0b40cb4585349fe/Preview.png" /> CommBank data visualisation toolkitA set of guidelines created for a major Australian bank to standardise their approach to reporting, after an in-depth redesign of risk reporting dashboards <img width="2094" height="1576" width_o="2094" height_o="1576" data-src="https://freight.cargo.site/t/original/i/4282a607a0c8a1f155781c453573dd253aeadd442fcfa2d9c440a4a34e91406f/CommBank.png" data-mid="205919639" border="0" src="https://freight.cargo.site/w/1000/i/4282a607a0c8a1f155781c453573dd253aeadd442fcfa2d9c440a4a34e91406f/CommBank.png" /> 2degrees NZ websiteMobilising an enterprise effort to elevate a uniquely kiwi telco company, starting with their corporate website <img width="1267" height="950" width_o="1267" height_o="950" data-src="https://freight.cargo.site/t/original/i/e81e612131ee2fa9aa7eadd5add570198bbd80a76f51b11db757d0fdfb9f49a9/Preview-image.jpg" data-mid="96903124" border="0" src="https://freight.cargo.site/w/1000/i/e81e612131ee2fa9aa7eadd5add570198bbd80a76f51b11db757d0fdfb9f49a9/Preview-image.jpg" /> The North Face e-commerce siteRefreshing the brand’s online presence in Australia as they migrate onto a new e-commerce platform <img width="1080" height="809" width_o="1080" height_o="809" data-src="https://freight.cargo.site/t/original/i/44b42859d812883ca5849bcf60cd1718047fa2809e3f323ba657bee815544215/TNF_E-CommD_Homepage_2.jpg" data-mid="37385581" border="0" src="https://freight.cargo.site/w/1000/i/44b42859d812883ca5849bcf60cd1718047fa2809e3f323ba657bee815544215/TNF_E-CommD_Homepage_2.jpg" /> Space AustraliaCreating an identity and platform for Australia’s space community, as the nation’s very own space industry starts to take off <img width="6000" height="4500" width_o="6000" height_o="4500" data-src="https://freight.cargo.site/t/original/i/c77f38617e9ce81b39b77cca3a253803109d0e92842bb86b3a172b6dc227a891/Mobile-hero.jpg" data-mid="78499702" border="0" src="https://freight.cargo.site/w/1000/i/c77f38617e9ce81b39b77cca3a253803109d0e92842bb86b3a172b6dc227a891/Mobile-hero.jpg" /> DuluxGroup leadership conference immersion room Blending physical and digital artefacts to illustrate the future customer experience enabled by new technologies, and the strategic initiatives that will enable the transformation [ Password required ] <img width="2880" height="2160" width_o="2880" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f6a8bf2dd0fe80d2ff428562409a316ccb35e5d123f910d46579bec38d7122e8/People---skills.jpg" data-mid="37386099" border="0" src="https://freight.cargo.site/w/1000/i/f6a8bf2dd0fe80d2ff428562409a316ccb35e5d123f910d46579bec38d7122e8/People---skills.jpg" /> AMP Goals-based advice experience Enabling financial advisers and their customers to explore, plan and track financial goals in an omni-channel experience <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/f2c27ab763c97138acc9d0fe0eef27f3219e866bf8825b46d9b21b3053cda3d8/Conv1_012Timeline.jpg" data-mid="37385482" border="0" src="https://freight.cargo.site/w/1000/i/f2c27ab763c97138acc9d0fe0eef27f3219e866bf8825b46d9b21b3053cda3d8/Conv1_012Timeline.jpg" /> icare self service tools and design systemSetting up a government agency to create digital tools that enable people of NSW to manage workers compensation, construction and other types of government-funded insurance <img width="1080" height="810" width_o="1080" height_o="810" data-src="https://freight.cargo.site/t/original/i/b731f6caf6bbcbc9b39be6f87978670ba2eba03eb4208b7a2eb69bc064df4efc/D_Homepage.jpg" data-mid="37184406" border="0" src="https://freight.cargo.site/w/1000/i/b731f6caf6bbcbc9b39be6f87978670ba2eba03eb4208b7a2eb69bc064df4efc/D_Homepage.jpg" /> Diary to data Diving into the time and attention spent on community engagements, to advise on a more affective strategy for the Governor of NSW <img width="5000" height="3635" width_o="5000" height_o="3635" data-src="https://freight.cargo.site/t/original/i/a613b2e18b917b72487fe983add8e0dd4b4db609204191a6cbbab5bef211d393/New_08_o.jpg" data-mid="19475823" border="0" src="https://freight.cargo.site/w/1000/i/a613b2e18b917b72487fe983add8e0dd4b4db609204191a6cbbab5bef211d393/New_08_o.jpg" /> Rhapsody on a Windy Night Exploring ways of using digital to create new ways to experience and interact with poetry <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/3b196ddf48857dd73ca34bf5522af0dc30008d8709840f398a8b02c55887e947/02_B_Branch.jpg" data-mid="37179846" border="0" src="https://freight.cargo.site/w/1000/i/3b196ddf48857dd73ca34bf5522af0dc30008d8709840f398a8b02c55887e947/02_B_Branch.jpg" /> https://fionafanzhili.com/The-North-Face-e-commerce-site Wed, 06 Mar 2019 21:49:21 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/The-North-Face-e-commerce-site The North Face e-commerce siteUX &amp; UI | Product design True Alliance is one of the largest distributors of apparel brands in Australia, and made the decision in early 2019 to migrate their multiple e-commerce sites onto Salesforce Commerce Cloud. This process started with the migration of two brands – The North Face and Speedo – simultaneously onto the new platform with a refreshed taxonomy and digital styleguide. Visit the site:https://thenorthface.com.au/ In these 5 weeks I designed not only for the specific brands we were given, but also for the scalability of the design system to be applied to a range of higher and lower-end apparel brands distributed by the client. I also created an ‘accelerator’ design file for e-commerce sites that can be used for future projects, and onboarded the client’s internal design team to design Lacoste in another parallel stream.This work done by the Deloitte Digital for True Alliance won the 2019 Salesforce Partner Innovation Awards for B2C Commerce. <img width="1080" height="810" width_o="1080" height_o="810" data-src="https://freight.cargo.site/t/original/i/4c2d91a31052e7bcb3315f3f5f66311697154c167c8c851e5e17344a254cf4a9/TNF_E-CommD_Homepage_1.jpg" data-mid="37016371" border="0" src="https://freight.cargo.site/w/1000/i/4c2d91a31052e7bcb3315f3f5f66311697154c167c8c851e5e17344a254cf4a9/TNF_E-CommD_Homepage_1.jpg" /><img width="1080" height="809" width_o="1080" height_o="809" data-src="https://freight.cargo.site/t/original/i/44b42859d812883ca5849bcf60cd1718047fa2809e3f323ba657bee815544215/TNF_E-CommD_Homepage_2.jpg" data-mid="37016372" border="0" src="https://freight.cargo.site/w/1000/i/44b42859d812883ca5849bcf60cd1718047fa2809e3f323ba657bee815544215/TNF_E-CommD_Homepage_2.jpg" /> Never Stop Exploring The North Face positions itself an aspirational lifestyle brand, “named for the coldest, most unforgiving side of a mountain”. With a mission to provide the best possible gear for athletes and explorers while preserving the environment, the brand evokes free-spirited curiosity and extreme persistence, set to inspire and encourage the community to ‘Never Stop Exploring’. Referencing the new brand guidelines and recent campaigns, we use bold typography and immersive imagery. The secondary brand colours were brought in subtly, and used to signify different functional elements of the site – Red is used for ‘Sale’, Blue for ‘New’, and Yellow for main calls to action in a purchasing flow. <img width="1080" height="810" width_o="1080" height_o="810" data-src="https://freight.cargo.site/t/original/i/e7318f16e9b8f6c68684bea3394e1978c9b8baab550e3eb5c482c23a2ad3b3e7/TNF_E-CommD_PLP.jpg" data-mid="37016374" border="0" src="https://freight.cargo.site/w/1000/i/e7318f16e9b8f6c68684bea3394e1978c9b8baab550e3eb5c482c23a2ad3b3e7/TNF_E-CommD_PLP.jpg" /> <img width="1080" height="807" width_o="1080" height_o="807" data-src="https://freight.cargo.site/t/original/i/911b1dcbaf961d4b4486f981b8870f4c1e0a972250e48582553d5b07c71a5a62/TNF_E-CommM_PLP.jpg" data-mid="37016377" border="0" src="https://freight.cargo.site/w/1000/i/911b1dcbaf961d4b4486f981b8870f4c1e0a972250e48582553d5b07c71a5a62/TNF_E-CommM_PLP.jpg" /> <img width="1080" height="2765" width_o="1080" height_o="2765" data-src="https://freight.cargo.site/t/original/i/1684817839de46b1bdf08ac94320e45caa4df655c22094c346ba07043361d3a5/TNF_E-CommD_PDP.jpg" data-mid="37016373" border="0" src="https://freight.cargo.site/w/1000/i/1684817839de46b1bdf08ac94320e45caa4df655c22094c346ba07043361d3a5/TNF_E-CommD_PDP.jpg" /> <img width="1080" height="807" width_o="1080" height_o="807" data-src="https://freight.cargo.site/t/original/i/4d814b08cfdc088add8de81d2bed1cedd54eeccd5583b1a53d2e793d8fb1a45d/TNF_E-CommM_PDP.jpg" data-mid="37016375" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/4d814b08cfdc088add8de81d2bed1cedd54eeccd5583b1a53d2e793d8fb1a45d/TNF_E-CommM_PDP.jpg" /> Exploration and Innovation For a brand that sets out to inspire, the stories around it set the scene. The curation of its online presence needs to be flexible to accommodate different kinds of rich content. Hence we not just designed for a better customer browsing experience, but also the ease of content authors continuously updating the website in the future. After an audit of the brand’s current blog and campaign materials, we created a suite of modules and content page templates to create the feel of a custom article each time. &nbsp; From affiliating athletes to sponsoring expeditions, The North Face ‘proves’ their products in real adventures. We decided to bring the blog forward into the same layer as information on athletes, expeditions and clothing collections. Collectively named ‘Explore The North Face’, the content sections of the site ties together the ethos of the brand with the innovation of their products in a more discoverable structure. <img width="1080" height="810" width_o="1080" height_o="810" data-src="https://freight.cargo.site/t/original/i/9ab969c89ad32abc6af3fa6f9a00d1e9d92d9888ad0132104d9c32eb4691d761/TNF_BlogD_Blog-landing.jpg" data-mid="37016436" border="0" src="https://freight.cargo.site/w/1000/i/9ab969c89ad32abc6af3fa6f9a00d1e9d92d9888ad0132104d9c32eb4691d761/TNF_BlogD_Blog-landing.jpg" /> <img width="1080" height="810" width_o="1080" height_o="810" data-src="https://freight.cargo.site/t/original/i/9948ef33819709b34350ff9f97b80047b802e9e6be3147593c2e82a6652c255e/TNF_BlogD_Athletes.jpg" data-mid="37016434" border="0" src="https://freight.cargo.site/w/1000/i/9948ef33819709b34350ff9f97b80047b802e9e6be3147593c2e82a6652c255e/TNF_BlogD_Athletes.jpg" /> <img width="1080" height="809" width_o="1080" height_o="809" data-src="https://freight.cargo.site/t/original/i/a9da2d52e9a04cccdb92505ec0216651ee0dcaba78a67d9a8df21d7bc0d40161/TNF_BlogM_Athlete.jpg" data-mid="37016440" border="0" src="https://freight.cargo.site/w/1000/i/a9da2d52e9a04cccdb92505ec0216651ee0dcaba78a67d9a8df21d7bc0d40161/TNF_BlogM_Athlete.jpg" /><img width="1080" height="810" width_o="1080" height_o="810" data-src="https://freight.cargo.site/t/original/i/60de22c4cb0d40127fe94996474f28d32db877a144a8cfb52e52d4ee7663df5e/TNF_BlogD_Expeditions.jpg" data-mid="37016439" border="0" src="https://freight.cargo.site/w/1000/i/60de22c4cb0d40127fe94996474f28d32db877a144a8cfb52e52d4ee7663df5e/TNF_BlogD_Expeditions.jpg" /> <img width="1080" height="807" width_o="1080" height_o="807" data-src="https://freight.cargo.site/t/original/i/cefccf2d82b5fb2e0f1b891f7cb41188ca2391a66613e2a8d2e9ad0a613f8624/TNF_BlogM_Collections.jpg" data-mid="37016441" border="0" src="https://freight.cargo.site/w/1000/i/cefccf2d82b5fb2e0f1b891f7cb41188ca2391a66613e2a8d2e9ad0a613f8624/TNF_BlogM_Collections.jpg" /> <img width="1080" height="4495" width_o="1080" height_o="4495" data-src="https://freight.cargo.site/t/original/i/cb219b68840d375c5bc1a30624d7b7e630c1c7c11bc44a1c550ea5a9d3e0e42d/TNF_BlogD_Blog-article.jpg" data-mid="37016435" border="0" src="https://freight.cargo.site/w/1000/i/cb219b68840d375c5bc1a30624d7b7e630c1c7c11bc44a1c550ea5a9d3e0e42d/TNF_BlogD_Blog-article.jpg" /> <img width="1080" height="1825" width_o="1080" height_o="1825" data-src="https://freight.cargo.site/t/original/i/5c7bdfecbc141fa964bfc84c235cc4b226296ef9dc49e9e0515e7c8c039f0b1c/TNF_BlogD_Collection-page.jpg" data-mid="37016437" border="0" src="https://freight.cargo.site/w/1000/i/5c7bdfecbc141fa964bfc84c235cc4b226296ef9dc49e9e0515e7c8c039f0b1c/TNF_BlogD_Collection-page.jpg" /> Client True AllianceThe North Face&nbsp;Agency&nbsp;Deloitte Digital Australia Collaborators John Hayles Creative design manager https://fionafanzhili.com/NSW-Rural-Fire-Services Thu, 16 Dec 2021 03:44:57 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/NSW-Rural-Fire-Services NSW Rural Fire ServicesUX &amp; UI | Product design The Australian bush fires of 2019-2020 burnt a deep scar within the New South Wales landscape and its communities. While the NSW Rural Fire Services received large volumes of volunteer interest to support firefighting efforts, the service itself had technological and process challenges to effectively utilise the community’s goodwill.&nbsp;Deloitte Digital was engaged in early 2021 to digitise the previously offline volunteer application process, with ServiceNow chosen as the platform to collect volunteer application data and triage the allocations to appropriate RFS staff in the approval process. I lead the detailed design of the end experience over a 2-month period, working with the client and other members of the team to co-design the applicant, volunteer and staff experience. I also created a digital design system that the RFS can leverage for other digital products in their future pipeline.&nbsp;Visit the site:NSW RFS Role Explorer <img width="2000" height="1381" width_o="2000" height_o="1381" data-src="https://freight.cargo.site/t/original/i/213ab7cd6c64d929a8da660a76b7d5d91a9b71fe802d8e68cc8e42e7edd6b122/Mobile_1.png" data-mid="127532449" border="0" src="https://freight.cargo.site/w/1000/i/213ab7cd6c64d929a8da660a76b7d5d91a9b71fe802d8e68cc8e42e7edd6b122/Mobile_1.png" /> A v-commerce experiece There are many ways for RFS volunteers to support their community, not just firefighting. However, it’s not well known to potential volunteers what they can do based on their skillsets and interests, or what kind of health requirements and time commitment might be involved with different types of memberships. In workshops with both RFS district staff and volunteers within brigades, we also found that roles can vary amongst brigades, with applicants often unaware and unprepared for the complexity of the whole application process. It become clear that upfront exploration before the potential volunteer even starts their application was actually a crucial yet missing part of the experience. So we created the RFS Role Explorer, leveraging e-commerce best practices to help interested individuals ‘shop around’ for the most suitable role before deciding how they want to spend their time. We tested ways of sorting the main types of roles, memberships and volunteer career pathways, to arrive at a level of detail that was useful but not overwhelming. The content design also covered the steps and requirements in the application process, with a brigade finder to help the applicant find the nearest and most convenient brigade to get to. <img width="2000" height="4613" width_o="2000" height_o="4613" data-src="https://freight.cargo.site/t/original/i/94ea2553360f368ffe0e2eded356f4ca37d2e6780502b9f097517b411f09d727/Role-explorer.png" data-mid="127532453" border="0" src="https://freight.cargo.site/w/1000/i/94ea2553360f368ffe0e2eded356f4ca37d2e6780502b9f097517b411f09d727/Role-explorer.png" /> <img width="2000" height="1381" width_o="2000" height_o="1381" data-src="https://freight.cargo.site/t/original/i/9528e5fecb0b8715ed84cd03fe872fc16c8591c10f9f8ee3109cbefeffdfe1ba/Mobile_2.png" data-mid="127532450" border="0" src="https://freight.cargo.site/w/1000/i/9528e5fecb0b8715ed84cd03fe872fc16c8591c10f9f8ee3109cbefeffdfe1ba/Mobile_2.png" /><img width="2000" height="4465" width_o="2000" height_o="4465" data-src="https://freight.cargo.site/t/original/i/2a28a6fa2d24b3277275e9e0c2c667aedfdef6956b901ecc8ff8fafd80f4c845/Junior-membership.png" data-mid="127532447" border="0" src="https://freight.cargo.site/w/1000/i/2a28a6fa2d24b3277275e9e0c2c667aedfdef6956b901ecc8ff8fafd80f4c845/Junior-membership.png" /> <img width="2000" height="2248" width_o="2000" height_o="2248" data-src="https://freight.cargo.site/t/original/i/1dae3a69a9f15e66aeb8956ef7489604310d25b6522e298c117874ca613aad61/Process---brigade-finder.png" data-mid="127532452" border="0" src="https://freight.cargo.site/w/1000/i/1dae3a69a9f15e66aeb8956ef7489604310d25b6522e298c117874ca613aad61/Process---brigade-finder.png" /> <img width="2000" height="1381" width_o="2000" height_o="1381" data-src="https://freight.cargo.site/t/original/i/751f347e7cab443fdb42728aafb797f4c54306e9451f86f91b119e155eff6b69/Apply-now.png" data-mid="127532445" border="0" src="https://freight.cargo.site/w/1000/i/751f347e7cab443fdb42728aafb797f4c54306e9451f86f91b119e155eff6b69/Apply-now.png" /> Digital applications The RFS originally had one paper form for all types of volunteer memberships, including applications for existing members to transfer to another brigade or take on a different role. These physical forms could get smudged, lost or incorrectly filled out with information that then needed to be requested from the applicant again. Going paperless allowed the NSW RFS to progressively disclose questions and instructions to the applicants, pre-populate existing volunteer information and triage applications based on urgency and time since submission. Applicants can also be kept up-to-date with the status of their application and access relevent resources at different steps of the way. ServiceNow’s existing workflow templates were leveraged and customised to address the experiential and security requirements of the volunteer application process. While addressing the technical complexities of digital parental consent for junior members and pre-requisite national police checks, we also workshopped the new process a digital flow would require from the NSW RFS staff, and tested the language used to explain complex terms and considerations. <img width="2000" height="1380" width_o="2000" height_o="1380" data-src="https://freight.cargo.site/t/original/i/785e9209fe8f170984248329ec882d83ebd7d2f84cc2fdb13b961c3aa5cc4d82/Dashboard.png" data-mid="127619804" border="0" src="https://freight.cargo.site/w/1000/i/785e9209fe8f170984248329ec882d83ebd7d2f84cc2fdb13b961c3aa5cc4d82/Dashboard.png" /> <img width="2000" height="1380" width_o="2000" height_o="1380" data-src="https://freight.cargo.site/t/original/i/512b54979139bead561b8c7c2404fe0f501d612cd1f8bbc1a658ced6fa496215/Applications-types.png" data-mid="127619803" border="0" src="https://freight.cargo.site/w/1000/i/512b54979139bead561b8c7c2404fe0f501d612cd1f8bbc1a658ced6fa496215/Applications-types.png" /> <img width="2000" height="1541" width_o="2000" height_o="1541" data-src="https://freight.cargo.site/t/original/i/8f7e9ac425a814771fa08451727d23ab6e965ba05f90cb429d5e212abe2db912/Start-of-form.png" data-mid="127619806" border="0" src="https://freight.cargo.site/w/1000/i/8f7e9ac425a814771fa08451727d23ab6e965ba05f90cb429d5e212abe2db912/Start-of-form.png" /> <img width="2000" height="2220" width_o="2000" height_o="2220" data-src="https://freight.cargo.site/t/original/i/c9e4b0430b9ac8d05316d7c665f28becd695a06917f8daec013bf537da507bca/Application-submitted.png" data-mid="127619802" border="0" src="https://freight.cargo.site/w/1000/i/c9e4b0430b9ac8d05316d7c665f28becd695a06917f8daec013bf537da507bca/Application-submitted.png" /> <img width="2000" height="1380" width_o="2000" height_o="1380" data-src="https://freight.cargo.site/t/original/i/d454fc5cb87bc115966c76dc3a99bf1e29d5f9852e5f3157c46dfeb6cf44c31b/Mobile---3.png" data-mid="127619805" border="0" src="https://freight.cargo.site/w/1000/i/d454fc5cb87bc115966c76dc3a99bf1e29d5f9852e5f3157c46dfeb6cf44c31b/Mobile---3.png" /> Client NSW Rural Fire Services&nbsp;Agency&nbsp;Deloitte Digital Australia Collaborators Debra Taylor National content lead Harry Mann National UX lead Christine Stanley UX delivery manager Emily Hudson Senior design researcherClarissa Lim UX designer Jamaica Eisner Content strategist https://fionafanzhili.com/Lion-Marketplace Fri, 17 Dec 2021 06:13:11 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/Lion-Marketplace Lion MarketplaceUX &amp; UI | Product design Lion Co is a leading beverage company primarily operating in Australia and New Zealand, with a growing presence in the UK and US markets, and a portfolio of brands that encompass a broad range of alcoholic and non-alcoholic beverages from Australia, New Zealand and the world. With a history of 180 years, Lion takes pride in its products and experiences offered to the community of customers and consumers alike. Lion’s Digital Solutions team was formed to address customer needs within its global remit, to bring joy to every digital experience and help Lion and its partners succeed online.&nbsp; I joined as the second hire in our in-house digital product design team. My first 5 months as the senior product designer was focused on Lion Marketplace, a B2B ordering solution. We used a design-led approach to discovery and delivery, where I scripted and conducted customer interviews, surveys and testing sessions, designed and prototyped solutions, facilitated co-design and technical validation jams, synthesised and played back findings to internal stakeholders, while also creating Lion’s first design system. This process laid the foundation for other e-commerce products and experiences to be delievered by the Digital Solutions team. The product won the 2022 Good Design Awards for Best Commercial Service. Visit the Marketplace landing page: http://my.lionco.com/ <img width="2226" height="1065" width_o="2226" height_o="1065" data-src="https://freight.cargo.site/t/original/i/60fd50bef6186b266fd5c18a3ed49f20a1e335a963b9f919f1f1a2e45c588a69/Components.png" data-mid="127812202" border="0" src="https://freight.cargo.site/w/1000/i/60fd50bef6186b266fd5c18a3ed49f20a1e335a963b9f919f1f1a2e45c588a69/Components.png" /> Lion’s digital brand evolution As the core brand of both Lion and Little World Beverages were originally designed for traditional print and static collateral, adjustments were made to meet accessibility requirements of digital products and experiences. I created a series of stylescapes to explore what we wanted the tone and personality of Lion’s digital brand to be, testing typographic treatments, imagery and approaches to layout. Themed by the look of light at different times of day, I tested how bold and dark, or light and airy, our look should be. The approach we landed on was the ‘golden hour’, which has a strong focal direction, but is neither harsh nor soft in how it presents the subjects on the page. For unauthenticated, public-facing interfaces, the type stack provides an editorial feel to the stylised, rich content. Whereas for authenticated B2B products that serve transactional purposes, a less stylised type stack is used to maximise legibility and conserve screen real estate for scanability. The digital palette included colour variations as user feedback for interactions, tweaked for better colour contrast. While the iconic Lion Orange is retained as the hero brand colour on public-facing experiences, it’s used more sparingly on transactional tools to call out deals and special offers, with the less aggressive primary green as the main interaction colour. <img width="8361" height="654" width_o="8361" height_o="654" data-src="https://freight.cargo.site/t/original/i/f5b2303f9f0168fe891c6459ed5179fcfdf0fa37f623ac73558a932c09c5588b/Stylescape-1_Morning.png" data-mid="127807747" border="0" src="https://freight.cargo.site/w/1000/i/f5b2303f9f0168fe891c6459ed5179fcfdf0fa37f623ac73558a932c09c5588b/Stylescape-1_Morning.png" /><img width="8361" height="654" width_o="8361" height_o="654" data-src="https://freight.cargo.site/t/original/i/f6f2beb67baa0db2911f3595ed4c2efec7c96ed5cb042d2bad5590f7341bc6e0/Stylescape-2_Afternoon.png" data-mid="127807748" border="0" src="https://freight.cargo.site/w/1000/i/f6f2beb67baa0db2911f3595ed4c2efec7c96ed5cb042d2bad5590f7341bc6e0/Stylescape-2_Afternoon.png" /> <img width="8361" height="654" width_o="8361" height_o="654" data-src="https://freight.cargo.site/t/original/i/2396100484fde1dc813165a66c8e50fdaaaa67087689575ed4b0ce9dfac20dd8/Stylescape-3_Evening.png" data-mid="127807749" border="0" src="https://freight.cargo.site/w/1000/i/2396100484fde1dc813165a66c8e50fdaaaa67087689575ed4b0ce9dfac20dd8/Stylescape-3_Evening.png" /> <img width="8361" height="654" width_o="8361" height_o="654" data-src="https://freight.cargo.site/t/original/i/58c64c9f3350a46d138318c446ffe6047c8b0f6f5c485bd17aaf055f7f173b91/Stylescape-4_Golden-hour.jpg" data-mid="127807750" border="0" src="https://freight.cargo.site/w/1000/i/58c64c9f3350a46d138318c446ffe6047c8b0f6f5c485bd17aaf055f7f173b91/Stylescape-4_Golden-hour.jpg" /> Marketplace portal and app These days, most FMCG businesses have a some sort of customer self-service digital platform. While Lion had an existing portal built on SAP Hybris, we needed something that allowed customers to access the data they wanted, when they wanted it, where they wanted it, and in a format that they could consume. We built an app so that customers could place orders and manage their Lion account from anywhere, at any time. And while it excited many of our customers, a large portion told us they would still need, or prefer, to use a web portal to complete large orders on a shared computer in the back-office of their pub. So we delivered both at the same time, leveraging existing back-end frameworks and APIs, but built our own front-end. <img width="2160" height="1604" width_o="2160" height_o="1604" data-src="https://freight.cargo.site/t/original/i/3f3051618e2786c18d02372a67deb84596672a39f85bf5668e2577852a3ad518/Device-mockups.png" data-mid="127816490" border="0" src="https://freight.cargo.site/w/1000/i/3f3051618e2786c18d02372a67deb84596672a39f85bf5668e2577852a3ad518/Device-mockups.png" /> Digital product design process Discovery interviewsWe interviewed a variety of on-premise hospitality venues and off-premise retail customers, as well as internal stakeholders such as Sales team members from Australia and New Zealand. This was to uncover unmet needs and test assumptions, understand what roles existed in their business, their internal processes, and what pain points they had with the existing customer portal. &nbsp; Collaboration sessionsWe converted customer needs, goals and pain points into features for our product roadmap and improved information architecture. Through a series of design jams, technical validation sessions and stakeholder reviews, we iterated on initial concepts and prioritised the backlog. Test and learn We asked our customers who had differing levels of tech proficiency to test our designs using interactive prototypes and Treejack tests. Once we had taken their feedback on board, we created a pilot group for a soft launch of the built product, to test and iterate with a live version of the tool. Continuous improvement Since the initial launch of the app and portal, we have been collecting feedback from customers, sales team members and other subject matter experts from various parts of the business. We have also been revisiting existing features to consider how they can be done better, even if it’s purely on the UI level to improve the micro-interactions and streamline the management of front-end code. <img width="2000" height="4005" width_o="2000" height_o="4005" data-src="https://freight.cargo.site/t/original/i/ea372268f0774f9aefffc68ee348a12eb6860508ca031fc6b9742ee73422b146/Homepage.png" data-mid="127807740" border="0" src="https://freight.cargo.site/w/1000/i/ea372268f0774f9aefffc68ee348a12eb6860508ca031fc6b9742ee73422b146/Homepage.png" /> <img width="2000" height="1422" width_o="2000" height_o="1422" data-src="https://freight.cargo.site/t/original/i/718a016fee9d0ba1b805995e1de2f23ad7047c01da9aac32c7c1f9a297a95f23/Promotional-modal.png" data-mid="127649786" border="0" src="https://freight.cargo.site/w/1000/i/718a016fee9d0ba1b805995e1de2f23ad7047c01da9aac32c7c1f9a297a95f23/Promotional-modal.png" /> <img width="2000" height="1422" width_o="2000" height_o="1422" data-src="https://freight.cargo.site/t/original/i/50f80a1cd9ced6e877d036add611daa6eb6b81368f868ca2caebcdce3e314d98/Search.png" data-mid="127807741" border="0" src="https://freight.cargo.site/w/1000/i/50f80a1cd9ced6e877d036add611daa6eb6b81368f868ca2caebcdce3e314d98/Search.png" /> <img width="2000" height="1381" width_o="2000" height_o="1381" data-src="https://freight.cargo.site/t/original/i/638ebeba2b5ad0056d4cb18aef9af18d9c03782a9069d2e781dfe6d5b30b2036/Mobile_1.png" data-mid="127649782" border="0" src="https://freight.cargo.site/w/1000/i/638ebeba2b5ad0056d4cb18aef9af18d9c03782a9069d2e781dfe6d5b30b2036/Mobile_1.png" /> <img width="2000" height="1422" width_o="2000" height_o="1422" data-src="https://freight.cargo.site/t/original/i/58f9ea307983d022cce91a2f8aed00fb4f4ef27013070a5c6d8c228015865a4d/Product-list-mini-cart.png" data-mid="127649785" border="0" src="https://freight.cargo.site/w/1000/i/58f9ea307983d022cce91a2f8aed00fb4f4ef27013070a5c6d8c228015865a4d/Product-list-mini-cart.png" /><img width="2000" height="1381" width_o="2000" height_o="1381" data-src="https://freight.cargo.site/t/original/i/aa2b7134ec3036b13b958a9a5680c8ad6d5ea4eaacf480a320ffcb443dd9648b/Mobile_2.png" data-mid="127649783" border="0" src="https://freight.cargo.site/w/1000/i/aa2b7134ec3036b13b958a9a5680c8ad6d5ea4eaacf480a320ffcb443dd9648b/Mobile_2.png" /> <img width="2000" height="2252" width_o="2000" height_o="2252" data-src="https://freight.cargo.site/t/original/i/8994401d3f807cd907b50bcd9c256765de7bc7e9e6ca66bbc4ab905e082733aa/Support-center.png" data-mid="127650240" border="0" src="https://freight.cargo.site/w/1000/i/8994401d3f807cd907b50bcd9c256765de7bc7e9e6ca66bbc4ab905e082733aa/Support-center.png" /> <img width="2000" height="1381" width_o="2000" height_o="1381" data-src="https://freight.cargo.site/t/original/i/5387fc615bef0e963fad4e797914213dea8994f6625b6aebc277832ef1a32128/Mobile_3.png" data-mid="127650239" border="0" src="https://freight.cargo.site/w/1000/i/5387fc615bef0e963fad4e797914213dea8994f6625b6aebc277832ef1a32128/Mobile_3.png" /> Fluid design system I created Lion’s Fluid Design System in Figma, to manage design at scale with reusable components and patterns across web and mobile. We continously update our components to integrate platfrom differences between app and web, and use case differences between B2B and D2C.Lion is a house of brands, and different parts of the business came from the acquisition of well-known distributors and breweries across the world. By creating a design system on which separate brands can be applied to existing components, Fluid allows us to rapidly deliver new and additional digital products that are managed within the same ecosystem. <img width="2800" height="2100" width_o="2800" height_o="2100" data-src="https://freight.cargo.site/t/original/i/48dca3d869461982fbaf250204cdacab8cdb88be9b88a7aaa9af1603c7c46f42/Design-system_Lion.png" data-mid="129294242" border="0" src="https://freight.cargo.site/w/1000/i/48dca3d869461982fbaf250204cdacab8cdb88be9b88a7aaa9af1603c7c46f42/Design-system_Lion.png" /> <img width="2880" height="1990" width_o="2880" height_o="1990" data-src="https://freight.cargo.site/t/original/i/7df7a5b25947005ac201dae57c6d12cd7b63c237aceb54421e4b310b89ebd504/D-Product-card-interactions-areas2x.jpg" data-mid="129293992" border="0" src="https://freight.cargo.site/w/1000/i/7df7a5b25947005ac201dae57c6d12cd7b63c237aceb54421e4b310b89ebd504/D-Product-card-interactions-areas2x.jpg" /><img width="2880" height="1990" width_o="2880" height_o="1990" data-src="https://freight.cargo.site/t/original/i/8193d8f409cacaa69623f7ae3fe769a1c99c7292ceb3e8f322baa671ef54dd2e/D-Mobile-app-bottom-navigation2x.jpg" data-mid="129294090" border="0" src="https://freight.cargo.site/w/1000/i/8193d8f409cacaa69623f7ae3fe769a1c99c7292ceb3e8f322baa671ef54dd2e/D-Mobile-app-bottom-navigation2x.jpg" /> CompanyLion Co&nbsp;Team&nbsp;Lion Digital Collaborators John Hayles Digital design &amp; UX lead https://fionafanzhili.com/Shippit Wed, 28 Feb 2024 05:38:47 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/Shippit ShippitProduct design | UX &amp; UI Shippit is a B2B SaaS company in logistics that aggregates carrier services, e-commerce platforms and order management systems into an all-in-one platform. Originating in Australia, Shippit had been scaling up its&nbsp; presence in Southeast Asia and New Zealand.&nbsp;I joined the 3-person team of senior product designers at Shippit to work with multiple squads on cross-functional initiatives to grow into new shipping niches, localise to international markets,&nbsp; and improve existing offerings. We conducted contextual enquiries to carrier depots as well as retail stores and warehouses, to understand the physical and operational needs of different user personas. We interviewed, piloted and tested proofs of concept with internal SMEs and users across a range of business types for potential strategic pivots and investments. And in the process of detailed design for delivery, we worked with stakeholders in product, engineering, support, commercial and marketing to build and launch new features and services in market, then monitor its adoption and usage. <img width="2130" height="1340" width_o="2130" height_o="1340" data-src="https://freight.cargo.site/t/original/i/70ca6397a5d80f86c20e91b4fb4b1f922765b86c9096c9925587e7e44b5ecf6d/Preview-no-bg-2.png" data-mid="205919951" border="0" src="https://freight.cargo.site/w/1000/i/70ca6397a5d80f86c20e91b4fb4b1f922765b86c9096c9925587e7e44b5ecf6d/Preview-no-bg-2.png" />Expanding into new markets I joined Shippit just as the New Markets portfolio was formed to relaunch Shippit in Southeast Asia, starting with Singapore, then Malaysia six months later. The team worked on localisation uplifts to the app such as payment methods (e.g. digital wallets), addressing, and carrier options. We also drove larger initiatives on shipping niches such as international shipping and on-demand, which was more common, profitable and necessary in the region than it was to most of Shippit’s Australian customers. Thus it became ever more necessary to standardise but also increase flexibility of foundational patterns, such as currency and address formats. Shipping niches required order details and settings templates that only disclose conditionally relevent details. And introducing new types of freight, such as pallets, on a platform originally created for small parcels, needed a revised structure usable by both UI and API customers. <img width="1440" height="1032" width_o="1440" height_o="1032" data-src="https://freight.cargo.site/t/original/i/664e5887efdd0cb54910f1802fdd8877902bae859fabe90f8db3084db1f67215/New-order---Company---New.png" data-mid="205640206" border="0" src="https://freight.cargo.site/w/1000/i/664e5887efdd0cb54910f1802fdd8877902bae859fabe90f8db3084db1f67215/New-order---Company---New.png" /> <img width="2698" height="1298" width_o="2698" height_o="1298" data-src="https://freight.cargo.site/t/original/i/3519e002290e06e1b5107f7dfbbf01224270eaac2d513791ddf249542349082a/Screenshot-2024-03-03-at-1.36.53pm.png" data-mid="205917732" border="0" src="https://freight.cargo.site/w/1000/i/3519e002290e06e1b5107f7dfbbf01224270eaac2d513791ddf249542349082a/Screenshot-2024-03-03-at-1.36.53pm.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/33010b599522dd1f678b745a6260db4ee7449ca077c031fe55413fd3fe92c244/Scroll-behavouir.png" data-mid="205918178" border="0" src="https://freight.cargo.site/w/1000/i/33010b599522dd1f678b745a6260db4ee7449ca077c031fe55413fd3fe92c244/Scroll-behavouir.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/d3413e4bfbe285c4ba7ddaa838ea6a074d8322b56317bc58f4104d486802e678/Display-behaviour.png" data-mid="205918177" border="0" src="https://freight.cargo.site/w/1000/i/d3413e4bfbe285c4ba7ddaa838ea6a074d8322b56317bc58f4104d486802e678/Display-behaviour.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/a5626b2a84412bb117cf2739f7a1305d4a6d415a2638052bdeb3d34b10042ade/OSP---Edit---Full-width_-2.png" data-mid="205917656" border="0" src="https://freight.cargo.site/w/1000/i/a5626b2a84412bb117cf2739f7a1305d4a6d415a2638052bdeb3d34b10042ade/OSP---Edit---Full-width_-2.png" /><img width="1440" height="1330" width_o="1440" height_o="1330" data-src="https://freight.cargo.site/t/original/i/b74a88873dfd97b6b1a5fe7dc8df329eabb3e33eaf4fb3623086c7ab61929e1c/Carrier-settings-details---AFTER.png" data-mid="205816132" border="0" src="https://freight.cargo.site/w/1000/i/b74a88873dfd97b6b1a5fe7dc8df329eabb3e33eaf4fb3623086c7ab61929e1c/Carrier-settings-details---AFTER.png" /> Empowering enterprise users with ease and granularity of automation As Shippit scaled, so has its customer base and the complexity of their operations. Retailers ship a broad of range of goods (e.g. fragile, dangerous or bulky products) out of different kinds of dispatch locations (e.g. warehouse vs store) using a range of carrier services (e.g. hub &amp; spoke vs point-to-point, same-day / on-demand vs standard) to varying destinations. I worked in the portfolio that owned a suite of carrier tooling aimed to cater to the diverse needs and nuances of senders and recipients.&nbsp;One such tool is the Rules Engine, which allows retailers to create carrier allocation rules based on different attributes of an order. The original proof of concept was in market for a few months. In a focused effort to deep dive on on the configuration and optimisation needs, I researched into light and super users of the tool. After synthesising the findings, and conceptualising the opportunities, I workshopped the order of priorities with the tech team and broader Product org. <img width="2060" height="1364" width_o="2060" height_o="1364" data-src="https://freight.cargo.site/t/original/i/c7e6da5834ef372549708d16a6c0c3a0d2fa80b246930b6e379f5af8a123d567/Screenshot-2024-02-28-at-4.07.06pm.png" data-mid="205640209" border="0" src="https://freight.cargo.site/w/1000/i/c7e6da5834ef372549708d16a6c0c3a0d2fa80b246930b6e379f5af8a123d567/Screenshot-2024-02-28-at-4.07.06pm.png" /> We found that rules as a concept is highly versatile, and has the potential to be applied far beyond its current context of carrier allocation. Extending the capabilities of Rules Engine to affect other forms of&nbsp; preferences using if-this-then-that logic would allow enterprise merchants to set up all kinds of granular control just from using Shippit’s settings UI. This contributes to the value of Shippit’s software in addition to its vast carrier library, and helps Shippit differentiate from other aggregator platforms in the market. Customer data that showed the vast majority of existing rules had only one condition. Customers explained that this was due to conditions and values only allowing ‘and’ logic but not ‘or’, resulting in the need for customers to create multiple rules to cover the range of a possible scenario. Some customers also told us that they initially expected ‘or’ logic to be applied, only to find out later that the rules they created didn’t work as they thought they would.&nbsp; As it’s critical for customers to first and foremost create rules that will work as intended, I refined the patterns for rule creation, and worked with the relevent squad to introduce methods of bulk rule creation as the first batch of enhancements. <img width="1440" height="992" width_o="1440" height_o="992" data-src="https://freight.cargo.site/t/original/i/42a8fbf0c49e20b59f85ec292307fbcb4d97711f2348fc0cc11533c204e8dac5/D-Settings_Rules.png" data-mid="205640203" border="0" src="https://freight.cargo.site/w/1000/i/42a8fbf0c49e20b59f85ec292307fbcb4d97711f2348fc0cc11533c204e8dac5/D-Settings_Rules.png" /> <img width="1440" height="992" width_o="1440" height_o="992" data-src="https://freight.cargo.site/t/original/i/eaae689386c5ca4c64a3b44d2de2ca458d333b6c02b9ec8078b70d8f563cf329/New-rule_multiple-condition-2.png" data-mid="205812863" border="0" src="https://freight.cargo.site/w/1000/i/eaae689386c5ca4c64a3b44d2de2ca458d333b6c02b9ec8078b70d8f563cf329/New-rule_multiple-condition-2.png" /> <img width="1440" height="992" width_o="1440" height_o="992" data-src="https://freight.cargo.site/t/original/i/8c3e495b84d8ac9ba3f39b9dbd63ab11814506851683898957bc8b0d86137c68/D-Settings_Rules-3.png" data-mid="205917654" border="0" src="https://freight.cargo.site/w/1000/i/8c3e495b84d8ac9ba3f39b9dbd63ab11814506851683898957bc8b0d86137c68/D-Settings_Rules-3.png" /> <img width="1440" height="992" width_o="1440" height_o="992" data-src="https://freight.cargo.site/t/original/i/3c47b615ed5b91468f4d815014b9902dd452f5e3d1af52317077a605cb717b80/D-Settings_Rules-4.png" data-mid="205917655" border="0" src="https://freight.cargo.site/w/1000/i/3c47b615ed5b91468f4d815014b9902dd452f5e3d1af52317077a605cb717b80/D-Settings_Rules-4.png" /> Evolving the design system With a small number of designers and an engineering team of full-stack developers, the Shippit design system was managed in a federated model. I drove the recurring cross-functional syncs and documentation, and worked with engineers with front-end interest to prioritise, test and communicate updates across the product and engineering teams.After foundational styles and elements got built, we encountered scenarios where more complex functionalities were required out of a seemingly simple component. For such variants that are rich in context and complex in logic that drives the possible interactions, there were still multiple use cases once a pattern was introduced. These were added to the component library with additional behaviour states. <img width="2512" height="1116" width_o="2512" height_o="1116" data-src="https://freight.cargo.site/t/original/i/ac34662d462f4c57b8ffd3f92351e61ffafbd0e7778a170d62d7b40f80442789/Text-input-components.png" data-mid="205640210" border="0" src="https://freight.cargo.site/w/1000/i/ac34662d462f4c57b8ffd3f92351e61ffafbd0e7778a170d62d7b40f80442789/Text-input-components.png" /> <img width="1172" height="1549" width_o="1172" height_o="1549" data-src="https://freight.cargo.site/t/original/i/3e530bf05dc65880ed1c200ecce85a737232f3fbc4b6ad570c52abd2a28d0af5/Multi-value-input.png" data-mid="205640205" border="0" src="https://freight.cargo.site/w/1000/i/3e530bf05dc65880ed1c200ecce85a737232f3fbc4b6ad570c52abd2a28d0af5/Multi-value-input.png" /> <img width="1172" height="1549" width_o="1172" height_o="1549" data-src="https://freight.cargo.site/t/original/i/a2171243c53a7111383dccecd5bbd7a6ca0db2a845cd9a88a5f7c89c1d7e4347/Multi-carrier.png" data-mid="205640204" border="0" src="https://freight.cargo.site/w/1000/i/a2171243c53a7111383dccecd5bbd7a6ca0db2a845cd9a88a5f7c89c1d7e4347/Multi-carrier.png" /> Visualising insights and simulating impact As a platform with two-way integrations into carriers, e-commerce carts and inventory management platforms, Shippit had the potential to be a data rich product not only in automation but also as an insights platform. We created advance reporting aimed to distil actionable insights for customers, which flowed to scenario based simulation for subject matter experts to weigh up strategic decisions. With a range of data tooling in place and visualisation tools chosen to be implemented by the data squad for different internal and expernal users, I also created a platform agnostic set of guidelines to create a level of consistency between different sets of visualisation reports.&nbsp; <img width="1440" height="820" width_o="1440" height_o="820" data-src="https://freight.cargo.site/t/original/i/504280f6f5e65a0738fac2b1bd55ab5de8d00e24834b2beac23bfb2ba820a08d/Line-graph.png" data-mid="205831553" border="0" src="https://freight.cargo.site/w/1000/i/504280f6f5e65a0738fac2b1bd55ab5de8d00e24834b2beac23bfb2ba820a08d/Line-graph.png" /> <img width="1440" height="820" width_o="1440" height_o="820" data-src="https://freight.cargo.site/t/original/i/57af6d6873b03cfaaf1b55aaf0f292ed2ffc24d8dc2614da12250e56bce4a8a7/Pie-graph.png" data-mid="205831556" border="0" src="https://freight.cargo.site/w/1000/i/57af6d6873b03cfaaf1b55aaf0f292ed2ffc24d8dc2614da12250e56bce4a8a7/Pie-graph.png" /> <img width="1440" height="1072" width_o="1440" height_o="1072" data-src="https://freight.cargo.site/t/original/i/3d422e0e07e760ca2c7a080ccfc71bc4654f21be8f8a2845c6682c2a69be3af6/Column-graphs.png" data-mid="205831552" border="0" src="https://freight.cargo.site/w/1000/i/3d422e0e07e760ca2c7a080ccfc71bc4654f21be8f8a2845c6682c2a69be3af6/Column-graphs.png" /> <img width="1440" height="1072" width_o="1440" height_o="1072" data-src="https://freight.cargo.site/t/original/i/86cd1404876a35c61554f1b2943461caf6147db36242bb6a2db05e3db823546d/Multi-column-graphs.png" data-mid="205831554" border="0" src="https://freight.cargo.site/w/1000/i/86cd1404876a35c61554f1b2943461caf6147db36242bb6a2db05e3db823546d/Multi-column-graphs.png" /> <img width="1440" height="1101" width_o="1440" height_o="1101" data-src="https://freight.cargo.site/t/original/i/c24471ee7eb2d2a3ff089b4e0181c39b6b6504b968197327620a8cba677d53f0/Bar-graphs.png" data-mid="205831551" border="0" src="https://freight.cargo.site/w/1000/i/c24471ee7eb2d2a3ff089b4e0181c39b6b6504b968197327620a8cba677d53f0/Bar-graphs.png" /> <img width="1440" height="1101" width_o="1440" height_o="1101" data-src="https://freight.cargo.site/t/original/i/0476286540d3bfb20658d748e3667ad9d857f0380035a99d8767865ffd0a4f3f/Stacked-bar-graphs.png" data-mid="205831557" border="0" src="https://freight.cargo.site/w/1000/i/0476286540d3bfb20658d748e3667ad9d857f0380035a99d8767865ffd0a4f3f/Stacked-bar-graphs.png" /> Company Shippit Collaborators David Landgren Senior Product Designer&nbsp; Riel Mosqueriola Senior Product Designer Octa MoningkaSenior Product Designer https://fionafanzhili.com/Everlab Thu, 27 Feb 2025 04:37:20 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/Everlab EverlabProduct design | UX &amp; UI Everlab is a preventative health service that offers a range of screening programs to help patients detect risk of future disease and provide protocols to mitigate and reduce risk. I joined Everlab as the founding product designer as the business prepared to scale before raising its next round of investment funding. Over the course of 5 months, I worked with the founding team to research patient and clinician needs and opportunities, build a scalable patient app and portal with a shared design system, and experimented with organic growth funnels using no-code tools. Throughout this period, I also introduced processes and frameworks to evolve our ways of working, as a distributed team needs clear alignment on priorities, open questions, decisions and release plans. We also collaborated with the branding agency For The People in the Everlab rebrand. <img width="4000" height="3002" width_o="4000" height_o="3002" data-src="https://freight.cargo.site/t/original/i/3738fe8d64f77dd9baf005be5d9ec6ceb6c00d18ac9a5ac0c87c87ff21980761/Preview.png" data-mid="227328397" border="0" src="https://freight.cargo.site/w/1000/i/3738fe8d64f77dd9baf005be5d9ec6ceb6c00d18ac9a5ac0c87c87ff21980761/Preview.png" /> Researching and prioritising customer opportunities Everlab started with one comprehensive health check program. While early adopters who went through the experience derived a lot of value from it, it also became clear that what patients wanted and needed varied greatly by demographic, socioeconomic situation and level of obsession with their health. Once an existing member has completed their first year, what interested them going forward also varied by life stage and risk levels. Everlab needed flexibility to experiment, adjust and introduce new offerings so that each patient can have the right preventative health program for them. The medical team explored a range of potential ‘a la carte’ and ‘set menu’ health checks to address new segments and patient personas. I conducted surveys and interviews with existing and prospective patients to test these ideas along with new app features. By mapping out customer journeys and synthesising feedback, I fleshed out behavioural aspects of patients and constructed recommendations for next steps.&nbsp; <img width="1144" height="1416" width_o="1144" height_o="1416" data-src="https://freight.cargo.site/t/original/i/0368549af8ab2d9196ae8ae5920e6141e3c24b7bfaffd9757e460670d4a71b5b/Screenshot-2024-12-05-at-4.48.04PM.png" data-mid="227311503" border="0" src="https://freight.cargo.site/w/1000/i/0368549af8ab2d9196ae8ae5920e6141e3c24b7bfaffd9757e460670d4a71b5b/Screenshot-2024-12-05-at-4.48.04PM.png" /> Building the foundations of a self-service patient app The Everlab patient app and online portal is the patient’s digital companion throughout the Everlab programs. With an omni-channel approach, each patient can complete each task in the platform and viewport most suitable to them. Regardless of which program a patient signs up for, the same building blocks of the in-app experience scales to each stage of their journey. When a patient first joins, they provide information about their health history and lifestyle. When they have screening or consultation appointments, they use the app to book and prepare for their sessions. And once testing results are ready or a plan has been workshopped with clinicians, the repository of the patient’s health data and Everlab’s extensive protocols are available through here as well. <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/4fd3dcf39a8051430cc0a99afd8218821d0e45fe1ffac4e01fc45de97ffe940f/D_Timeline.png" data-mid="227311538" border="0" src="https://freight.cargo.site/w/1000/i/4fd3dcf39a8051430cc0a99afd8218821d0e45fe1ffac4e01fc45de97ffe940f/D_Timeline.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/8655e38e289cb9e4cd57efe61b8492e9104c348a480283cc465506920736f75f/M_Overview-and-tasks.png" data-mid="227326498" border="0" src="https://freight.cargo.site/w/1000/i/8655e38e289cb9e4cd57efe61b8492e9104c348a480283cc465506920736f75f/M_Overview-and-tasks.png" /> <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/40e8c769003f76a622c7495a0f31eda89be2d9019303b60bb7c8b4edddac7ff8/D_Biomarkers.png" data-mid="227311532" border="0" src="https://freight.cargo.site/w/1000/i/40e8c769003f76a622c7495a0f31eda89be2d9019303b60bb7c8b4edddac7ff8/D_Biomarkers.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/4cad3ef31bc6cb0aed565fb2270f0ffdf6eff3655f98a804a546d2ee5e84f26c/M_Biomarker-and-related.png" data-mid="227326497" border="0" src="https://freight.cargo.site/w/1000/i/4cad3ef31bc6cb0aed565fb2270f0ffdf6eff3655f98a804a546d2ee5e84f26c/M_Biomarker-and-related.png" /> Enhancing interactions with data One of the most exciting things that Everlab patients like to talk about are their performance, and improvement to key biomarkers that are important to them. To build on this value, we continously explored ways to add context to help patients understand where they currently stand, and appreciate the progress they made by implementing their strategies. As we explored ways to enrich the data show to each patient, we played with reference ranges, benchmarking and simulation. <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/1da4e465996244ddd06958bb6fc29cf169ed0e9c05dc7fb008326b6097a15bc4/D_Physical-biomarkers.png" data-mid="227312737" border="0" src="https://freight.cargo.site/w/1000/i/1da4e465996244ddd06958bb6fc29cf169ed0e9c05dc7fb008326b6097a15bc4/D_Physical-biomarkers.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/af46a5be9eb5aeec5d04bcd5f621cd3d90a424cffeca6f0290b87e455e5ef3d2/M_Physical-biomarkers.png" data-mid="227312745" border="0" src="https://freight.cargo.site/w/1000/i/af46a5be9eb5aeec5d04bcd5f621cd3d90a424cffeca6f0290b87e455e5ef3d2/M_Physical-biomarkers.png" /> Facilitating delivery planning and change management Everlab needed modularity in both service and tech components. As a startup, many V1 functionalities were created with no-code tools, which served as a proof of concept that later needed to be replaced with more mature systems and customised functionalities. To collaboratively ideate, validate and plan out implementation of changes, I mapped out service blueprints and logic flows to facilitate inception and validation discussions with the internal tech, clinical and operations teams. <img width="1736" height="1326" width_o="1736" height_o="1326" data-src="https://freight.cargo.site/t/original/i/097f58b6bd38eb06a2c475857e19c027c981e0ed0ac7e3b193db157f5a5b52d8/Screenshot-2024-12-05-at-4.46.11PM.png" data-mid="227311502" border="0" src="https://freight.cargo.site/w/1000/i/097f58b6bd38eb06a2c475857e19c027c981e0ed0ac7e3b193db157f5a5b52d8/Screenshot-2024-12-05-at-4.46.11PM.png" /> Architecting a context and data-rich design system We implemented Everlab’s digital product component library using the atomic design system approach, where: Elements are the smallest standalone ‘dumb’ UI components e.g. a button Molecules are more complex ‘dumb’ UI components that may contain smaller elements e.g. a card Organisms are ‘smart’ components that represent a backend data object, and may have more complex states depending on the context in which it appears e.g. the AppointmentCard Templates are dumb containers with variatons based on the context for its use e.g. a information display modal vs a form modal Pages are specific pages in the product, constructed using a mix of the above For data-rich organisms, I also defined: Permission-based modes to view or edit data Detail-based formats such preview cards or detailed tables Additional states to show and hide more items The tech team built the product UI components through Capacitor for them to be shareable across iOS, Android and web platforms, and between patient and clinician tools. For the public website, a separate component library was built and managed in Webflow. <img width="2656" height="4105" width_o="2656" height_o="4105" data-src="https://freight.cargo.site/t/original/i/c15aef6460ab38e9e387b1c0a38fd1e9bf4e10b3f913843ab74e2b495ed398d1/Icon-cards.png" data-mid="227312431" border="0" src="https://freight.cargo.site/w/1000/i/c15aef6460ab38e9e387b1c0a38fd1e9bf4e10b3f913843ab74e2b495ed398d1/Icon-cards.png" /> <img width="2656" height="3791" width_o="2656" height_o="3791" data-src="https://freight.cargo.site/t/original/i/9187fc4c870b39939daf57b67b231d1b108742e12449a7cef557d0d5de173b65/Notifications.png" data-mid="227312432" border="0" src="https://freight.cargo.site/w/1000/i/9187fc4c870b39939daf57b67b231d1b108742e12449a7cef557d0d5de173b65/Notifications.png" /> <img width="2656" height="8339" width_o="2656" height_o="8339" data-src="https://freight.cargo.site/t/original/i/7e47f51f011bb866c0868fd4c89b408bcf6facb4a4b93fbab2c9b329bc79588a/Appointment-card.png" data-mid="227312428" border="0" src="https://freight.cargo.site/w/1000/i/7e47f51f011bb866c0868fd4c89b408bcf6facb4a4b93fbab2c9b329bc79588a/Appointment-card.png" /> Company Everlab Collaborators Sarah Wise Contractor Visual Designer&nbsp; For The PeopleBranding agency&nbsp; https://fionafanzhili.com/CommBank-data-visualisation-toolkit Wed, 28 Aug 2019 05:14:34 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/CommBank-data-visualisation-toolkit CommBank data visualisation toolkitData visualisation | UX &amp; UI | Design education While CommBank has been using reporting dashboards in many areas of the business, teams had been extracting data and generating graphs in silos. As part of an engagement with the Risk reporting team to re-design a series of Tableau dashboards for non-financial risk, our team was also tasked with creating a “data visualisation toolkit”. This artefact is used as internal design education to help different teams align and conslidate their approach to data visualisation agnostic of platforms and with consideration to both interactive and static visualisations, from the inital process of determining what data is actually needed, to the selection and detailed execution of the individual graphs. As the data visualisation specialist on the project, I faciliated a series of workshops with my team to draw out the strategic intent of the program, analyse existing dashboards and gather requirements from creaters as well as users of the visualisations to create a set of personas with business stakeholders and, test the re-designed dashboards. As the dashboards we created for the Risk team contained highly confidential data and information, and many sample graphs for applied usage of visualisations in the toolkit are also not for public sharing, this case study shows only sample pages containing best practice principles and guidelines. <img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/cda19290f8feb16b49f5d89ffd14f2f4a752b99bf0ac78ef5ce060cddd51763f/1_Pt-1-cover.jpg" data-mid="121118365" border="0" src="https://freight.cargo.site/w/1000/i/cda19290f8feb16b49f5d89ffd14f2f4a752b99bf0ac78ef5ce060cddd51763f/1_Pt-1-cover.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/3e501bae534c4829c0624069141bfb4dcc3c110f47524bad76f6f27d7ed43fe3/2_Why-datavis.jpg" data-mid="121118366" border="0" src="https://freight.cargo.site/w/1000/i/3e501bae534c4829c0624069141bfb4dcc3c110f47524bad76f6f27d7ed43fe3/2_Why-datavis.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/253fc3f00f8b8e36c5f2c947edb2926f71cc4e40e27a0f2ad939130d3c48af9e/3_Cognition---perception.jpg" data-mid="121118367" border="0" src="https://freight.cargo.site/w/1000/i/253fc3f00f8b8e36c5f2c947edb2926f71cc4e40e27a0f2ad939130d3c48af9e/3_Cognition---perception.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/d942668215dc96a6f1e6d80a15c508a0326664543b3e6e851d09e2be6180e327/4_Eye-movement.jpg" data-mid="121118368" border="0" src="https://freight.cargo.site/w/1000/i/d942668215dc96a6f1e6d80a15c508a0326664543b3e6e851d09e2be6180e327/4_Eye-movement.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/6569d848c53a4b1deaadc2d864d2de875ea209e2422cb4998db49a607fd5bbde/5_Principles.jpg" data-mid="121118369" border="0" src="https://freight.cargo.site/w/1000/i/6569d848c53a4b1deaadc2d864d2de875ea209e2422cb4998db49a607fd5bbde/5_Principles.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/707dabb0538edd15e6b39a6365db65bc33ae7d1d667426ceab8bf32453fb797a/6_Dos---don-ts.jpg" data-mid="121118370" border="0" src="https://freight.cargo.site/w/1000/i/707dabb0538edd15e6b39a6365db65bc33ae7d1d667426ceab8bf32453fb797a/6_Dos---don-ts.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/69237b0fcf8d2ecd51ba30e89490f72f5402e4a80d495419543260cad8bca181/7_Pt-2-cover.jpg" data-mid="121118371" border="0" src="https://freight.cargo.site/w/1000/i/69237b0fcf8d2ecd51ba30e89490f72f5402e4a80d495419543260cad8bca181/7_Pt-2-cover.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/ecba8483ac2a27f88b81d89d5bc1103391be22d9a92633975bdc30708af91f95/8_Process.jpg" data-mid="121118372" border="0" src="https://freight.cargo.site/w/1000/i/ecba8483ac2a27f88b81d89d5bc1103391be22d9a92633975bdc30708af91f95/8_Process.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/e2036b33075eecfe9f3d2ddd93435af82178392fcae1a639e95508ce3a6a5449/9_Checklist.jpg" data-mid="121118373" border="0" src="https://freight.cargo.site/w/1000/i/e2036b33075eecfe9f3d2ddd93435af82178392fcae1a639e95508ce3a6a5449/9_Checklist.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/c401625d07099f2d698fc2eaf0c2df6426d61697f20b64d28c96cef23f5649d8/10_Structure-1.jpg" data-mid="121118374" border="0" src="https://freight.cargo.site/w/1000/i/c401625d07099f2d698fc2eaf0c2df6426d61697f20b64d28c96cef23f5649d8/10_Structure-1.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/02158228a7922cc962bbae073e1361ac3a7ffc7d868d11568462ad7ac79b6178/11_Structure-2.jpg" data-mid="121118375" border="0" src="https://freight.cargo.site/w/1000/i/02158228a7922cc962bbae073e1361ac3a7ffc7d868d11568462ad7ac79b6178/11_Structure-2.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/bd51d640f4d75ba0a25d845610b94ada5aca4b446328fe05859817fda1b2e7a1/12_Colour-systems.jpg" data-mid="121118376" border="0" src="https://freight.cargo.site/w/1000/i/bd51d640f4d75ba0a25d845610b94ada5aca4b446328fe05859817fda1b2e7a1/12_Colour-systems.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/b5b93e89ec8de02f1d9702f540d70db3cabc6742a29af1f767d3111e25c1b826/13_Choosing-a-chart.jpg" data-mid="121118377" border="0" src="https://freight.cargo.site/w/1000/i/b5b93e89ec8de02f1d9702f540d70db3cabc6742a29af1f767d3111e25c1b826/13_Choosing-a-chart.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/e50ff32a1e9cb1d9b36c32466ec6479bf86e7c402a2631389b933b507cc9f3ba/14_Difference-between-charts.jpg" data-mid="121118378" border="0" src="https://freight.cargo.site/w/1000/i/e50ff32a1e9cb1d9b36c32466ec6479bf86e7c402a2631389b933b507cc9f3ba/14_Difference-between-charts.jpg" /><img width="4212" height="2533" width_o="4212" height_o="2533" data-src="https://freight.cargo.site/t/original/i/310aba8cf0cacb0096846071b017f6beb699f8e04ddd5c0cbf608a1301a39cc6/15_Line-graph.jpg" data-mid="121118379" border="0" src="https://freight.cargo.site/w/1000/i/310aba8cf0cacb0096846071b017f6beb699f8e04ddd5c0cbf608a1301a39cc6/15_Line-graph.jpg" /> Client Commonwealth Bank of Australia Client Deloitte Digital Collaborators Ann Layson UX designer Rhiannon Bunting Content specialistAlex Winiarski Designer https://fionafanzhili.com/Perth-Airport Mon, 13 Jul 2020 23:28:31 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/Perth-Airport Perth Airport MarketplaceCreative direction | UX &amp; UI The expansion of Perth Airport positioned Australia’s westernmost city as a “Nexus of possibility”, a gateway between the island nation and travellers to and from the northern hemisphere. Following a rebrand which updated their existing enterprise webite and app, Perth Airport engaged Deloitte Digital to deliver an online marketplace for duty-free e-commerce and lounge booking. As an aggregator site, I emphasised the new brand’s strong sense of identity on the homepage and landing pages, where the airport positions itself as a hub of products and experiences. I then gradually pulled back on the the airport’s brand elements on the product details page and featured brand landing pages, so the distributed brands can be put to the forefront and shine. <img width="4221" height="2668" width_o="4221" height_o="2668" data-src="https://freight.cargo.site/t/original/i/1936989bb5499827a72ba6057d8608e14aa72c74e3bcd907bee9e66febc9ad3c/01_Mobile-homepage.jpg" data-mid="77299986" border="0" src="https://freight.cargo.site/w/1000/i/1936989bb5499827a72ba6057d8608e14aa72c74e3bcd907bee9e66febc9ad3c/01_Mobile-homepage.jpg" /> <img width="4221" height="5544" width_o="4221" height_o="5544" data-src="https://freight.cargo.site/t/original/i/722893fbc268be628ccd7d9f9b552bcdf8502a8b74c71627854fbcbc0fb4d91d/02_Desktop-homepage---lounge.jpg" data-mid="77299186" border="0" src="https://freight.cargo.site/w/1000/i/722893fbc268be628ccd7d9f9b552bcdf8502a8b74c71627854fbcbc0fb4d91d/02_Desktop-homepage---lounge.jpg" /><img width="4221" height="2573" width_o="4221" height_o="2573" data-src="https://freight.cargo.site/t/original/i/8ea489976230c70b207d339ee34f5e922dbf5669177d2beb411106932a731e31/03_Desktop-hero.jpg" data-mid="77299187" border="0" src="https://freight.cargo.site/w/1000/i/8ea489976230c70b207d339ee34f5e922dbf5669177d2beb411106932a731e31/03_Desktop-hero.jpg" /><img width="4221" height="6330" width_o="4221" height_o="6330" data-src="https://freight.cargo.site/t/original/i/9a9294985f8a104012be01c7ab488e901727e55ae56a367dd87a77312f9617d0/04_Desktop-PLP---PDP.jpg" data-mid="77299189" border="0" src="https://freight.cargo.site/w/1000/i/9a9294985f8a104012be01c7ab488e901727e55ae56a367dd87a77312f9617d0/04_Desktop-PLP---PDP.jpg" /><img width="4221" height="2668" width_o="4221" height_o="2668" data-src="https://freight.cargo.site/t/original/i/d3b35cc4c5d2019d437d303f549da7adb88a710281818ea270af0ded25ef4e4a/05_Mobile-PDP.jpg" data-mid="77299190" border="0" src="https://freight.cargo.site/w/1000/i/d3b35cc4c5d2019d437d303f549da7adb88a710281818ea270af0ded25ef4e4a/05_Mobile-PDP.jpg" /><img width="4221" height="2668" width_o="4221" height_o="2668" data-src="https://freight.cargo.site/t/original/i/18d8f3a9b50d9fb321dd8ee9e786d64498290e1c5956182a25aa02d5223b9ab4/06_Desktop-quick-view.jpg" data-mid="77299191" border="0" src="https://freight.cargo.site/w/1000/i/18d8f3a9b50d9fb321dd8ee9e786d64498290e1c5956182a25aa02d5223b9ab4/06_Desktop-quick-view.jpg" /><img width="4221" height="2428" width_o="4221" height_o="2428" data-src="https://freight.cargo.site/t/original/i/400cde531b18cfd126d2fbe0cc5d561a23f7055972c8af6aedeb2e71d4d4f4df/07_Desktop-content-tile.jpg" data-mid="77299192" border="0" src="https://freight.cargo.site/w/1000/i/400cde531b18cfd126d2fbe0cc5d561a23f7055972c8af6aedeb2e71d4d4f4df/07_Desktop-content-tile.jpg" /><img width="4221" height="2668" width_o="4221" height_o="2668" data-src="https://freight.cargo.site/t/original/i/7f4fc27c7420a15e12a45d776088bf1f78ce316bcc76c6185a742955396862e8/08_Desktop-nav.jpg" data-mid="77299193" border="0" src="https://freight.cargo.site/w/1000/i/7f4fc27c7420a15e12a45d776088bf1f78ce316bcc76c6185a742955396862e8/08_Desktop-nav.jpg" /><img width="4221" height="2668" width_o="4221" height_o="2668" data-src="https://freight.cargo.site/t/original/i/25b4814334f62737a9c78dbb1c444057083c614d46c99216edac10cf12d000b3/09_Desktop-banner.jpg" data-mid="77299194" border="0" src="https://freight.cargo.site/w/1000/i/25b4814334f62737a9c78dbb1c444057083c614d46c99216edac10cf12d000b3/09_Desktop-banner.jpg" /><img width="4221" height="2668" width_o="4221" height_o="2668" data-src="https://freight.cargo.site/t/original/i/ed76ffbdbaf7dd5aab63841e45bd5622d3f47266bbcebfc29ab9b891a04ed805/10_Component-library.jpg" data-mid="77299195" border="0" src="https://freight.cargo.site/w/1000/i/ed76ffbdbaf7dd5aab63841e45bd5622d3f47266bbcebfc29ab9b891a04ed805/10_Component-library.jpg" /><img width="4221" height="2668" width_o="4221" height_o="2668" data-src="https://freight.cargo.site/t/original/i/10d4ba4caf7b23c3babd6d372a9125242916548e8501bf86f2804e4a037f456d/11_Mobile-nav.jpg" data-mid="77299196" border="0" src="https://freight.cargo.site/w/1000/i/10d4ba4caf7b23c3babd6d372a9125242916548e8501bf86f2804e4a037f456d/11_Mobile-nav.jpg" /> Client Perth AirportAgency Deloitte Digital https://fionafanzhili.com/MoCo Thu, 16 Dec 2021 04:06:00 +0000 Fiona Fanzhi Li Design https://fionafanzhili.com/MoCo The Modern Cocktail Co.Creative direction | UX &amp; UI The Modern Cocktail Co. was a new offering from Vanguard Luxury Brands, providing pre-batched cocktails that can be served in venues on tap. With a brand that harkens back to the roaring twenties that was the golden age of cocktails, MoCo offers classic cocktails made with premium ingredients and spirits from Australia and around the world. I designed a micro-site that served to launch the new brand out into the market. It was a source of information for consumers and help them find stocking venues, as well as an entry point for potential venue customers to enquire about stocking the product. Visit the site: moderncocktailco.com.au <img width="2000" height="1422" width_o="2000" height_o="1422" data-src="https://freight.cargo.site/t/original/i/5709dcf7b568c8a077b8ad2923a353c37b1fbe6c851079e35d0d677b0d2798dc/Age-gate.png" data-mid="127536417" border="0" src="https://freight.cargo.site/w/1000/i/5709dcf7b568c8a077b8ad2923a353c37b1fbe6c851079e35d0d677b0d2798dc/Age-gate.png" /> <img width="2000" height="1381" width_o="2000" height_o="1381" data-src="https://freight.cargo.site/t/original/i/25bd00a5e9db22d9c3ae37257258def4766c75204be92c34c7afdbcb85c427ee/Mobile_2.png" data-mid="127533260" border="0" src="https://freight.cargo.site/w/1000/i/25bd00a5e9db22d9c3ae37257258def4766c75204be92c34c7afdbcb85c427ee/Mobile_2.png" /> <img width="2000" height="5391" width_o="2000" height_o="5391" data-src="https://freight.cargo.site/t/original/i/8d13a9ec1d8b541570e4a98b2d6c3e2af88562a8e2833fd82f50876f29e31f34/Homepage.png" data-mid="127533467" border="0" src="https://freight.cargo.site/w/1000/i/8d13a9ec1d8b541570e4a98b2d6c3e2af88562a8e2833fd82f50876f29e31f34/Homepage.png" /><img width="2000" height="1381" width_o="2000" height_o="1381" data-src="https://freight.cargo.site/t/original/i/ade8ac915649109a416ab41347b8e74b57693a2c393200551e0d3457a13ce22a/Mobile_1.png" data-mid="127533259" border="0" src="https://freight.cargo.site/w/1000/i/ade8ac915649109a416ab41347b8e74b57693a2c393200551e0d3457a13ce22a/Mobile_1.png" /> <img width="2000" height="1422" width_o="2000" height_o="1422" data-src="https://freight.cargo.site/t/original/i/6c85250d3e178573ef03eda7b288133194dd41d77b8e295276006d470f149d24/Cocktail.png" data-mid="127533258" border="0" src="https://freight.cargo.site/w/1000/i/6c85250d3e178573ef03eda7b288133194dd41d77b8e295276006d470f149d24/Cocktail.png" /> Client The Modern Cocktail Co. Agency Lion Digital