Forum Brands Website Redesign Case Study
UX Research and UI Design of the Product during the Internship
Introduction to the Project
In order to gain experience and sharpen my UX/UI design skills working with a real client, I was matched with the company Forum Brands and completed a 40-hour industry design project that solves the business problem. During this Internship, I had an opportunity to develop a new product by improving the existing design.
Forum Brands is the next-generation platform of consumer brands that acquires and operates best-in-class consumer brands selling on Amazon and other marketplaces. In general, the company’s goal is to buy companies that are Fulfilled by Amazon (FBA). The startup that is founded by three experienced operators who have collectively executed more than 30 M&A transactions in Amazon sales across their careers.
Forum Brands co-founders requested UX/UI design support in redesigning their website to entice more FBA sellers to immediately engage with Forum Brands offerings and also input information about their company.
I joined the project in the early stage of the design process at the level of the idea and therefore the Forum Brands website is in the trial minimum viable product (MVP) version.
Product Vision Understanding Process
Before my first call with the Forum Brands founder, I started my own research about the company and its product. Below are the steps of the research process that were taken:
-
I went to the company’s website and spent some time exploring it. That helped me to get a sense of their goals, mission, and the service they offer.
-
I also checked out the team profiles on LinkedIn to get a better sense of the people I will be working with.
-
I checked out the company’s social media pages (Facebook, LinkedIn, Twitter) and searched for any additional information.
The Forum Brands website pages are displayed below.
As it is an early-stage startup, I couldn’t find either data on the Crunchbase or any blog posts and news articles.
Online research and website exploration helped me to get a comprehensive understanding of the company and the problem they’re solving. Also, the online research method contributed to the formulation of early thoughts on how I could design their platform in order to meet the user’s needs. I took some notes of my ideas, impressions, and questions that I wanted to ask. Then I set up the kick-off call with the Forum Brands founder and sent the introductory email.
During the industry design project (IDP) online meeting with the Forum Brands founder, I got to know the company, received answers for the questions, and discussed our goals, challenges, and collaboration styles.
For effective collaboration and data storage, we decided to use the Notion collaboration platform. We also estimated the timelines for each step of the UX design process that we need to complete. Here are the steps:
-
Competitive research
-
User research
-
Usability testing
-
Redesign and/or redesign recommendations
-
Designing mockups and UI
Also, after the video call, we organized a face-to-face assembly in the coffee shop to meet in person and briefly introduce ourselves. I believe that the meeting out of the digital world established a friendly and informal atmosphere that made our further communication and collaboration more effective.
Heuristic Research & Competitive Analysis
The first step of the UX design process intended to be the Heuristic analysis method. It helped me to learn all the subtleties of solutions that competitors use to solve similar problems and achieve the goals set by Forum Brands.
At the beginning of the research, the compony’s founder determined few competitors and set a task to conduct analysis for these companies in order to take a deep-diving into their design and find the inspiration.
My goal was to identify what makes their features unique, how people engage with the platform and other design elements that make those platforms attractive.
Acquco is an institutionally-backed acquisition company that is focused on the third-party FBA sellers on Amazon.
The Acquco website looks modern, innovative, and high tech. There is a balance between white space, information, and illustrations. The information hierarchy on the page is correctly distributed.
The platform uses plain and clear language that helps the audience understand the information.
There is plenty of white space so it is easy to read.
Call to action buttons (CTA) are visible and outstanding.
Below presented the collage of Acquco website pages and my feedback.
-
The “Sell your Amazon business now” layout is the business presentation in video format is a great idea that helps to introduce the company, to make a great impression, and to sell the service to potential customers.
-
Information visualization: imagery and videos convey the meaning better than a ton of text. The “Easy 4 step process” layout consists of the illustration. This imagery content solution shows an easy four-step process of the business exit.
-
“Our leadership” layout makes the customers feel safe and comfortable when they see the real humans behind the business where they sell their companies. The platform presents the leaders of the brand with their smiling photos that look friendly and positive.
-
People often hesitate to contact the company before they made the final decision. In this case, the FAQ (frequently asked questions) page is the perfect tool to answer the common questions and to provide the basic information.
-
The “We will get back to you in less than 24 hours” statement on the “Connect with our team” layout is powerful and shows respect to the potential customers and gives an idea to them when to expect the response.
This illustration is a brilliant solution for the visual explanation of benefits and motivational for the customers.
Though it doesn’t fit in the screen size as it is too large.
It also looks overloaded.
The 5 steps of the business evaluation user flow consist of the five clean and very well designed pages with questions and options to select the answer.
Thras.io, Inc. (“Thrasio”), the largest acquirer of Amazon businesses and one of the top 25 sellers on Amazon.
The website design style is very specific. It has two layers: the main layer with layouts of content and the background layer, that is visible when the user is scrolling up and down the page. It is a fancy design approach but in reality, feels noisy, overwhelming, and overloaded as it has a lot of unnecessary images and elements.
White space is important for smooth and comfortable user experience. On some layouts, space around the content is missing.
​
Below presented the collage of Thrasio website pages and my feedback:
-
The statement “Sell your business in 45-days” sounds very clear and motivating for the customers.
-
The time range and process explanation is a great solution. The simplicity of the process can encourage customers to deal with this company. Though there is a lot of text in this layout that may be too overwhelming for the users.
-
The “What we do” page looks very busy and not consistent. The text on top of the pictures is not easy to read. The CTA button is not visible enough due to a lack of contrast between the background and the button.
-
The “Testimonials” layout is a good idea as customers trust more to the brand when they see good reviews from other customers. Though the text on the “Testimonials” is not readable enough and the distance between boxes is vast and too small from the edge sides.
-
The “Leadership” layout is an excellent idea that gives the user an option to see the business owners. Though it would be great to see the pictures of the leaders too. Also, the design doesn’t look consistent. The information hierarchy is missing and, the text looks squeezed and shifted to the right.
-
The “Contact us” page is very simple and doesn’t require a lot of information from the customers to get in touch.
Perch, a technology-driven commerce company that acquires and operates top Amazon FBA businesses with winning products in their respective categories.
The website looks classy, modern, and simple.
​
There are not too many images, enough white space, and the information hierarchy is very well designed.
​
Below presented the collage of Thrasio website pages and my feedback:
-
The website has a clean, user-friendly, and trustworthy design structure.
-
The “Is your brand is fit for Perch?” layout is useful as it explains the business requirements to the potential customers. Though the boxes are far from each other.
-
The “Our team” layout designed in the carousel pattern where each box/ card contains information about one of the company leaders. The users can shuffle the carousel in order to browse through all leaders.
-
The “Our Investors” layout is beneficial for convincing the customers to deal with the company that trustworthy and has the investors that believe in the brand.
-
The “Selling your FBA business in 3 easy steps” page presents to the customers the process and prospects of selling the business.
-
The “Why sell to Perch” page has a great information hierarchy and logical semantic load. Though the font color intensity is inconsistent, that perhaps is just an unnoticed bug on the website.
-
The “Get in touch” page consists of 5 input boxes that customers are required to fill out.
I conducted the heuristic analysis of competitors and companies who had similar or close to the Forum Brands goals. It gave me an idea of how other products look like and what features and design solutions they use.
Consumer Research and Insights
The path to positive user experience goes through the customer-focused product and consumer-oriented design based on the wants, needs, and challenges of the users. In order to achieve that goal, as a UX designer, I wanted to learn users' preferences with an eye to foresee the most suitable design solutions for potential consumers. And the best way to accomplish this task was the user interview with the target customers of the Forum Brands that are Amazon business owners.
The Forum Brands founder took responsibility for finding interviewers for the research and dropped the interview request on the massive Facebook group of Amazon sellers. I was responsible for the Meetup and LinkedIn platforms that also have a lot of Amazon sellers groups and business owners. But our recruitment attempts did not bring a positive outcome as the audience did not respond to the request for the research assistant. As it turned out, it was not easy to find and convince the participants to help with the research.
After the recruiting failure, I got the idea of using my own channels of connections and got 5 respondents that I assumed can provide valuable information, share their views, and design tips. The following is the list of the participants:
-
UX designer, 35 years old, California
-
Graphic designer, 30 years old, New York
-
Content manager, 31 years old, California
-
Former business owner who exited the business, 32 years old, Kazakhstan
-
Amateurish Amazon business owner of one product, 28 years old, California
I performed the remote interview (due to the COVID-19) using Skype video call. At the beginning of the interview, I sent the competitors’ websites links to the respondents in order to observe them in the process of interaction and asked to explore it and share their thoughts about the following products:
-
Acquco https://www.acqu.co/
-
Thrasio https://www.thras.io/
-
Perch https://www.perchhq.com/
All participants have chosen the Perch website as the most professional and simple as well as the Acquco. Though they noted that the latter, in turn, looked very contemporary and high-tech. The Thrasio website was described as very busy, overloaded, and dizzy.
In addition, 2 participants which are related to the business (Former business owner who exited the business and Amateurish Amazon business owner of one product) were asked about the factors and conditions that could motivate them to exit the business. And they shared that the decent price would be a great start to think about the exit idea. Also, they emphasized the importance of financial power, investments, and confidence in business growth and it’s future.
The qualitative research enabled me to get in-depth information on people's opinions, thoughts, and feelings.
Also, insights gained from the user research helped me to collect elicit data and gave me a clear understanding of which direction to move on, what style to use, and how to start building the website design.
Information Architecture and Wireframing
The key aspect of UX design is the Informational Architecture (IA) which is focused on the design framework, content organization, and information hierarchy for the user-friendly experience.
As customer impression is built up from everything he/she encounters, therefore my objective was to create a product that provides the easiest and most pleasant user experience. To complete this task I followed the further steps:
-
Reviewed the content
The content revision included an examination of the existing website content as well as evaluation of the information’s usefulness, accuracy, and overall effectiveness.
-
Determined the layouts
The content was divided into sections that were supposed to accommodate the copy, imagery, and UI elements connected in a way that should meet the users' needs and expectations as well as to encourage them to take the desired actions.
-
Defined the navigation structure
All UI components were arranged and located in order to create an intuitive website’s navigation that would help the users to perform their tasks and reach the information they need with the least amount of effort possible.
-
Created the sketch
The freehand drawing turned out to be the best tool to express the ideas and to record the vision of the website model in a quick way. The sketch helped to develop the basic structure of the website that is displayed below.
-
Prepared the wireframe
Based on the sketch I created the page schematic that represents the skeletal framework of a website that is presented next to the sketch.
Cooperative Design Process
Throughout the whole project I was collaborating with the Forum Brands cofounder and he, in turn, was communicating with the graphic designer and other co-founders. The founder continuously liaised with all team members to keep everyone up with my design solutions and the graphic designer’s style guide as well as informed about any news or updates regarding the company.
The complete process included the following stages:
-
Color Palette
At the beginning of this stage, the Forum Brands founder shared the cofounder's vision on the brand colors:
-
Primary color - dark blue/navy
-
Background color - offset white or very light grey
-
Complimentary accent color - orange
I was asked my perspective on a good color palette and I offered the following color mood and schemes.
_jp.jpg){kind=logo}
Based on the team's opinion, the graphic designer created the following color palette.
The Navy Blue color was later slightly adjusted to be bluer as the old one was more grayish.
-
Concept
After examining the competitors’ products, I thought about several questions on the Forum Brands future website design:
-
What is the appropriate style: classic or modern?
-
What type of imagery best resonates with the customers: photos or illustrations?
-
How to create the most appealing design of the website?
In order to find answers to the questions, I had a go at an experiment with the design solutions. This attempt gave the result in the form of two pilot options for the loading page that I presented below.
As the imagery content placeholder, I used resources from the unsplash.com and freepik.com platforms.
The Forum Brands team consensus was that the design with the illustration is enticing, outstanding, and concrete in the mind of the users.
Also, for the test design, I used the Lato family font and default “lorem ipsum” text as the content was not provided yet at this stage.
-
Typography
The font selection was provided by the graphic designer and consisted of two font families: the Futura and the Mr Eaves, which are displayed below along with their visual representation.
In order to anticipate the contingent font performance issues, I inquire for the selected typefaces are Webfonts or Web-safe fonts and then explained that if they are not it can affect the loading time, appearance, and implementation.
I also recommended using alternative Google fonts as they are released under open-source licenses and free of charge for commercial use.
Afterward, the Mr Eaves typeface was swapped to the Gill Sans. Then I was provided with the Webfont licenses for the Futura and the Gill Sans. The Futura and the Gill Sans typefaces are displayed below along with their visual representation.
-
Logo
Thereafter the graphic designer prepared the logo identity pack that is presented below.
-
Style Guide approval
Eventually, the Brand book was finalized and approved by the team.
-
Domain
At first, the website domain name was forumbrands.co. Then the Forum Brands founder came with the update that the team managed the negotiation on the cost reduction of the “.com” domain extension. Since then the website was running on the forumbrands.com address.
-
Copy
After all, the Forum Brands team landed on the website copy that included headers, bodies, and button names for all layouts of the home page. That information brought me closer to the final stage of the design process and I started to ponder design solutions.
-
Inspiration Resources
As an inspiration and stimulus for design thinking, I was looking for websites that could give me an idea and provide a hint for the product I was working on. Below I listed my favorite websites that gave me great insights:
-
Mentor Guidance
In every part of the project, I was getting continuous support and coordination from my UX design mentor. The mentor’s help was an invaluable and necessary resource, especially when I got blocked and concerned. In these cases, we were parsing the problem and making an effort to find the solution that brought the delightful result.
Design Recommendations
Before moving on to the final stage I intended to synthesize all the findings I’ve gathered and presented the redesign suggestions that I made and shared with the Forum Brands team:
-
For CTA buttons and accent elements to use the red shade of orange instead of the yellow one that was on the Forum Brands website
-
Remove the Blog page as currently there is not available information to fill it up.
-
Large cards with the social media links in the middle of the layout are not necessary on the “Contact Us” page.
-
Use a simple motivating, language that is easy to digest for any type of user.
-
Consider adding the “founders” unit with information about the leaders.
-
Present the company and its history in one of the layouts
-
Convince the potential customer by “easy steps of the selling business process” information.
-
Build the website with an easy navigation system.
I believe that these insights can help to build the website compelling for users to engage with.
High fidelity Design Solution
At the high fidelity design phase, I turned all ideas into the final design and created a detailed visual representation of the Forum Brands website.
That is the final version of the product with most of the necessary design assets and components that resembles the real product.
Conclusion
It was my first real-world UX/UI design project. At the beginning of the internship, I set a goal to deliver a delightful product with a business-driven design and fully fleshed out visual appearance.
During this project, I brushed up on the UX research skills, design thinking process, and UI design proficiency. In the process of work, I had to use my intuition, leverage acquired knowledge, and refine communication competence.
I also had a chance to demonstrate and establish a collaborative relationship with the Forum Brands team. I realized that the interaction and contribution between team members is crucial for productive, efficient, and effective performance.
At the end of the project, I turned my idea into a high-fidelity user interface with a beautiful visual quality that presents the information in an ideal way and has a clear structure.
