UI/UX Case-study : Fig+Goat Website Revamp

Overview

Fig+Goat is an online catering service company in the US that offers pretty, pre-arranged charcuterie boards. They approached us with a website whose design language was outdated compared to existing trends and designs. With the goal of expanding their business to other locations, they decided revamping their website as their first step.

Understanding the flow, analyzing the problems … jumping to the first step of solution

After examining their old website design, I figured out a couple of problems related both to the design language (UI) as well as the organizational flow (UX) of the content. The first step was noting down all these issues.

Problems related to the flow and organization:

• The placement of banner was unclear.
• There was no proper CTA ( Call-to-action ) button.
• Landing page lacked some crucial information.
• Top navigation bar did not encapsulate important pages.

Problems related to design:

• The logo covered the entire view of the landing page.
• The colors used in the website did not compliment the company’s logo.
• Although the font used in the website was not as outdated, it was slightly formal for the overall objective of the company’s website.
• The components of the website did not follow a consistent pattern of design.

The Solution … First Step

“Re-design is built to better serve the purpose of the original design.”

After analyzing the basic flow of the website, it was crucial for our team to decide the task that needed to be divided within the team of four. We had to complete the designs as well as develop the website within a limited amount of time.

Because the existing website already contained most of the components, it was easier to decide the sections that needed to be placed on different pages. However, we needed to brainstorm and research for the type of content that needed to be placed on the home page. After a couple of meetings and discussions, our team decided to move ahead with the interface design and the front-end development simultaneously. During situations like this, it is essential to identify the skill set, time and effort required to accomplish the task within the given period of time.

My Role

For this project, I primarily worked on visual / interaction design. My partner Kshitiz handled the task of front-end designing along with the back-end setup and development with the assistance of Saurav. Upon the completion of the core design tasks, I helped Kshitiz with the front-end coding portion as well.

Process of re-design

Preparing graphics for website

Up until the time this project arrived, I was unaware of the fruit called fig. I searched for the fruit and it was after this that I decided to use illustrations of the fruit and its leaves as graphic elements.

The placement of the illustrations on different parts of the website complimented the company’s logo thereby adding playfulness and ecstacy to the overall outlook of the website.

Selection of font

The motive of this business is to distribute happiness among people and Fig+Goat had already captured that in their logo and presented a delightful vibe through its first look. The new font to be implemented must preserve this goal of the company. So, the task of hunting the perfect font began! I tried a couple of combinations until we decided to proceed with Cera Pro. The font variations are displayed below:

Playfair Display for title and Cera Pro for content.

Source Serif Pro for title and Cera Pro for content.

Cera Pro for both the title and content.

Tools used

Illustrations: Illustrator , User Interface: Sketch

Preparing the sitemap

After preparing the assets / graphic elements, the second step was to build a sitemap for clear content placement which otherwise were missing in the old design. For this, I went through all of the inspirational sites that the company’s owner had provided us. Besides, I searched for other websites that operated similar business.

Sometimes, our clients do not know the right information that needs to be placed at a particular section. At other times, they do not know what the information itself is. In such cases, it is very important for the designers to research the kind of information that play vital role in the overall understanding of the company’s core values. Hence, I prepared a set of dummy content for the CTA and how it works section.

Likewise, I prepared a basic structure that built-up the landing page. This first set of deliverables gave a clearer picture to the owner about the content. It became much easier when I could replace the dummy content with their actual content.

Accessorizing the sections

The placement of the sections was clear to me after preparing the sitemap. To make the overall outlook of the website enjoyable, I decided to decorate every possible element yet maintain cleanliness and clarity. I used box wrappers with tilted shadow, rounded triangular wrappers, etc. for this.

Selecting the primary color

Although by now, the color of the fig was pretty clear to me and the fact that the logo of Fig+Goat displayed similar color, I experimented two different color shades to be used as the primary color. The outcome basically portrayed two different variations of the color. I have uploaded the initial versions of the design on my dribbble page.

“For that hint of extra style, I prepared an additional design that displayed a curved theme.”

The final design is uploaded on my dribbble page.

“The Next Big Challenge”

The most challenging task for the team was to proceed with the designing and developing the front-end view and backend concurrently. Although it seemed nearly impossible for us before the commencement, our team sat down together everyday to communicate our individual progress and discuss the feedbacks provided from the client side as well. Because the time period provided to us was very less, the team had to double the speed keeping in mind all the possible errors that could occur.

The parallel round of feedback, designing and development

Even the simplest change in design could lead to a huge problem on the development side. Therefore, the most scary yet enjoyable part for me was to prepare the designs that could satisfy the client’s need as well as the end user’s without having to make much changes to the designs.

While my other team members were totally occupied in the development side, I was trying to complete the design task. After the completion of design, I assisted the team on writing down the HTML/CSS for few pages.

Conclusion

Due to strict time constraints, the designs and research were based on my experience and knowledge. I worked in close collaboration with my team in order to avoid any possible problems that could arise. Overall, it was a great experience.