Creating a design system using screenshots of existing product and designing for scalability.
Type
Contract / Freelance
Tools
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><g d="M 0 6.854 C 0 3.069 3.069 0 6.854 0 L 23.141 0 C 26.926 0 29.995 3.069 29.995 6.854 L 29.995 23.141 C 29.995 26.926 26.926 29.995 23.141 29.995 L 6.854 29.995 C 3.069 29.995 0 26.926 0 23.141 Z M 7.972 22.019 C 7.972 20.077 9.546 18.503 11.487 18.503 L 15.002 18.503 L 15.002 22.019 C 15.002 23.96 13.428 25.534 11.487 25.534 C 9.546 25.534 7.972 23.96 7.972 22.019 Z M 14.979 4.448 L 14.979 11.478 L 18.494 11.478 C 20.435 11.478 22.009 9.904 22.009 7.963 C 22.009 6.021 20.435 4.448 18.494 4.448 Z M 18.494 18.527 C 20.435 18.527 22.009 16.953 22.009 15.012 C 22.009 13.07 20.435 11.497 18.494 11.497 C 16.553 11.497 14.979 13.07 14.979 15.012 C 14.979 16.953 16.553 18.527 18.494 18.527 Z M 7.972 7.963 C 7.972 9.904 9.546 11.478 11.487 11.478 L 15.002 11.478 L 15.002 4.448 L 11.487 4.448 C 9.546 4.448 7.972 6.021 7.972 7.963 Z M 7.972 15.011 C 7.972 16.953 9.546 18.526 11.487 18.526 L 15.002 18.526 L 15.002 11.497 L 11.487 11.497 C 9.546 11.497 7.972 13.07 7.972 15.011 Z" fill="transparent" height="29.995132867132952px" id="w9BTIwivH" width="29.995132867132952px"><path d="M 0 6.854 C 0 3.069 3.069 0 6.854 0 L 23.141 0 C 26.926 0 29.995 3.069 29.995 6.854 L 29.995 23.141 C 29.995 26.926 26.926 29.995 23.141 29.995 L 6.854 29.995 C 3.069 29.995 0 26.926 0 23.141 Z" fill="rgb(0, 0, 0)" height="29.995132867132952px" id="Pt1MrmRxm" width="29.995132867132952px"/><path d="M 0 3.515 C 0 1.574 1.574 0 3.515 0 L 7.03 0 L 7.03 3.515 C 7.03 5.456 5.456 7.03 3.515 7.03 C 1.574 7.03 0 5.456 0 3.515 Z" fill="rgb(36, 203, 113)" height="7.030153846154008px" id="UsTjEgRiz" transform="translate(7.972 18.503)" width="7.02998601398599px"/><path d="M 0 0 L 0 7.03 L 3.515 7.03 C 5.456 7.03 7.03 5.456 7.03 3.515 C 7.03 1.574 5.456 0 3.515 0 Z" fill="rgb(255, 114, 55)" height="7.029986013986218px" id="BjLNftDFH" transform="translate(14.979 4.448)" width="7.03015384615378px"/><path d="M 3.515 7.03 C 5.456 7.03 7.03 5.456 7.03 3.515 C 7.03 1.574 5.456 0 3.515 0 C 1.574 0 0 1.574 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 Z" fill="rgb(0, 182, 255)" height="7.03015384615378px" id="tSGDRBMxX" transform="translate(14.979 11.497)" width="7.030069930069885px"/><path d="M 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 L 7.03 7.03 L 7.03 0 L 3.515 0 C 1.574 0 0 1.574 0 3.515 Z" fill="rgb(255, 55, 55)" height="7.030153846154008px" id="CogGJnjiB" transform="translate(7.972 4.448)" width="7.02998601398599px"/><path d="M 0 3.515 C 0 5.456 1.574 7.03 3.515 7.03 L 7.03 7.03 L 7.03 0 L 3.515 0 C 1.574 0 0 1.574 0 3.515 Z" fill="rgb(135, 79, 255)" height="7.02998601398599px" id="z1wnQ20Xg" transform="translate(7.972 11.497)" width="7.02998601398599px"/></g></svg>)
Figma
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M 24.545 0 C 27.558 0 30 2.442 30 5.455 L 30 24.545 C 30 27.558 27.558 30 24.545 30 L 5.455 30 C 2.442 30 0 27.558 0 24.545 L 0 5.455 C 0 2.442 2.442 0 5.455 0 Z M 8.059 4.773 L 15 11.714 L 8.059 11.714 L 8.059 18.657 L 15.496 26.591 L 15.496 18.657 L 21.942 18.657 L 15.001 11.715 L 21.942 11.715 L 21.942 4.773 Z" fill="rgb(0, 0, 0)" height="30px" id="tDnzKpwUv" width="30px"/></svg>)
Framer
At a Glance
Redesigning their website to improve usability, accessibility, and mobile responsiveness
Problem / Brief
Difficult to update
Originally their website was hosted on Webflow, and quite outdated. They had difficulties navigating webflow and updating their new properties.
Mobile Responsiveness
Their website was not optimised for mobile viewing and was very clunky in terms of scrolling, readability and also the overall visual style.
Original website
Process
Discovery
Identified pain points and agreed on scope
Direction
Gathered style preferences and reviewed inspiration sites together
Design
Built first iteration based on their preferred style, branding and brief
Iteration
Three rounds of refinement with feedback meetings in between
Handoff
CMS walkthrough so the client could manage listings themselves
Outcome
Consistent typography system and cohesive branding colours throughout
Improved contrast for better accessibility
Restructured layout and full mobile responsiveness
Pre-made property listing template for easy, independent content updates
Site now stays accurate and current without developer involvement
