Redesign results in a 70% better understanding of business
for My Green Network
The Problem
MyGN contacted me saying their business was overwhelmed with calls from customers asking about information that should be easy to find on the website. They were worried that the problem might be with their homepage.
My tests showed that:
-
80% of participants were not able to answer what service MyGN provides.
-
None of the participants noticed the articles session, which contains key information about the services and licenses.
The Outcome
After the redesign, the page presented an improvement in usability and user experience.
Users were able to find and retain the information on the homepage 70% more effectively, including identifying key details such as the services MyGN provides.
-
Potential doubling of conversions after the implementation.
-
20% reduction in costs (operational) estimated after the implementation.
-
Increased Operational Costs
-
Loss of Efficiency
-
Potential Loss of Sales
-
Decreased Customer Satisfaction
Leading to:
It represents:
Before
Phase 1 | Why?
Understand why is the client seeking for a redesign. What are their goals with that?
Phase 2 | The business
Understand what is the business and the brand.
Phase 3 | The user
Understand the user: who are they, their behavior, how they interact with the system, their goals and needs.
Phase 4 | Design Review
Find the current basic design problems.
Phase 5 | The goals
Remember the 3 main goals of the home page.
Phase 6 | Fixing
Fix the design problems found having the user profile in mind.
Phase 7 | Prototyping
Develop a high fidelity prototype
Phase 8 | Usability Testing
With 10 participants were divided into a control and an experimental group, the test was essential to validate the new design.
1|Why?
(1/9)
Understanding the client's pain is important to define which path the redesign should follow and the goals that must be achieved to solve it.
My Green Network:
"We are overwhelmed with calls from customers asking about information that should be easy to find on the website. We wonder if there is a problem with our homepage."
Goals for the homepage
● Reduce bounce rate: In 2 minutes, users need to understand the business, their services, and how it works.
● Make sure the new users understand the licensing for cannabis in California.
● Educate the users through articles.
2|The Business
(2/9)
Before asking for more information about the business, I accessed the website to try to understand it, as if I were a user - although I'm not part of the company's target audience. After drawing my conclusions from what I could absorb from the page, I asked the client to explain the business to me.
My Green Network is:
The first of its kind shared cannabis cloud kitchen space. The services allow anyone to start their business faster and more affordably than the traditional approach.
Services:
● Membership-based kitchen rental with access to various specific machinery for cannabis product production.
● Advice and assistance in obtaining California's Type S license.
● Consulting for new product development.
3|The User
(3/9)
As it was an urgent project I didn't have time to do user research to understand the audience. In this case, I got this information directly from the client. Their information comes from the type of users who contact them, their current clients and their target audience.
MyGN Current Users:
● Entrepreneurs / Small companies
● 30 to 40 years old
● Men (90%)
● Middle class
● Superior education (master's)
BEHAVIOR
Well-educated young entrepreneurs with a certain level of formality show seriousness in their business but also present a more informal behavior when in-person meetings.
GOALS
Start their first business
DEVICES (to work)
Computer (75%), Phone (25%)
NEEDS
- To find an affordable kitchen to start producing.
- To learn and get help from experts.
4|Overviewing the problem
(4/9)
I found these problems the business faced due to the main problem of clients being unable to find key information on the website and calling for answers.
Loss of Efficiency
Existing staff is overburdened with handling unnecessary calls, reducing their ability to focus on more complex or higher-value tasks, resulting in inefficiency.
Increased Operational Costs:
The company needs to hire additional customer service staff, increasing labor costs.
Potential Loss of Sales:
Customers who can't easily find information on the page are frustrated and abandon the site, leading to lost sales.
Decreased Customer Satisfaction:
Customers feel frustrated because they can't find the information easily and are overwhelmed when looking for it.
5|Expert Design Review
(5/9)
Using my knowledge acquired over the years in the field of design and UX, I was able to identify design problems on the home page.
1| Too many important information together at the top of the page
As users scan the page, they might find it difficult to find key information. Users may feel overloaded by the amount of information, making it difficult to know where to start.
2| Using 5 different type fonts
Visual Clutter: the page may look chaotic and unorganized, making it difficult for users to focus on the content.
Cognitive Overload: Users might become overwhelmed by various fonts, which can distract from the message and lead to frustration.
3| The primary color is overused
It reduces the visual hierarchy, making it harder for users to distinguish between different sections or elements. There is no evidence of call-to-action buttons/links, which we want users to click to convert.
4| Some items are not centered
The lack of a cohesive design can confuse users and make the page feel unprofessional.
5| Bad arrangement of the session
Grouping: the steps and numbers are too separate, not forming a group. Grouping is usually shown by placing items close together and using white space or by enclosing them in a common area. Users may not understand it and don't read it.
6| License Comparison is confusing
The title of the License is separate from the information, it's also hard to understand what the buttons do. The structure of the session is generally confusing. This is an important session that users are not reading because it's not clear.
7| Buttons need shorter text
Long texts are not read and buttons are not clicked.
8| Uneven distances between the blocks of information along the page
The space improves readability, clearly divides the information, and creates a sense of organization and harmony, helping to keep the user engaged with the page.
8
7
6
5
4
3
2
1
Too much important information together at the top of the page
As users scan the page, they might find it difficult to find key information. Users may feel overloaded by the amount of information, making it difficult to know where to start.
The primary color is overused
It reduces the visual hierarchy, making it harder for users to distinguish between different sections or elements.
Bad arrangement of the session
Grouping: the steps and numbers are too separate, not forming a group. Grouping is usually shown by placing items close together and using white space or by enclosing them in a common area.
License Comparison is confusing
The title of the License is separate from the information, it's also hard to understand what the buttons do. The structure of the session is generally confusing.
Uneven distances between the blocks of information along the page
The space improves readability, clearly divides the information, and creates a sense of organization and harmony, helping to keep the user engaged with the page.
Buttons need shorter text
Long texts are not read and buttons are not clicked.
Some items are not centered
The lack of a cohesive design can confuse users and make the page feel unprofessional.
Helvetica
Libre Baskerville
Roboto
Poppins
Monserrat
Using 5 different type fonts
Visual Clutter: the page may look chaotic and unorganized, making it difficult for users to focus on the content.
This is an important session that users are not reading because it's not clear.
Cognitive Overload: Users might become overwhelmed by various fonts, which can distract from the message and lead to frustration.
Users may not understand it and don't read it.
There is no evidence of call-to-action buttons/links, which we want users to click to convert.
6|Review Goals
(6/9)
To guide the redesign, I recalled the goals the client wants to achieve with the home page.
PAGE GOALS
● In 2 minutes, users need to understand the business, their services, and how it works.
● Make sure the new users understand the licensing for cannabis in California.
● Educate the users through articles.
7|Fixing
(7/9)
At this point, I've rearranged the page's content by solving the design problems that I pointed out before. The result of this was a medium-fidelity wireframe.
Use the desktop version
for a better visualization
Poppins
AFTER | Progressive Disclosure: the information were split to be presented slowly.
"Where to Buy The Products"
BEFORE | Using 5 different type fonts
BEFORE | Too much important information together at the top of the page
After | Only 1 type form in different weights
BEFORE | The primary color is overused
After | 3 more colors were added to the pallete
BEFORE | Bad arrangement of the session
After | The itens were grouped and presented in an readible way
BEFORE | Some items are not centered
After | All the distances were standardized
BEFORE | License Comparison is confusing
After | The session were designed in a clear way
BEFORE | Buttons need shorter text
After | Button texts have been refined
BEFORE | Uneven distances between the blocks of information along the page
After | Distances were standardized and presented in a harmonius way
8|Prototyping (before testing)
(8/9)
After fixing the design problems, I developed the prototype according to what would be appropriate for MyGN users. The design is professional but has touches of joviality.
9|Testing
(9/9)
With 10 participants divided into a control and an experimental group, the test was essential to validate the new design. The participants were chosen based on the real users of MyGN website. A scenario was given to the participants and they had 1 minute to visit the homepage. After that, a questionnaire with open answers was applied, followed by a Website Analysis and Measurement Inventory questionnaire.
Readability Test:
Control group
10
20
Men
Upper middle class
Complete master's degree
US citizens
Experimental Group
10
Access
Old homepage
Access
New homepage
1. Scenario
You and your two partners are starting a new company and this site may be useful to you.
2. Task
Visit this homepage and try to understand what is your business about and what product or service the website's owner provides.
3. "Quick" Exposure Memory Test
You have 1 minute to visit the entire homepage
4. Questionaire (verbal response)
1) Talk about the company that “you and your partners are going to open”?
[Goal: Understand if the users understand the general
subject/business]
2) What service does the website company provide?
[Goal: Is MGN service clear when rapid exposure?]
3) What can you say about licenses?
[Goal: Do the users read about the licenses? Is this section
clear?]
4) If you had more time, could you learn more about your business using the site?
[Goal: Do users notice the articles section?]
User Test Findings
Old page
● The control group, which accessed the old page, failed to understand the main information. After analyzing the page for 1 minute, 80% of them could not accurately identify the service My Green Network provides.
● None of the groups mentioned the articles available on the site as a way of obtaining information. Therefore, it might be interesting to rethink the way this session is presented on the page.
New page
● In the experimental group, which had access to the redesign, 90% of the participants were able to identify the service MyGN provides.
● It represents an improvement of 350% in people who can find and retain the information on the homepage.
● An estimate was applied showing a potential of doubling conversions after the implementation.
● The estimate presents a 20% reduction in costs (operational) after the implementation.
Product Refinements (after the test)
Refinement 1
Add more images of the kitchens to clarify what is the business and what it looks like.
Refinement 2
Redesign the article session to drive more attention to it.
Final Design
