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.
Reblocking their process
- 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
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 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
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.
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.
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