top of page
GLOBEMALLOW
An educational marketing and lead generation tool for a web sustainability application.
OVERVIEW
Globemallow is a powerful free tool enabling designers and engineers to create greener, more eco friendly webpages and reduce a website's digital footprint.
PROBLEM
The existing site was not properly educating visitors on what web sustainability is and why it is important. Another issue was the layout and visual design of the site was overly complex and difficult to understand. These problems caused a high bounce rate and many first time users were unsure of what the Globemallow was.
GOALS
-
Generate awareness of web sustainability
-
Increase Globemallow usage and downloads
-
Create a cohesive and professional visual design
ROLE
Lead Product Designer
TIME FRAME
4 Weeks
INDUSTRY
Web Sustainability
MOBILE
DESKTOP
1. The clean layout of the new mobile site makes the information presented easy to comprehend for new users, with clear sections for each feature of Globemallow and explanations about why the features are unique and useful.
2. Education increases user engagement. Sections of the site explain exactly what "web sustainability" is and break down how Globemallow measures different metrics and produces a sustainability grade.
3. Strong CTAs promote user conversion, there are prominent sticky CTA buttons in the first section of the landing page on the desktop version of the site, and a convenient sticky "Back to Top" button on the mobile version that quickly guides users to the CTA from anywhere on the page.
THE DESIGN PROCESS
01 RESEARCH
UX EVALUATION
Spacing issues
Two products being advertised creates confusion
No margin
Alignment issues
Lack of info about What Globemallow is
No "story" or logical path of information
Multiple backgrounds lack cohesion and slow loading times.
PROBLEMS
The original Globemallow homepage was difficult for users to understand due to three main reasons.
1. There was a lack of information about what the product actually was.
2. The layout was confusing due to a non-cohesive design and because the single page was actually presenting two separate products.
3. The current site only works on desktop and is not formatted for mobile.
COMPETITOR ANALYSIS
KEY TAKEAWAYS FROM COMPETITOR ANALYSIS
WHAT WE LEARNED
WHAT THIS MEANS FOR THE DESIGN
"Web sustainability" not a well known concept
None of the competitors are using extension format in the same way as Globemallow
Seems to be a gap in the market for free tool for designers and developers
Make sure Web Sustainability is clearly explained
Highlight convienience of extension format
Clearly explain position as free tool for people creating websites
KEYWORD RESEARCH
I created a list of keywords that each of the competitors were using to gain a better idea of what sort of phrases users were searching for. I used a few different online tools to discover the keywords and then created a spreadsheet that breaks down each competitor site and the keywords that it uses. I also created a document that collected all of the most used keywords across all of the competitors.
MOST USED KEYWORDS
02 DESIGN
SKETCHES
Next, I moved on to beginning to sketch some ideas for the general layout of the home page. Through the sketching process I decided to,
-
Focus the home page design on the Globemallow product.
-
Create a separate page for the Analytics and Ad-Blocker that can be accessed through a link in the menu.
WIREFRAMES
For the layout of the Globemallow home page, I focused on creating a simple mobile and desktop design that effectively illustrated what the product was and made it easy to download, while focusing on the three things I learned from the competitor analysis. 1) Educate users about web sustainability. 2) Highlight benefits of browser extension format. 3) Clearly explain position as free tool for people creating websites.
DESKTOP
MOBILE
VISUAL DESIGN AND MOCKUPS
VISUAL DESIGN
The direction I chose for the visual design focused on simplicity and used the existing brand colors so that the website would be cohesive with the current product design. Multiple weights of Helvetica were used for all text elements for a modern informational feel. A dark background was utilized to adhere to more sustainable design practices due to the fact that darker backgrounds consume less energy than light. Some elements use light strokes to help them become more visible against the background, and buttons and boxes have rounded corners to create an approachable tone.
HIGH FIDELITY MOCKUPS
Next I implemented the visual style I chose and created high fidelity mockups and a basic prototype for the design so that I could conduct user research. Titles of the sections are in green, while illustrations and vital details in the text are colored orange to focus user attention.
DESKTOP
MOBILE
03 TESTING
An unmoderated user test was performed with 8 users on the mobile version of the prototype. This test was designed to discover any pain points or obstacles when viewing the home page.
USER TEST OBJECTIVES
1. Find out if users can easily understand what is meant by web sustainability.
2. Discover if users know what Globemallow is after viewing the site.
3. See if there are any issues with the layout or visual design
QUESTIONS
TEST RESULTS
MAIN ISSUES
-
Some users were unclear on what exactly Globemallow was
-
Many users wanted more information about web sustainability in general
-
Users were curious how Globemallow measured web sustainability.
CHANGES MADE
After reviewing the test results I added two sections to the homepage, as well as an addition to the site navigation.
1. This section clarifies what is meant by "sustainability" in the context of the internet.
2. This section gives some examples of what metrics Globemallow is checking to produce a sustainability grade.
A sticky CTA was added to the desktop version of the site so that the user can add Globemallow to their browser from anywhere on the homepage without scrolling all the way to the top or bottom
For the mobile version of the site a "Back to Top" button was added for the same reason.
RESULTS OF REDESIGN
-
30 day average of website visits increased by 428%
-
Returning users increased by 50%
-
New users increased by 276%
04 WHAT'S NEXT
I will continue working with Globemallow to redesign the browser extension itself, focusing on improving usability and user retention. This is a brief evaluation of the current browser extension design.
UX EVALUATION
FACT VIEW (LANDING SCREEN)
Some issues with spacing and alignment
Currently split into two separate tabs "fact view" and "report view"
REPORT VIEW
Top section of fact and report view are essentially the same and are redundant
Certain colors are difficult to see due to lack of contrast
Spacing and alignment issues
Visual design not cohesive with home page
Some data could be presented in a simpler more easy to read way
Flip this section so labels are on top
Move Page Recommendations to the top so that it is more prominent
The current landing screen for the browser extension is split into two tabs "Fact View" and "Report View." This seems redundant and confusing. I will combine the two tabs to one landing screen to simplify the user experience. I will also adjust text and layout for better legibility and rearrange some sections for a more intuitive order for the user.
SUSTAINABLE REMEDIATIONS
Awkward spacing and layout
Hard to read text
This page is a more detailed breakdown of what specific elements are causing the most energy usage on each tested page. Currently text is very small and hard to read and the alignment is strange because the text of the elements can be very long when expanded. I would move the text towards the center and make it larger so that it is more visible.
SITE COMPARISON
Hard to read labels
This site comparison page expands from the landing page and is used to compare the energy consumption of recently viewed sites. The labels on the graph are difficult to read, I plan on making adjustments for visibility.
KEY TAKEAWAYS FROM DESIGN ANALYSIS
1. Combine "Fact View" and "Report View" into one page to simplify the user experience.
2. Change colors to improve contrast and legibility as well as to create a cohesive look that works with the home page redesign
3. Alter some layouts and sizing of info so that it is more legible and looks cleaner.
PRELIMINARY SKETCHES
A few sketches illustrating some early design ideas for the browser extension. A work in progress, I will be adding to these as the project continues and I move further in the design process.
LESSONS LEARNED
1. When describing a product it's important to consider that some users are going to be much more knowledgeable than others. A balance has to be achieved with providing enough information but not bogging down the flow of the site.
2. Show rather than tell in regards to product features. This is especially important when the user may be someone who has simply stumbled across the site and is not particularly invested in learning about the product.
3. I learned an enormous amount about web sustainability in general while conducting research for this project. Designing with sustainability in mind can have benefits across the board. Lower energy consumption and faster load times are important, but more sustainable sites also use less bandwidth which makes them more accessible to users in rural areas or areas with unreliable internet connections.
bottom of page