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.
- 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
Find out ReBlocks' overall process of recycling, producing, and selling their product.
Identify features and functions that enable users to understand ReBlocks Vision.
Define who are the main & alternative competitors, and what they are doing
Find ways to enable ReBlocks to captivate new consumers.
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?
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?
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.
The Hemp Plastic Company
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
Too much information (overwhelming amount)
The color scheme is off
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
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.
Task & User Flows
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.
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
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.
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
Brand Logo Ideation
UI (User Interface) Kits
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.
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.
Click to Enlarge
Prototyping/ Web Development
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