responsive_design2.png

UX design and development for eco-start-up | ReBlocks

Every year the United States produces 1.8 billion tonnes of plastic. ReBlocks plans to aid the effort to recycle more plastic. ReBlocks is a building materials and manufacturing company that uses all 7 types of recycled plastic to produce a slate-looking material with endless opportunities.

I was introduced to ReBlocks through a friend, and they asked me if I would like to help them re-design their current website. I saw this as a perfect opportunity to get real-life work under my belt.

The project’s primary focus was to create a responsive website and campaign strategy that excites consumers about the founders’ visions of creating affordable & sustainable materials made of 100% carbon-negative recycled materials. 

Roles

UX Designer 

Interaction Designer

Webflow Wizard

Programs Used 

Google Analytics 

Adobe Suite

Figma

Webflow

Timeline

6 Weeks

Design Process

(1) Research

(2) Structure

(3) Design 

(4) Iterate

- Analyzed Previous Website
- Interviews Findings
- Competitive Analysis

- Product Roadmap 
- Task & User Flows 
- First Iteration Wireframes

- Brand Logo Ideation
- UI (User Interface) Kit
- Responsive UI

- Prototyping/ Web Development
- Usability Tests
- Next Steps/Launch

 

Research

  1. Find out ReBlocks' overall process of recycling, producing, and selling their product.

  2. Identify features and functions that enable users to understand ReBlocks Vision.

  3. Define who are the main & alternative competitors, and what they are doing

  4. Find ways to enable ReBlocks to captivate new consumers.

 

Before 

What are we work with?

My first step to understanding the client's vision was to check out their existing website. How is their information architecture, how is the information displayed to allow the user to understand who ReBlocks is? Who is Reblocks? What do they do? Why do they do?

Interviews Findings

Very Broad Target Market

Industry hasn’t taken off yet

  • Didn't have a set target market, because no one knew who they were

  • How might we reach out to a broader sector, and educate more people about ReBlocks product?

  • There is no trust. Not a lot of research.

  • How might we build trust with our consumers?

Entrapment of Dangerous Chemicals

Time to Product

  • We need to make sure that material is safe enough for human use

  • How might we show that their product helps the environment?

  • For larger orders, how fast can we fulfill? How long does it take?

  • How will Reblocks scale up and will they be ready?

Competitors Analysis

Direct/Indirect Competitors

ReBlocks is trying to change how people view recycling plastic to better building solutions. Though, they are trying to find their ethos in an established market. Therefore, I divided their competitors into (Direct & Indirect). The direct competitor is The Hemp Plastic Company, another Colorado-based sustainable building materials company. Reblocks being new has allowed them to gain interest from many investors but didn't have a general direction. When I start a project, I set goals because it helps me and the clients fall back onto what we need to accomplish.

DIRECT

(Sustainable Materials)

INDIRECT

The Hemp Plastic Company

Tuff Shed

Simple Homes

Strengths

Strengths

Strengths

  • Mission Statement is clear

  • Provide a lot of information regarding Hemp plastics

  • Modular display separates content nicely

  • Built to last

  • Looks very nice

  • Has Customizer lets the consumer see real-time how their shed looks

  • Landing Page is clear

  • Mission Statement is concise

  • Use dominance to drive in the point

  • Elaborates on the process of making a home

Weaknesses

  • Too much information (overwhelming amount)

  • The color scheme is off

Weaknesses

Weaknesses

  • Landing Page is confusing

  • Font sizes are very small

  • Doesn't mention build time or the sort of materials they used

  • The color scheme makes font hard to read

  • Doesn’t say what materials or chemicals they use

Thought Process:

We focused on creating quick and easy buildings like sheds, wall systems, and dog houses because we wanted to start on smaller proof of concept tests to see how the product functions and sort out the bugs at a smaller scale then scale it up.

 

That is why we looked at Tuff sheds and Simple homes; both are pre-fabricated construction market. They were more indirect because they focused more on pre-fab construction, but it was important to understand how they were being made.

 

Structure

  1. Product Roadmap

  2. Task & User Flows 

  3. First Iteration Wireframes

Product Roadmap (Feature Prioritization)

In the beginning, it was very frustrating because the client didn't know what his target market was. After conducting interviews and market research, the brand strategist, client, and I came up with different features that they would like to have. We decided the main focus was to educate the user because no know knew who they were. Furthermore, we wanted to build trust and brand awareness. 

Product Roadmap

User Flow

  • Combined the Task flow with the user flow

    • Task Flow path descends, and when it says no, it moves out​

    • If Yes, then it continues to the next task flow stack 

  • I chose to do it this way so I could see the entire thought processes of the user​

    • It allowed me to keep everything in one area​

User Flow

Mid Fidelity Wireframes

When ideating, I always have the goals and product requirements alongside me to refer to. I start sketching mid-fidelity wireframes because I can start seeing how the colors interact with certain images. My brain works like a typewriter, setting 4-5 artboards then sketching ideas along that plane. Then I'll push back the carriage return, and start the next section. It helps with keeps my wireframes consistent,

 

* The client wanted a one-page website where the user can go through their story. Shown here are my iterations. Every time I have a new idea, I duplicate the frame and try something new.

Mid-Fidelity Wireframes

How might we grab the users attention?

What's ReBlocks Mission?

Using a Wireframing Kit to figure out how to organizing site information.

The simpler the better allows user to not be overwhelmed with information

Looking for different layout possiblities

Organizing and re-organizing sections to find the right flow of information

Starting to putting all the section together to see how it flows

 

Design

  1. Brand Logo Ideation

  2. UI (User Interface) Kits 

  3. Responsive UI

Brand Logos

Having a good logo that represents the brand helps with brand recognition, but to me, it helps me remember the why in design. What am I going to do? How will I do it? Why did I do it?  After perusing Pinterest, a logo caught my eye where the RE was larger than the other four words.

 

ReBlocks' foundation is all about recycling the different types of plastics, so how might we make a logo that embodies that idea while being easy enough for the user to recognize who and what they do? We decided to implement RE that into (CYCLE, BUILD, USE, BLOCK), showing the overall process of ReBlocks.

UI (User Interface) Kit

When creating the UI Kit, we went for greens and oranges because green is associated with growth and orange is associated with empowerment. We wanted the user to feel that they can make a difference.

 

Our thought process behind having a cleaner UI was that we wanted to make the users have an easier time navigating through the website.

User Interface Kit

Responsive UI | Before Web Development

Upon presenting the client's responsive website design, they enjoyed how it displayed all aspects of ReBlocks mission/vision, and we're eager to have it made.

 

*At this point, I remember being worried about making the website because I never did web development, but it was a great skill to learn. Figma (design software) helped tremendously with how I was to structure the information onto mobile.

Responsive UI

Click to Enlarge

 

Iterate

  1. Prototyping/ Web Development

  2. Usability Tests

  3. Next Steps

Prototyping/ Web Development 

I used Webflow to code Reblock's website because why stop at the final prototype when I could develop it. 

There were obstacles but once I understood the flow it became easier to grasp. I used pre-made templates because they were already responsive, which saved me a lot of time.

Usability Tests Findings

1. Users found the Opportunities Section needed more videos to show the process

2. Most users wanted to see Profile Pictures in About Us Section

3. Users though that website didn't give enough information in the process

Final Product

Check out the Difference!!!

 
VP header.jpg

Voth Productions | Web Design & Development

woman-holding-iphone-xs-mockup-perspecti

Let's Hang | End to End Mobile App

front-view-mockup-of-macbook-pro-with-a-

Mirror | E-Commerce Website

as.jpg

TechnoHUNT | Web Design & CMS

black-mockup – 45.png

Onewheel | Security Features Add-on