About
Grotek is an international producer of premium plant nutrients and traditional horticultural products. Their main customers are experienced growers from North America and Spain.
Role
- UX Lead
- UX Researcher
Date
- May 2020 – August 2020
Impact
Contributing to increasing sales by 2X within one year. Reducing bounce rate by 30%. Reducing maintenance costs and saving $50,000 on first two months.
Context
Grotek's previous website was built without considering the needs of its users, making it difficult to understand and navigate. It was solely concerned with polished designs and corporate objectives, the expense of maintenance was expensive, and managers couldn't rely on it to generate sales. The website's development agency provided usability testing for $25,000 CAD, but not everyone in the company thought UX is valuable.
Slow and ambiguous
The Home page takes between 4 to 8 seconds to load because of the interactive hero animations. These animations don't discuss the purpose of the website or mention any products/services.
Information overload
The product pages are bombarded with images, long paragraphs, and animations that are distracting and do not serve a purpose.
The process flows of User-Centered Design and Design Thinking.
My role and the outcome
As a sole designer on the team, I recruited participants, moderated usability workshops, prepared reports, and presented the team with problems and suggestions to improve user experience. After that, I worked on a new website alongside designers and web developers. I aided them with mockups, prototypes, critical criticism and tested it one more time.
In the first six months, the new website performed better in terms of SEO: The bounce rate dropped from over 70% to under 45 percent, and online traffic climbed by more than 20% on most pages. Within 12 months, fertilizer demand increased during COVID-19, resulting in doubled sales and more web traffic.
Usability testing and uncovering many issues
I collaborated on testing scripts with a number of directors. I was in charge of participant recruitment as well as scheduling. Because it was difficult to find skilled growers who had never used the Grotek website, I hired 9 novice/intermediate growers with UX/UI experience. That way, we'd be able to tackle the interface issues first and then concentrate on the context later.
The participants tried to complete 8 tasks and rated their difficulty and satisfaction level. The hardest two tasks to complete were: Finding an organic product for root development (Task #4) and finding the product catalogue (Task #8).
Understanding the user to understand the goals
Grotek maintains a close relationship with their loyal customers through trade shows, branded swag giveaway, and Instagram interactions. However, this relationship was absent on the old website.
We talked to several customers and reviewed customer service emails to understand their most common goals and frustrations. Next, we built a persona to determine the functional scope of the new website.
User-oriented goal
The Grotek website will allow users to learn enough about their products and differentiate them from competitors in order to make a purchasing decision in a short period of time. We will assess efficacy by evaluating website traffic.
Simplifying the information architecture
The original information architecture had sections that were confusing and repetitious. The front page was lacking in product information and needed a lot of scrolling. I worked on a new information architecture that makes products and technical documents more accessible.
Introducing Z-pattern layout for an easier navigation
Grotek's previous layout required horizontal and vertical drag and scrolling, which did not seem natural and made navigating information more difficult.
Z-pattern layout: This visual hierarchy is suitable for a simple page layout to present information in a way that will help the eye naturally scan it.
Sketching the interface and prototyping
Once the information architecture and the navigation principles were validated by the managers, we started working on the user interface. I created low fidelity sketches and then jumped onto Sketch/InVision to create interactive prototypes. My focus was the home page, product catalogue, and individual product pages. The design team worked on the rest of the pages and built the final interfaces.
Usability Testing (Round 2): New pages, new problems
To evaluate the redesigned website, I conducted another round of usability testing. This website was rated higher in terms of readability and functionality, and all participants were able to quickly identify the website’s goal.
The new learning page, on the other hand, was challenging due to its complex layout, long paragraphs, and buggy buttons. Furthermore, the product page included smaller text size, making it more difficult to locate key information such as a product’s feedchart.
What was wrong with the Learning page
The managers wanted to have a separate page for videos, articles, and FAQ. We thought it would be better to categorize content based on marketing campaigns, but that created a lot of buttons and sub-categories. I summarized the issues and proposed three different wireframes for reference.
Positive outcomes
