Case Study

Groutastic

In this eight week long project with Groutastic, I worked as the lead designer and primary contact for the entire project. Upon approval of final designs, I developed the website in a user friendly platform so the client could continue updates on their own.

1.png

image Gallery

Problem

  1. It's difficult for potential clients to submit information for a free quote.

  2. Web visitors do not understand what services Groutastic offers.

  3. Overall aesthetic and visual appeal of the website is poor and does not match brand style.

Solution

  1. Create a form submission for quote requests and strongly emphasize free quotes throughout website.

  2. Emphasize the services offered to increase SEO ratings and visibility.

  3. Design a visually appealing website that keeps web visitors engaged and increases Groutastic's credibility.

Phase 1

Discovery

Before I began designing, I researched the company online and spoke with the client about what they wanted out of their new website. They expressed their concerns with their current website and I used their responses to make recommendations and influenced design decisions.

Groutastic Original web design.png

Original Web Design Issues

A handful of issues I noted right off the bat:

  1. No navigation menu

  2. No logo (although they do have one)

  3. The video is going off screen

  4. No clear point of contact other than a phone number, which didn't have a click to contact link

  5. Not mobile friendly

  6. No description of the company, services, or any indication of what they do

 

Phase 2

Designing the Website

Screen Shot 2022-06-14 at 2.50.13 PM.png

After much back and forth, we decided on the structure that you see in the site map above. One main challenge to this structure was deciding how we would present the quote request forms, which I will go into more detail in Phase 3.

Screen Shot 2022-06-14 at 1.57.26 PM.png

Because one of their main goals was to have a visually appealing website, I decided to complete the initial web design in Adobe XD. I presented this concept to get feedback on style, font, colors, and overall aesthetic appeal. Since there was no brand guide, I used their logo for inspiration for a bold, expressive heading font as well as the concept of tiles with a border, which is prominent throughout the design. I wound up hitting the nail on the head, and we agreed on this design concept after our first round of feedback!

One main challenge to this design was they initially thought one page for all the services would be best. After creating this initial design, we decided that having multiple pages for the services would be better, since the service page was very long and SEO/visibility would be better with more pages.

groutastic mobile_edited.png

Responsive Design

In order to create the best website possible, all my designs are responsive for all screen sizes. I check each page to ensure the padding and flow works as expected to ensure the best possible user experience.

 
 

Phase 3

Designing the Quote Request Forms

This proved to be one of the most challenging phases of the project. The original way that Groutastic would handle quote requests was by emailing a pdf with instructions on how to submit a request. I reimagined this process to be much smoother and more intuitive using forms.

Step 1: Discovery
  • I asked the client to send me the same pdf they send to customers so I could analyze it.

  • We decided a form submission would work best for what they needed.

  • I had multiple calls with the client to go over in more detail what they needed. Some must haves for these forms were:

    1. There has to be a photo submission field​ - quotes will not be given without photos

    2. Needs to be cost effective

    3. Must be easy to get in contact with potential client who submits the form

Step 2: Deciding Form Structure
  • I initially thought it would be good to have the forms separated by service provided. After we tried this, we found this was not a good solution because some clients wanted one room to have multiple services performed, meaning they would have to submit multiple forms for only one room.

  • We decided to have the forms separated by room type. I had more calls with the client to find out how many forms we needed. We based this on the types and variety of questions the client needed answered in order to give a proper quote.

Step 2: Picking a Form Platform
  • We had agreed to build the website on Wix since that is where the client felt most comfortable. However, the form submissions on Wix can be costly, and they are confusing in the backend when interpreting information from the form. So, we knew we had to pick a different form builder platform

  • After much trial and error, we landed on using Google Forms with Formfacade.

    • We chose Google Forms because it is a free and reliable form building tool.

    • We used Formfacade in conjunction with Google Forms so that users did not have to be logged into a Google account in order to submit photos, which would have been a significant barrier to entry.

Step 3: Designing the Form Questions & Flow
  • I compiled all the questions the client needed in order to give a proper quote. From there, I organized the questions by type.

  • I utilized the "go to section based on answer" feature on Google Forms to make the process flow smoothy. Customers who did not have any more rooms to submit would not have to see additional upload options while those who selected that they did have more rooms to submit would be taken to the next upload section.

  • I limited the type of file uploads to be restricted to only images for safety and security

Step 4: Iterating on the Form Buildout
  • After releasing the forms to be tested, we found that some changes needed to be made.

    • Problem: The users were not submitting photos, even though it is stated on each page of the form that photos must be submitted in order to receive a quote. This is likely because the statements are not prominent enough.

    • Solution: Because we can't make the file uploads required, I added a required question that forces the user to acknowledge that they will not receive a quote if they do not attach photos. This has resulted in less quote requests being submitted without an attached photo.

Phase 4

Go Live

This is the fun part! Most of the hard work builds up to this point, so when we reach the go live phase, it's rather simple. Everything went smoothly without a hitch!

 

Results

After Only 18 Days

34%

Decrease in Bounce Rate

18%

Increase in Average Pages Per Session

3m 21s

Average Session Duration