Loading...

Fauxcades

Web Design/UX Design

Home • Fauxcades
The Objective:
To Create a New Web Experience.
Fauxcades's prior website had several comments expressing concern over the usabilty of the website as well as not being able to find information about products from clients. The plan called for a complete website redesign, one that showcased Fauxcades excellent services while also providing unique examples of jobs in the past. This page overs insight to my research process and overall development process concerning Fauxcades web redesign.
Project Objective
Fauxcades Inc. was in need of a drastic modernization of the company's webpage. The old site did not fit the comany's needs which were to showcase Fauxcade's event services with potential clients. The objective was to modernize and present clients with a cleaner and more user friendly website experience.
Project Role
Lead Designer
Lead Reseacher
Lead Developer

Project Team Members:
Nick Gonzales — Designer
Jefferson Muncy — Designer
Project Timeline
This project spanned over 2-3 months starting early February 2022 to live launch in Late April 2022.

The Process

Click to jump to a section
Research Wireframes Design Final Thoughts Gallery

The Research

What Fauxcades's website used to look like

Introduction

The Need For Change

Event organizers like Fauxcades typically use their website to showcase their design skills and to entice potential clients to choose their company. However, the company had increasingly heard several comments from clients as well as employees pushing for a redesign of the corporate website. I was tasked to lead this change along with the help of my coworkers.

The Redesign Process

Initial Questions

The first step was to conduct in-person interviews with both the company owner and fellow event coordinators to learn their opinion on what could be improved with the website and what frustrations they had currently experienced. This interview process was also expanded to current clients with their comments below:

Owner Comments
The owner, Kate Fishel, shared her vision on how she wanted to present Fauxcades as a company. She believed the site needed to be expanded with specific examples of what they do and to allow the customer a new view of Fauxcades and the processes from ideation to creation.

"The ultimate goal is to get people more interested with Fauxcades, right now there’s no organization, very few pictures, and overall it’s not a pleasant picture for customers. I want something more modern and focused on our product — the event."
Event Coordinator Comments
Event coordinators also shared similar frustrations surrounding the website. They found that clients often would have little to no examples of imagery of how certain items looked. While the competition had a portal where clients could explore rental items and compare, Fauxcades had no such system in place.

"The website is a mess. The image gallery is unorganized and simply doesn’t work. We need a place where clients can view our products; as it is right now very few people actually use the website to find what they want."
Customer Comments
While the experience was bad for event coordinators to show what Fauxcades could offer, for customers it was even worse. The most common complaint surveyed from clients was that there were no examples of work other than the home page and the gallery was no help because it was unorganized. Paying was also a hassle because the button to pay was obscured in the footer.

“Quite honestly we booked your vinyl service without knowing how the final product would come out. The website didn’t have any reference pictures and internally we were scared that the vinyl cling would look terrible, but in person it looks amazing. You really need to update your website.”

With our in-person interviews done, it was imperative that my design team fixed these issues. My team and I were committed to fulling the owner, Kate Fishel’s, wishes and offering a new clean and modern website with a focus on addressing the clients’ complaints that were discovered in the interview process. This leads us to the next building block, establishing the framework of the website.

Inital Planning

The revised sitemap for Fauxcades

Brainstorming

Understanding the user flow

The main problems surrounding the current Fauxcades website was that there were no specific event examples and no organization. I understood that the client wanted to see what the company could do before they would commit to a full-scale contract. For that, we developed a user flow in which we understood how the user would browse the website, from using galleries, to browsing rental items, and finally, contacting the company for a meeting.

Our initial framework, color-coded by information type for the webpage

Setting the framework

Each service would have its own separate page, allowing the clients a more expanded view of Fauxcades services. My team and I brainstormed and established an outline of how we wanted each page to be organized and thought about how the client would see each specific example and service-related category. This framework would establish the base line for organization when transitioning to the wireframe stage.

By understanding the user flow, I developed a new optimized site map. The main categories that were on the top navigation were About Us, What We Do, Our Team, and Contact Us. Also included was a tab for payment, located directly in the navigation bar for easy access by clients who needed to pay their contracts. By utilizing this new site navigation, it helped solve some of the issues that we were previously having problems with:

  1. Organization of Services — Clients were able to immediately see the services we offered and since each page was separate, they were able to easily see a service they were interested in with new detail.
  2. Client Pay Portal — Instead of hidden in footer, the payment portal was now more prominent allowing clients to easily pay their invoices without having to search or scroll all the way to the bottom of the website.

Wireframing

Pencil examples of how I planned each webpage types: Home, About, & Content pages (2 design versions)

Constructing the Layout

The Plan

When creating the wireframes, I looked back at the research we had done with our user flow and frameworks. This stage involved bringing the team together to discuss organization practices and the best way to present the information to fit to our overall objective. Two seperate versions were created which led us to the first testing phase of the initial wireframes.

The Wireframing Stage

Internal Feedback

I sent out a quick wireframe template to our client-facing teammates to quickly inquire what should be added or changed from our current website pages. The purpose of this was to discover simple improvements that could be executed quickly. The feedback we had from our initial test helped narrow our design focus and establish a more refined webpage. Some of the feedback I received was:

  1. When showing images to our clients it was important to note what items Fauxcades worked on so that way the client knows how Fauxcades can elevate their event when everything is placed together.
  2. A big feature request was the addition of more videos and descriptions of our process to further humanize the company and showcase that everyone works together as a team.

Design

Fauxcade's brand guidelines

The Soft Launch

How I appealed to my company's design needs

With the testing phase of the wireframes completed, my team could move foward to the design process. For this, my team consulted heavily on the Fauxcades brand guidelines for use cases on fonts, colors, and more. The website was an extension of the Fauxcades brand, and it was critical that it was recognized as such. The website would be acting as the company’s first impression with potential clients.

Once I had thoroughly examined the data from our research, it was time to create a website beta. I first wanted to ensure that with the soft launch, our clients would be able to see and immediately establish that this website was distinctively Fauxcades. In addition, it was imperative that we also improved on our results from the wireframe iterations. All of this included:

Brand Awareness
Utilization of brand fonts and colors were crucial to building the webpage prototype. We had to ensure that headers and other design elements were consistent across the board.
Navigation Improvement
On the Fauxcades rentals website, clients struggled with the multitude of items we had to offer. To resolve this issue I built sub navigation centers so that people can search for what they needed more quickly and efficiently. This helped alleviate the overflow of data and break it down in to simple, easy to comprehend chunks.
Media
The initial build was far more text focused, wanting to describe our services to our clients rather than show them the process. We improved on this by building in additional sliders, videos, and pictures to show our customers the exact process, how we fulfill your order, and bring the client into our world from concept to creation.

Website Development

This was one of the most challenging aspects of the entire project. In the team of three, I was the only one with experience working in front end development systems such as HTML, CSS, and Java. As a result, I was lead developer while other members of my team finalized design choices. With the project only a couple of weeks away from deadline, I readily converted our wireframes into usable code which was ready for beta testing.

Comparison of the first version of the header to the final version

Iterate, Iterate, Iterate

Making the design perfect

No design is perfect right out of the gate and our website beta was no different. We quickly realized that some ideas that sounded well on paper just didn’t handle right in the real world. We ran into some rendering issues and the placements of some items were confusing to the client. These were the problems that we ran into initially and how we worked to resolve them:

  1. Rendering Issues
  2. Layout Issues
  3. Usability & Readability
Rendering Issues
One of the main comments we had was centered around the floating images that we incorporated into our website. We noticed that this had some compatibility issues, as when working with screens of various sizes, the placement of items didn’t quite line up the way that we wanted them to. We fix this by limiting the use of floating images and instead incorporating full-width sliders and slideshows to help present the information better.
Layout Issues
Another issue that we faced were layout problems. Some users had a problem distinguishing what information went to a certain product. We addressed these issues by redesigning our descriptions to be clearer and concise.
Usability & Readability
Some users reported that some of the branding colors did not read well on some screens to some users. We resolved this issue by reducing the amount of brand colors we used and ensuring that our body copy, colors, and fonts were readable and accessible friendly.

The Final Design

The final redesign of the Fauxcades website

The Challenges

Lack of reference point

Unfortunately, one of our main challenges is the lack of resources and time that we had day to day to create the website. Since the original website offered no resources, all the body copy and reference images had to obtained from the company archives of events. There was no reference point to start from, so the events chosen had to presentable and easy to explain. This process took a lot of time with the team having to meticulously choose with the surplus of images and, in addition, also be able describe the company process with detail. With this challenge, we had to reiterate our designs in order to be achievable within time and technical constraints, while still providing more value to our users.

Lack of development knowledge

The development side of the website was also an issue. With no one on the team having experience on creating websites other than myself it was up to me to carry the challenge with developing the site. The decision to develop the webpage instead of using an online website builder was to bring more customizable elements to the website while also including animations, sliders, and colors exactly where we needed to fit the initial objective and wireframes. While the challenge was hard, it was not impossible. I utilized various time management techniques and broke down each website needed into smaller parts. Doing this ensured that I could meet the deadline of the project while ensuring the development was correct.

Final Conlusion

Our success

Overall, the complete redesign of the Fauxcades webpage was a success. We increased customer satisfaction and customer engagement across the board. Clients who have compared the two sites have expressed satisfaction over the new webpage and remarked how easy it was to use. The expanded services and increased representation of our products on the website has led to an overall increase of customer clientele with more contracts being produced and increased customer satisfaction.

The team has learned a lot as well. To lead this team that had little experience creating a website has taught me valuable lessons about the process as a whole. I was able to bring my knowledge to the company and help other designers expand their skills. By creating wireframes and utilizing various research methods, we are confident behind our webpage process and the benefits it brings to the company.

What I learned

This was my first experience leading a design team and the experience was well worth it. Highlighting every point of the design process, from research and interviews, to wireframing and design, with our company owners and team members helped me realize the importance of UX in our design world. The ability to show how processes work and ensure that our clients can use our product well shows how good design leads to further customer satisfaction. This project was invaluable as I gained a lot of experience working with all the moving parts of a UX project and guiding others along the way.

Thank You

Thank you viewing this project. This website is set to become the official company website by late April 2022. Thank you to my team members Nick Gonzales and Jefferson Muncy and thank you Fauxcades.

© Fauxcades 2022

Gallery

The Final Project