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

 Reblocking their process 

(1) Research

(2) Restructure

(3) Redesign 

(4) Reiterate

- 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

 
 

 What are we working 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 it? 

After interviewing SMEs, KPIs, and users, we found:

 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 Produce 

  • 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?

Thinking outside  Reblock 

Direct/Indirect Competitors

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
     

Th🧠ught 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 markets. They were more indirect because they focused more on pre-fab construction, but it was important to understand how they were being made.

 

Setting the foundation

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

Looking at the bigger picture.

  • 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

Rapid Prototyping

When ideating, it's critical to have the goals and product requirements alongside so the team can refer to them. 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

 

Reviving their logo

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 their mission 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.

Logo Development

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
 

Work in
Progress
🚧

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.

Test Results

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