DK’S Wash-N-Shine

Project Overview

Challenge: Develop an online ecommerce car detailing website for my client.

Role: UX Designer, UX Researcher, and Web Developer

Duration: 6 months

Technologies Used: Figma, Wordpress, Crocoblock, Elementor, CSS, and HTML

I was challenged to design and develop an e-commerce website for the local car detailing supply company DK’s Wash-N-Shine. Through this project I worked to layout the website architecture, conduct user research on local car detailers in the area, design the user-flow, create an interactive prototype, and develop a functioning e-commerce website. Some constraints of the project came from wanting to find a site building platform that provided support for e-commerce shopping and was intuitive enough so that my client could easily maintain the website on his own. In the end, I crafted a website that can be accessed to buy car detailing products.

Summary

Having worked as a car detailer in the Ingham county area for a number of years, my client started a business to sell car detailing supplies to local suppliers in the area. My client wanted to expand his business through establishing an online storefront to sell his supplies. However, he quickly found that he struggled to work with online website builders and was unable to put his vision in fruition. My client, then contacted my local university to hire a student to build him an ecommerce website that would provide users easy navigation and use a website builder that would be intuitive enough for him to maintain in the future.

Problem

How might we establish an ecommerce website that provides users smooth navigation experience and use a website builder that would be intuitive enough for my client to maintain in the future?

When I first met with my client, we went over his overall plans he had for his company and ideas for building DK’s Wash-N-Shine’s ecommerce experience. In this initial meeting we drew up a rough plan for the different categories of products for the website menu, brief description for the about page, a list of products that will be sold, brands to be showcased, and the general color scheme based on an already pre-established logo. In this initial meeting, we went over expectations and hopes for the future website.

First Steps

Research

Through a mutual friend, I got in contact with local 5 car detailers in the Lansing area to ask about their experience within the industry and buying car detailing supplies. When discussing the other opportunities out there, they discussed that they often felt like the market was lacking in local pick up options for picking up supplies. To get more context for the products I was making descriptions for. From looking at over 10 car detailing websites I was able to determine the optimal way to go over each description and how to organize the filter system for products.

Initial Wireframes

When crafting my initial wireframe I looked over all of the elements from the previous site map to then construct screens for each page. I added a review section to add more trust with users with the website.

After hearing feedback from mentors and my client, I revised the wireframes to provide a more sleek look and easier navigation. I got a lot of feedback on trying to ensure that the website looked more professional and was overall more interactive. This allowed for more consistency between pages and for a better overall experience.

Web Development

I worked with Wordpress to build the ecommerce website. I decided to utilize this builder because it had the best support for ecommerce businesses through Stripe and Woocommerce and allowed for drag and drop methodology. The largest challenge was going through the elementor and crocoblock plugin. This included also learning policy for online stores and study up on legalities that the website needed to establish. Another challenge was working with the responsiveness for mobile users to navigate the app easily. Another issue to move through was making sure that the load time was not too extensive so people would not log off.

Deliverables

When I showed the website to my client they were estatic about how it turned out and was excited to move forward with his website. The only step that my client needed to do to move forward was to contact a accountant to set up the taxes for each region for delivery.

Reflection

Overall I learned a lot about developing a website from beginning to end and how to work with a client. It was challenging revising and troubleshooting tech issues, but it was extremely rewarding. This experience has really helped me see design in the perspective of the developer, and look within the limitations that there are to build. For example, I spent days trying to figure out how to properly implement the search bar, and instead had to settle with a search feature that would bring up the related content only on the search bar section rather than a results page. Another issue was trying to figure out all of the legalities that were involved in a website, such as privacy, terms and conditions, and shipping and refunds policy. These legalities took hours to sort through and involved deep discussions with my client. Through this project, I learned to collaborate with my client and ensure that his vision for his business was at the forefront of design decisions. This collaboration ultimately led to a product that we were both proud of.