Wolosyzk Plumbing
August - October 2022
A fast growing local plumbing company needed a modern, trustworthy website to help customers find the plumbing services they require and get them fast. I completed this project for Westside Technology in the role of Web Designer.
Methods Practiced
Skills Used
Discovery
For Woloszyk the problem was that their website was basic, outdated, and appeared untrustworthy to potential clients. Visitors struggled to understand the services offered and how to get in touch. Our solution was straightforward, create a modern, trustworthy website that provides both potential and current customers with a seamless and engaging online experience.
Competitive Analysis
I began digging into the discovery phase by conducting a competitive analysis of a few of Wolosyzk’s biggest competitors. AllFloPlumbing, Vanderhyde Plumbing, and Budget Plumbing Grand Rapids.
Of the competitors each was quite crowded with lots of information making it challenging to find the important points of info that users wanted, such as contact info, services provided, or service area. Often the competitors added in lots of page options that were hard to differentiate from each other like “ “about” and “who we are”. Information Architecture was a clear area to establish a competitive advantage on this website.
Define
During this phase of the Double Diamond method I created a user persona to aid in understanding the user journey. This assisted greatly in helping to define the problem further and makes steps towards the best solution.
User Personas
User personas are something I find really valuable as a designer. For me, the process of creating them is actually the most impactful part. It pushes me to think about what users truly need and expect when they land on a site. It helps shift my focus from designing for the client to designing for the people who will actually use it.
User Persona created for Wolosyzk Plumbing.
Develop
During the development phase I used what I had learned from the competitive analysis and the user persona to begin to bring the solution to life. Using Figma I made early grayscale wireframes, ensuring I delivered on the needs of the user before focusing on the overall look and feel of the site.
Early grayscale wireframes.
Client Review & Updates
I had multiple review sessions with my client on this project. We were able to make a number of improvements to the UX design based on feedback and again putting ourselves in the position of the user persona. I also received direction on the UI and began developing a visual style for the site.
Desktop Navigation Changes
Heavy changes to the information architecture of the top navigation bar were made. Making the “Contact Us” highly visible as well as the phone number being placed near the logo in the top right. The sitemap and the pages that would be displayed was completely rethought and adjust as the menu shows.
Review Card Updates
Below are show changes made to the review cards to improve the information shown on them by trimming some unnecessary info. Changes were also made to improve the contrast of the cards. This included changing the color and adding a drop shadow. Finally the cards were given rounded edges for a more appealing look and feel.
Mobile Navigation Improvements
Normally I design mobile first, however this project I designed the Desktop first. Therefore by the time I got to mobile design the navigation and information architecture decisions were largely already made. However, one key element I iterated upon was the location of the hamburger menu. After researching best practices I found it was better to have it located on the right side for easier reach.
Before change to hamburger menu.
After change to hamburger menu.
Deliver
With improvements made I was able to put together a prototype, complete some basic testing and then create the final designs ready for handoff to the developer.
Final Designs
The client was very happy with the new modern look and feel of the design. They felt it would be much easier to use for their clients.
Final designs, ready for developer handoff. View Figma file here.
Style Guide
For this site I put together a very simple style guide for the developer as this was all they requested in this case.
Figma File
You can view the Figma file I shared with our developer here:
Woloszyk Plumbing - Web Design
Reflection
After completing a project I find it very helpful to write a reflection. It puts me in an analytical mindset and helps me solidify the positives I learned and what negatives to avoid in the next project.
In completing this project for Westside Technology and Wolosyk Plumbing I gained incredibly useful experiences by working with a real client for the first time.
Understanding Information Architecture. I learned how important Information Architecture is on a website which has the main goal of providing information to the user. This website was all about communicating Wolosyzk’s services as well as contact info to the user in the smoothest way possible. The website could look beautiful and stunning, but if the user can’t figure out what type of services they can get from you, they’ll leave.
Working with a Developer. This was my first time working with a real developer. It was absolutely eye-opening to see the website building process from his side. He helped me so much in understanding what deliverables he needed from me and how I could best give them to him. I also learned about using a new design system or framework called Flowbite. This helped me to create designs that he could code very quickly. This partnership has been easily the most impactful part of this project for me.
Working with a Client and a Previous Designer’s Assets. This was the first time I worked with a real client and had to make adjustments based on feedback from them as well. It was a really transformative experience for me to speak from a standpoint of being a design expert for the first time. I also had to use their pre-designed logo and fonts for this project. It was interesting for me to create the look and feel of the website based on this previously created aesthetic.