In the Domino's Payroll business for the last twenty years, DSCPA approached us with the idea to overhaul their digital brand. While indeed a healthy financial backoffice for franchise owners, DSCPA was missing a cohesive brand & website, they wanted us to help them professionalize relative to their top competitors.
We've worked with DSCPA since October 2019, the latest website can be found here: https://www.dscpa.pizza/
1. Product Design
To our delight, we were given a completely blank slate for both the brand & the website. We iterated through the majority, though not all of the deliverables in our design process; this is because the website needs were relatively simple since the DSCPA sales process (b2b) is very personal. The goal of the site is to create an additional customer touchpoint as a digital brochure.
I. Competitor & Inspiration Analysis
Unfamiliar with the financial backoffice for franchises space, it was helpful to both gauge competitor standard & seek inspirational examples. The main finding was that we were well-positioned to highlight one core competitive advantage: the niche-focus of DSCPA (Domino's exclusive).
II. UX Wireframe
Since this end goal, a digital brochure, leans more torwards a static website, we decided to skip over the Journey Map & jump right into the UX Wireframe. Seen below, this is user flow is relatively simple; as usual, the main value in this exercise is to colloborate & capture all edge-cases.
III. Greyscale Mockups
The next step in our design process, after iterating through the above with DSCPA, is to generate greyscale mockups. The point of greyscale first is to prioritize UX elements over UI polishes - it's easy to get distracted by colors, images, etc...
IV. Greyscale Invision
To more accurately portray the user flow, we typically piece together an Invision prototype. For the unfamiliar, this is an image-only prototypethat mimics clicking through an actual site or mobile app.
V. Branding & UI Kit
With our UX elements locked down, we turned our full attention to the core map for the remaining UI work: the branding & ui kit. As discussed in the summary, thankfully, we were given a clean slate to build the brand from scratch. From logos to the color palettes, centralizing this information is key for a cohesive set of high-fidelity mockups.
VI. High-Fidelity Mockups
With the greyscale mockups setting the UX & the branding + ui kit setting the UI, the process to generate high-fidelity mockups is quite streamlined. Close to pure design work, this deliverables boils down to mechanical execution.
VII. High-Fidelity Invision
Before setting out to buid, we pieced together one more Invision to gather a final round of feedback. Passed around to both internal employees & clients, we were able to rectify a few UI tweaks - which are always best caught before coding.
2. Webflow Engineering
With a thorough design process, the web-building cycle was quite smooth. We've found that an agile design process with a waterfall build process brings together the best of both worlds. Using the final, high-fidelity mockups as guildelines, there was very little in misunderstood expectations. Starting from scratch on Webflow, the entire development cycle lasted three weeks. We didn't run into any bugs through the process & have only needed to amend once (to add a Team page).