https://www.derekguo.me/homie daily 0.75 2019-07-02 https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1560618162138-UXEIFXZ0LLOCHODKQNM3/iPhone+x+--light--.jpg homie https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1560612418756-AK4QP7RFC8LQY92A99HP/icons-morph.gif homie Finding a new home is always a hassle. The renter would have call multiple agents and the viewings often span over days to a week. Homie tries to change that process for the renter by being the single point of contact for the renter while organises everything else behind the scene. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1560514988655-3AHE6NQBIULTV8HFELDT/homie-iconset-01-01.png homie https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1560515060965-C834622U307KHI9AKRLE/Artboard+1.png homie https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1561131421544-VJFQKCIPVKMJAZIU9YI2/userflow-01.jpg homie - Mapping the product journey It is crucial to devise a product journey map that takes all user cases into account prior to producing any hi-fidelity design. These processes are informed by research into the market intel, and it strives to strike a balance between address the user needs and addressing the challenges of the business. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1561712448623-OEW4MOGCLLK9G6BNVFTQ/iPhone+x+--light--+Copy+5.jpg homie https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1560612735045-4C7VIXNHK9WEP0CDT2Y2/commutesearch.jpg homie - Adding value to the search functionality everybody knows Having a map is great, but it only really benefits those who know London well. After testing with a focus group we found that having Commute Search is what’s missing. It allows the user to discover properties and areas that might have been dismissed otherwise. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1560613356523-1Q5T2PD0FJSMFOMQGIXE/tubesearch.jpg homie - Also making it better for Londoners Having easy access to a specific Underground station is a common search criteria for Londoners. But why does anyone have to keep switching between search platform and Google Maps? It made the most sense to integrate all the stations into the app. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1560766529873-RN62JR0VWVA3ZOX06NKS/checkoutt.jpg homie https://www.derekguo.me/about daily 0.75 2024-06-12 https://www.derekguo.me/contact daily 0.75 2020-04-26 https://www.derekguo.me/case-studies daily 1.0 2024-06-14 https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587475052714-PY0YZPY18FGZWNDWPKDR/brand+logo+skyBlue.png case studies https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/ecd32718-cf46-4a0e-8589-44e4eb98d598/new_logo.png case studies - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1560510371343-XD3WXD8D39NPGQ3N1WA6/logo-01.png case studies https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526682121306-T8DMJECJIMXTD01UPAEI/image-asset.png case studies https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/559b8923-f73f-4adc-92f3-10ba9d4d1a40/Plum+logo.png case studies - Make it stand out Case study coming soon https://www.derekguo.me/pi-top daily 0.75 2019-06-14 https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526680644243-MWHYEKQIO888HYUZUR4J/image-asset.gif pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526067361613-25XOH9EGLIKV9FLYZVY8/Asset+2.png pi-top - Typeface Design During the early days of the company I created a font set out of necessity – the company couldn't afford font licenses for its online platform. Now it's the default font set used across pi-top product range. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526141254800-5FP2APXTDX60JSYLX0OU/portfolio-04.png pi-top - Art Direction for Photography The challenge has always been to show the product in the context of its use cases while making it appealing to the ideal customer profile. The solution was merging ideas borrowed from youth culture and the maker community to create the brand photography. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526579248521-MP5FO8UA2D5ZGGY7ZCIW/DSCF0999+copy.jpg pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526065955081-TC5N98ZGDG4HE0HE1VY1/portfolio-02.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526074951947-UZ8IZKWBQJCOGZOI7H5Y/image-asset.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526067797146-OVRB52XCCT1DLCLQ4HFG/image-asset.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526067742195-LSAIKN0DVRAJ1R6OC60Q/portfolio-09.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526680026814-95J0CTJDOIVLTZ8FPSA5/intro.gif pi-top - Motion Graphics A key aspect of the brand aesthetic was the use of technical graphics, which was expressed with moving typography in video production. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526073937973-UEBS8X11LVYRSQLRIO8W/portfolio-16.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526075220426-KNVTABCMZJR4ZJQIPJF6/portfolio-06.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526074863222-4J0YX14Y78L8YI3DLZKJ/DSCF0987+copy.jpg pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526074862555-UA61FMZJA4NK3LR8JDZX/DSCF0993.jpg pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526075142046-S5Z1SBFORJ7RGM7V9IGP/image-asset.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526072527718-RB5FI9J1CLWX7KJV7YK4/portfolio-08.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526680481510-AJLMJE5UVGGPP3MI3DME/screen.gif pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526680858715-4DG28S6KXA0XV46HC5K5/keyboard.gif pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526072238549-O51DGZEQK5RL71KV74C3/portfolio-07.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526488756310-Q2C77NYX7C0R9R4QB1X7/portfolio-17.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526065919264-6VBLIDAGVHN74UK5KDHQ/image-asset.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526685531115-LNYE63MOP8GHCR1XBRJI/portfolio-12.png pi-top https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1526066985212-JNFSIPR5JW8G9N0O23HZ/portfolio-11.png pi-top https://www.derekguo.me/lantum daily 0.75 2021-01-26 https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610969846051-VAQTYPU348DP52TVDDFL/rules1.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610969740595-56IXE2Z17C6G2DEZQWVV/rules2.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610969883046-NHCRZ2CPVI9NILCJZ18F/rules3.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587561101966-ORPVT2QFHNCVZ3JL3TZE/image-asset.png lantum Designers: Alex Cullen, Derek Guo https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587728619668-0K2URZJHNUIELGTVRUQD/Screenshot+2019-11-14+at+18.37.24.png lantum This is an example of what these rota look like. Now imagine scrolling through up to 100+ staff members while trying to compare your own schedule… The stuff of nightmares! https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587570333739-CFN6K1N45MDKTFLKMMJ4/swaps-notebook1.jpg lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587570390074-AXMYZBA9RF6H78H3YIDH/swaps-notebook2.jpg lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587570393275-DT7ETZ1PZ0F6VY8Z9XAU/swaps-notebook3.jpg lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587479029434-PWTBZE4W5OMTDCJJ8ET5/image-asset.png lantum Designers: Alex Cullen, Derek Guo, Will Colley https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587489108131-V7O1LHZ93CTIU9UBBOO1/calendar+copy.png lantum - Shift swaps One of the first major feature I worked on was to enable substantive workers to swap shifts between each other. This is a common behaviour in hospital environments and has been a highly requested features from Lantum’s secondary care users. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587570883395-PEDNNUE9SEQHDDSE4RWQ/plot2.jpg lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587570888156-BT3UFAJH8ZBJB138COOI/plot3.jpg lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587570984700-WWHZB81P9FX2ZY15Q1LF/plot3.jpg lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610634861458-P6TDLBQV7GEW7ACEYVPX/Group.png lantum We wanted to enable the developers to be less reliant on the designers for when address bug fixes or small updated, I also came up with a semantic colour system that shows how and when to use the different hues. This lead to an overall more consistent design across the product. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587731545952-H8VBUK9GQOPJXECYQQDO/Artboard+1+copy.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587731552218-XVZID8A6CILI75YYTMYK/Artboard+1+copy+2.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587731552325-J5AIYX558YI7DM7307CC/Artboard+1+copy+3.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587731554390-HXDLAFO1POATXA06C84F/Artboard+1+copy+4.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587731554381-OEK3UQXSJW9B8SIH3QOX/Artboard+1+copy+5.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587905736342-EUXW6Q8RTYFXPYIDII9J/icon_guidelines.png lantum Based on characteristics of the Lantum logo and word marque, a design guideline is established to help steer other designers to maintain and develop the icon library further, while adhering to the brand DNA. A guide on how to export a working icon font was also created on the product team wiki. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610634507570-EUCGTTPOXAJN1V10FUWR/Group+4.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587561131490-BIE4AXLLAYAV1LFB50O3/image-asset.png lantum Designers: Alex Cullen, Derek Guo https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587569766036-MWF8WWDY9HJ1RPPIBGOS/image-asset.png lantum Lantum’s goal is to automate all of the rule-based decision for managers by processing them in an intelligent rules engine. I conducted extensive research and interviews to fully defined all logic for the rules engine, which allows the platform to perform most of the repetitive tasks of a organisation manager for future iterations of the product. This is an excerpt of some of those rules… https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587571543402-53IWSOVJ9R5X2BLTIZGJ/Screenshot+2020-04-21+at+09.45.49.png lantum Lantum icon system https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587907758044-48G4ADV3DHGSSGGYPV5L/balancing+copy.png lantum - Rules engine To ensure occupational and patient safety, organisations have overtime and shift pattern policies set in place. These rules would work in conjunction with legal policies set in place by the legal governing body, such as the European Working Time Directives. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610632731578-FT4I63RGB6DJF7LZ0C3P/DNA.png lantum - Lantum DNA To refine the design system to meet inclusivity and accessibility guidelines. I built a dynamic component library that meet the needs of remote working, https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587732278326-3O26MM8Y5N0YR0OZDB6T/Artboard+1+copy.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587732283459-X6VT8M6J0Z88RC0RMH4W/Artboard+1+copy+2.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587562686600-JDLUW0KRTS4630J5U5GJ/swap-2+copy+3.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610969291497-SG1C03NR147WF35YQA6U/swap2.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610969297366-HB7LA7BV399QF5KUHV6F/swap3.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610971154080-3NDMCQOBC1AT3FQ1H2VW/library1.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610971153617-CZD247TPEWZI754GLGV1/library2.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610971154895-JT97FFVVELMS0115KQLQ/library3.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610971154842-E2KDJEGC20BRI52K9XUU/library4.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1610971155303-IGVU8Z9R8SY07EO3RO45/Library5.png lantum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587563151397-LZ6GSBLFT1RTIGSB7Z9Q/calendar+copy.png lantum - Self scheduling Suggesting shift patterns to managers is integral to the operation of nursing units. Often managers take days to balance worker’s suggestions. Lantum’s self scheduling solution removes that burden and offloads it to an intelligent rule-based system where it’s quick and easy for both workers and managers. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/1587733737578-QM16RPI4P8LNNZ9RHRA9/self-scheduline-app.png lantum Designer: Derek Guo https://www.derekguo.me/veranex daily 0.75 2023-03-15 https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/2c945bb6-c28c-4580-9903-15d57caa4028/Frame+1120.png Veranex - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/8a9a94d4-51f7-4d98-933a-77bc0c1b765d/Frame+1118.png Veranex Designers: Derek Guo, Emily Vermeulen, Roohi Katarya https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/0980941c-3f23-41a7-b413-2c4dc8706a55/Frame+1119.png Veranex - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/3a6cc46d-e33d-4817-975a-2531d315fcec/Frame+1111.png Veranex - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/add4516e-6c1f-4c6b-85fa-e29916151e05/Frame+1115.jpg Veranex - Titration Explained One of the main goal of the app is to help patients and care givers manage the drug’s complicated titration regiment. The drug is meant to be given at a low dose and frequency at the start. It’d then be increased in dose and frequency throughout the titration phases, with visits to healthcare professionals in between. Once the patient reaches the target titration they would remain on that schedule permanently. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/810e4e28-b78f-4fdc-b301-0d5a3efacbb9/Frame+1117.png Veranex - Dynamic Cards One of the key features of the app are these dynamic cards on the home screen. They communicate the next important task for the user as well as give words of encouragement for when there are no pressing tasks. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/7f559c41-ce0f-4e33-a3be-eec069dae2b0/Frame+1114.png Veranex - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/8df8931c-62a8-4f86-b81c-2a22a0a8a9df/Frame+1110.png Veranex Designers: Derek Guo, Emily Vermeulen, Roohi Katarya https://www.derekguo.me/plum daily 0.75 2025-12-05 https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/9897ba40-7987-4f69-81e2-685c7f38aef7/Screenshot+2024-06-14+at+13.01.12.png plum - Design Impact The new design system enabled every team to make app wide improvements, updating designs that haven been stuck for years, and addressing every pattern inconsistency. While it’s still too early to accurately evaluate, we have a conservative initial estimate of which the design system will reduce design and development time by 20% which equates to £250,000/year in operational costs. The typical industry benchmark for the ROI of a working design system is somewhere between 35%-50%. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/2b1f6af2-1360-40ff-a7cd-2fa562793e58/Stonefruit+Design+System.png plum - 0 to 1 Design System Design and implement a new design system which enables agility, efficiency, and quality. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/820584e9-9b8b-4eb8-938b-bcb865e29bf5/DesignSystem.png plum - Design System Documentation Achieved single source of truth by building a case to adopt Supernova, a design system management platform. In addition, a design process was put in place to ensure parity between production design system and code. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/044ce0b4-22e6-40f7-b81e-5cd4599c41a4/color+tokens.png plum - Atomic Design Principles Principles of Atomic Design is applied throughout the design system to ensure scalability and robustness. In addition, an identical naming convention is applied to the Figma design and developer code base allowed the teams to speak the same language, and massively improving design system related communication. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/5eb54f68-31c0-449d-81a6-794029578373/main.png plum https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/25a44a01-097c-417d-bb25-bb16a69a34f8/CISA+%26+MMF.png plum - QMMF & Cash ISA Provide a high interest savings product to entice new customers to adopt Plum ecosystem Project Impact 80% New User Deposit Rate £100M Net Deposits after first the first month https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/6afd9708-0ddc-4486-a0f7-cbb9c2db2405/CISA.png plum - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/41a10dd4-ea5a-40ba-92fa-17d5e6ad6ff3/MidConf.png plum - Confidence:
Medium Designers: Alex Cullen, Derek Guo https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/9e30401d-fd17-4db5-9bec-c8b5f958d843/IA.png plum - App Information Architecture Define new IA that which re-organises all existing features in a way that allows the product to scale.
 https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/74b87ea8-e42d-44c6-a20a-112795522c4e/dsDiscovery.png plum - Design system Discovery Designer: Derek Guo https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/82ff7ece-dd3e-4f23-828b-0e8de1677c94/LoConf.png plum - Confidence:
Low Designers: Alex Cullen, Derek Guo https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/b3db88c4-fa61-4d68-b4ab-627280072819/HiConf.png plum - Confidence:
High When approaching user flows with high confidence, screen flow is created straight away to ensure a fast delivery. The examples here are the KYC flows, deposit flows, and general navigation flows. By skipping the typical wireframe or low fidelity designs, designs can be delivered with agility by utilising an established design system and templates, in which many recurring design decisions has already been solved. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/017a8373-f823-494d-aed1-5fbd38c5caff/IA_researh.png plum - Primary Research By interviewing 12 high frequency app users and conducting closed card sorting exercise I was able to identify key items our users expect to see, prioritised in order of importance and relevance. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/83307d55-883d-4512-aa02-78e1a3dd4abc/IAtree.png plum - IA Validation All listed features was then organised under new titles that represented the new navigation tab for the app. Tree test was then conducted to ensure the new organisation make sense for our users, and the new IA does not impede features that drive key business metrics: asset discovery, asset access, and asset updates. https://images.squarespace-cdn.com/content/v1/5af5e311da02bc89852e1a4a/06082655-c596-4f6f-8098-209f0241fa13/IAprocess.png plum - IA Design Process A full feature audit was conducted to produce a categoric view of all asset types, core functions, and ancillary functions.