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.
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​
-
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.
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.
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.
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