City of Temecula QMLP
UI / UX Design, Front-end Development
May 2023 – September 2023
Translating a bold and colorful master plan document into a website for the people of Temecula, CA. The Quality of Life Masterplan (QLMP) is a road map for the future prosperity of Temecula, with each core value contributing to the overall quality of life.
Wireframing & Overview
Originally, the site was meant to be hosted on the city’s existing infrastructure via Civic Plus, a restrictive hosting platform managed by the city’s IT department. This was a roadblock as our toolkit would be severely limited, and creating a website with the same vibrancy as the QLMP document would not be possible. Given the constraints, we vouched for a WordPress site that allowed for more design expression and sped up the development process.
After the city approved our recommendation, I began building low, mid, and high-fidelity prototyped wireframes in Adobe XD and highlighting the user experience and overall sitemap. Wireframes call out: modals, accordions, a timeline, interior page templates, pull quotes, and mega menu structure, while accounting for major breakpoints across three different screen sizes.
Design & Creative Brief
After receiving the city’s buy-off on wireframes, I began creating full-page mockups and a creative brief showing the client how their city QLMP would look on the web. Using web-friendly typefaces from Google fonts. I drafted a type system, animated charts highlighting data from the City’s community survey, and full-page mockups across desktop and mobile screens.
The wireframes and design were made to account for future additions to the QLMP. This is illustrated in the mega menu’s structure as it leaves space for general plan elements and more of the city’s ambitions.
Frontend Development
Using WordPress as our CMS, and Elementor as the frontend editor, I started building the site header and footer first, moving on to the homepage, and interior page template - ensuring all elements were responsive across mobile, tablet, and desktop screens before getting more in the weeds with modal configuration, nested accordion elements, and a vertical timeline of events.
The most challenging part of this build was the responsive mega menus and animated charts. The mega menus required lots of additional CSS to function as intended, whereas the animated charts are hand-coded using a mix of HTML, Java Script, and CSS.