Window
Warriors
A Window Washing Website
Duration
4 weeks
Platform
Website
Role
Product Designer
Tools
Figma
Project Overview
Context
Initially, Window Warriors started as a door-to-door venture for Gabriel Meza, a high school student looking to earn a little income. After a month of door-knocking and the spread of word from his clients, he realized he could possibly make something out of his gig. He asked me to design a website for him so he could expand his business. This was my second project for my Thinkful program.
Problem
Window Warriors operates as a door-to-door business, and while having a website is essential, it's ineffective if potential customers are unaware of its existence. Additionally, a unique challenge is that Gabriel, at just 15 years old, faces the need to distinguish himself from adult professionals in the same industry. How can I help him establish a noticeable presence and credibility among his competitors?
Solution
I would design a business card for his door-door ventures that would promote his business. Leveraging Gabriel's age advantage at 15, we could offer competitive pricing, setting him apart from most competitors, while emphasizing his status as a local student to appeal to the community.
Final Prototype
Research Analysis
Competitive Anlysis
I initially had no concept of what a window cleaning service website should look like, so I decided to seek inspiration from landscaping websites. By exploring these websites, I observed their layout, color schemes, and overall design elements to get a sense of what visually appeals to potential customers. The websites I looked into were DeLeon Landscaping, OneAbode, and Hunter Green.
User Interview
I requested a list of Gabriel's existing clients in order to arrange interviews with a few of them. My goal was to gather valuable insights, understand the reasons behind their choice of Gabriel, and identify ways in which he could leverage these factors to attract and engage with potential clients.
Personas
After my week-long research sprint of user interviews, I crafted a persona that best represents the target client.
Design Process
User Flow
With the help of my user stories, I wanted to create seamless flows throughout the app. The user's experience flow must be carefully designed.
Design Process
Site Map
I created enough user flows to design a journey map. My journey map allowed me to visualize and highlight the steps a user takes to reach their goal, which in my case would be to get a free quote. The journey map helped me construct the site map, ensuring that every aspect of the site was optimally organized for efficient navigation and user satisfaction.
Design Process
Ideation
Before I began creating website designs, I opted to brainstorm some concepts for the business card. It's worth noting that a well-crafted business card is important, as it serves as the initial point of contact for potential users
Low Fidelity
I started by searching for inspiration on Google regarding window cleaning business cards. Once I had some initial ideas, I turned to my design journal and sketched multiple concepts until I was content to transfer into Figma for further development.
Ideation
As I hadn't begun to work on the website, there were no specific font or color constraints for the business card. my aim was to create an initial concept that provided a solid starting point but remained adaptable for future adjustments.
Website
Low Fidelity
With the business card concept finished I could begin drafting designs for the website. Like the business card, I began on paper and transferred over to Figma once I had enough design concepts. Continuing to iterate on Figma allowed me to visualize what the website would look like on screen.
Testing Concepts
I asked Gabriel for pictures of his work so I could visualize what the website would look like with the images. I also wanted to build a color scheme around the color of his pictures that way they wouldn't stand out. The picture below is one of 4 iterations of the website that I built for user testing to see which had the best response.
Research
-
Iterated through multiple concepts
-
Tested users on different concepts for feedback
-
Early testing aids in the early identification of design issues.
Testing Concepts
I wanted to test users on the multiple concepts I had built to see which got better reception and how users navigated with each one. Through multiple rounds of testing, I was able to see what suited user flow best and was able to improve font, spacing, and placement.
Develop
-
placed photos to give me a better overview
-
Analyzed my user stories
-
Tested users on different concepts
Upon the successful completion of the final website prototype, I returned to reevaluate the business card design I had created. In this process, I made changes to the typography, layout, and color palette of the card to ensure its seamless integration and alignment with the website's overall visual identity.
Reflections & Takeaways
This was my second project for my Thinkful program but arguably the most important one. It would mark the first time I would work hand-in-hand with a client. The project highlighted the importance of a strong client-designer relationship and how far communication goes. Although more people use their phones when looking for a landscaper I wanted to broaden my skills and build a website. If I had more time than the four weeks I was given I would have played with more website concepts, possibly integrating a calculator on the website so that users could get a free quote without contacting Gabriel.