Re-designing for
Clarity and Findability.
A start-up's desire for change is hindered by design. With a re-designed website, we cleared a path for the company to solve global food waste through modernized farming.
"It was a pleasure to work with a very professional team that understood the heart of our needs."
- Tinia Pina
CEO & Founder
Context.
The Client
Re-Nuble is a start-up that is trying to change the world by using food waste extracts to manufacture fertilizer. The fertilizer they sell is used for hydroponic farming which allows for growing crops in any location, including urban spaces, and all without soil - just liquid.
Because they're a small operation and are unable to sell their product directly to their customers (farmers), they use distributors to do it for them.
The Team and My Role
Jacob Thomas
UX Researcher
UX Designer
UI Designer
Cesar Buffington
Client Point of Contact
Team Lead
UX Researcher
UX Designer
UI Designer
Randy Friday
UX Researcher
UX Designer
​
As the point of contact, I managed expectations, lead client-team meetings, orchestrated the progression of the project and facilitated the final pitch to the client on our design.
My experience in managing projects, leading IT teams, and communicating with high-level executives, influences the way I approach UX.
Tools and Methods
Tools
Sketch
InVision
Methods
2-Week Sprint
Client Interviews
Feature / Competitor Analysis
Heuristic Analysis
User Interviews
Persona
​
Task Flow
Design Studio
Sketching
Wireframes
Prototyping
Usability Testing
Sitemap
The Project
Before we came into the picture, our client was aware there were issues with their website that was preventing them from succeeding to their potential. They mentioned they'd like to reduce "confusion moments" and make it easier for their current and future customers.
Client Needs:
-
Find product information easily
-
Make it easy for their customers to purchase their product via distributors
Because of their lack of bandwidth, they mentioned they would be unable to modify their current site until they finished growing their team.
Our Deliverable:
-
Fully research, design and document the best solution to address their issues so they could use these recommendations when they expand their bandwidth. Deliverable included feature/competitor analysis, sitemap, user interview/usability testing takeaways, analysis of analytics, a redesign of their website with all digital assets used.
The Project's Primary Design Issues
Findability
​
A website that confuses people: With such a great purpose and achievable solution within reach, the start-up's site stops people in their tracks, and renders them confused about what to do next. A potential customer is left without a clue about what the company does - so they leave.
Purchasing
An experience that deceives customers: Although the company only sells their products through 3rd-party distributors, their website has an "add to cart" and "checkout" functionality that doesn't actually process purchases.
Original Homepage
Original Checkout
“When I decided to buy the product, I added it to my cart, went through the check out process and I never heard back. I called them several weeks later to see if they had received my order - they hadn’t.”
- Current Re-Nuble User
Research.
Issue
Website currently sells directly to consumers.
From the onset of the project, we realized that the core issue with the site's functionality was Re-Nuble's perceived business model. Despite the appearance of a "business-to-consumer (B2C) model, they only sold their products in a "business-to-business (B2B)" model.
Solution: We set out to design and test a "find distributor" search functionality.
Analysis
Heuristic Analysis
Through a widely used design evaluation (heuristic analysis), we discovered several issues with "learnability," "delightfulness" and "valuable" characteristics of the site that we sought to address.
Google Analytics
Among several pieces of information, we learned that the homepage was the most visited webpage and most visited from a desktop computer as opposed to mobile devices. The average time visitors spent on the page was 54 seconds before people left the site.
Feature / Competitor Analysis
We noted that there were several features that our current client was not using to their advantage while others did. One such example was a "featured in" section. Re-Nuble has been featured in various publications, and if used it could bring additional credibility to the company.
Issue
Users for testing unavailable.
When starting our 2-week design sprint, Re-Nuble agreed to give us people to test their site comprising of current and possible buyers of their product. We faced an issue where we were not given names and contact information for those individuals until halfway through the project.
Solution: Move forward by focusing on testing the existing site for usability issues with people having similar demographics as Re-Nuble's target customer - farmers. We used the USDA Census of Agriculture to do this and uncovered most farmers were on average male, and in their 40s and 50s.
Testing Existing Design
Only 2 of 5 completed one task
What We Did
We ran tests with five males in their 40s and 50s so as to align with the key demographics of a would-be farmer. By doing this we started with a broad perspective to test for usability and comprehension.
What We Asked
"Find the ingredients that make up this product."
What We Found
All testers were confused about what to do on the landing (home) page. Most commented that the background photo was distracting and "overpowering." No one knew where to navigate to find the specific information we requested. Out of the 5, only 2 found the specific information and thus completed the task. However, those 2 users only found this information through the process of elimination and by far, took the longest time searching for the information.
"The background picture on the homepage is too overpowering."
- User
"There's so much going on, I don't know what to do."
- User
"I didn't even realize you could scroll (on the homepage)."
- User
Develop.
How might we enable Gabriel, our farmer, to seamlessly make an informed decision and make a purchase?
Persona
"I do extensive research on what goes into my crops because it can make or break my business. I don't have much time, so I need to find that information and buy it quickly and easily."
Frustrations
-
Unable to quickly and easily find information on fertilizer.
-
Confusion about where to buy the product.
Motivations
-
Stay ahead of the competition in providing quality and natural produce.
-
Financial incentive to sell his produce.
- Gabriel, 45 years old
- Hydroponic enthusiast
- Conscious urban farmer
Goals
-
Make an informed decision on which fertilizer to purchase.
-
Understand what ingredients are in a fertilizer, as there are many regulations that define what can and can't go into his crops.
Sketches and Design Studio
As we ran through our design studio, we sketched designs on paper and white-boards to address the business and user needs. We came up with a single scrollable page as a solution. This type of design would allow people to quickly and easily digest information in a fraction of the time it took people to do the same on their current site.
Wireframes
My colleague made a low-fidelity wireframe in Sketch app to bring our concept to life and to use for usability testing. We had 5 iterations of wireframes when we landed on our high-fidelity wireframe and prototype.
Issue with the current site and how we changed it:
-
No hierarchy: created single-scroll page with defined hierarchy.
-
No B2B functionality: created a distributor section for users to understand the B2B model in place and a method to purchase the product.
-
Text heavy: visually conveyed information to reduce “wall of text”
User Interface
Through our research, we added elements we found to be successful at conveying the purpose of each section on the page. Also, we minimized the number of actions users needed to take, while also making buttons and links perform predictably. Through color, font sizes and icons, we drew attention to key features and actionable items.
Results.
Testing New Design
What We Did
With Re-Nuble's business goals in mind (as well as research data from round one of user testing), and best-practices in design, we executed a second round of usability testing with 6 additional people.
What We Asked
-
What percentage of the fertilizer is organic-based?
- Find where you’d be able to get information on the product’s feeding schedule.
- Go through the process of purchasing fertilizer on this site.​
What We Found
-
Users were quickly able to navigate the site.
-
The ability to access one section within the page was less cumbersome. People were not afraid to scroll and explore the page, whereas before, people were unsure of what to do.
-
6 out of 6 users were able to successfully complete all three tasks on the new design, whereas on the existing site, only 2 of 5 were able to complete one single task, and only by navigating through the entire site.
"It's digestible and pretty much tells you the whole story."
- User
"It's slicker than most sites."
- User
"I like the whole flow, the white & green contrast. It has everything I would need."
- User
Issue
Some testers were not who we thought they were.
During some of our testing sessions, we realized through our open-ended questions that a few either worked at or knew someone in the company.
Solution: Because of this, we didn't completely invalidate their responses. Instead, we took their feedback with a grain of salt and used it specifically for research on the general usability of the site.
"I like that I can go up and down several times and find what I need pretty quickly."
- Usability Tester
Before
Original Global Navigation
Original FAQ
After
Redesigned Global Navigation
Redesigned FAQ
Original Business-to-Consumer Model
Redesigned Business-to-Business Model
Before
After
Next Steps
-
Test word choice used in global navigation to fine-tune users’ understanding of the site being B2B.
-
For feeding schedule explore different ways of displaying information that would otherwise require a downloadable file (which is the case with the existing client website).
-
Utilize Google's API to dynamically modify distributor information on the site so that customers always have accurate information about where to buy Re-Nuble's products.