Loop redesign
A platform by TerraCycle that delivers products in reusable packaging.
Colors
Fonts
Components
AI✨
Spacing
Accessibility evaluation
Heuristics evaluation
Lo-Fi Design
Hi-Fi
Project Description
The main goal is to create a sleek, modern web presence and clearly communicate the company’s mission by redesigning the Hero Home section in high fidelity, with the rest presented as wireframes.
Visit Loop: https://exploreloop.com
Accessibility check
One of the first steps was ensuring that the main accent colors met WCAG AA contrast standards. Most accents were adjusted for improved contrast, and in some cases a different hue was selected to meet the requirements.
Colors
#1577EA
Main Accent
#7EB738
Secondary
#22282A
Main Text
#62707F
Secondary
#FFFFFF
Backgrounds
Font definitions
Plus Jakarta Sans
Aa
Primary
Regular
Plus Jakarta Sans
Aa
Actions
Bold
Gilroy
Aa
Headings
Bold
Heading
72, Bold
Medium secondary text
14, Regular
Large Text
20, Semibold
Small text
12, Regular
Medium Text
16, Semibold
Navigation labels
10, SemiBold
Primary button & assets
Standard
Discover loop
Hover
Discover loop
EN
Join us!
✨ AI Image composition
To create the final image, I started with a green, illuminated forest and bottle-cap references, generated the initial composition with Firefly AI, then refined it in Photoshop, finalizing the composition, adding brand logos to the bottle-shaped buildings, and applying visual tweaks for a polished, sustainable-futuristic look.
High-fidelity hero section
The problem
1- The visual priority of both CTAs is inconsistent.
2- ‘Join Us’ placement, better suited in a separate component.
3- Crowded navigation, there are too many items, hard to scan.
4- The copy doesn’t clearly communicate the company’s message and lacks impact, leaving users without a strong understanding.
5- The visual feels disconnected from the brand’s purpose and mission.
6- The logos overpower key messaging.
The solution
1- Catchy, concise copy that clearly conveys the brand’s purpose with deeper product engagement, and a CTA style that reflects the product.
2- Visual with a deeper look into the brand's future goals, a green world with reusable products.
3- menu with clearer, broader actions to improve scannability.
4- Moved ‘Join Us’ to a dedicated component with contextual invitation.
5- Standardized visual weight to guide users to the primary action.
6- Reduced prominence, showcasing only the most relevant brands subtly.
A breakdown of the UX decisions in low fidelity.
Our Statement
Defining the mission introduces and engages users by clearly explaining the company’s purpose and offerings, while keeping this section visually light.
What we do?
Briefly explain how the brand delivers on its value proposition, its system, partnerships mission, and the impact of its sustainability efforts.
How we do it
Explain why users should choose Loop by highlighting what sets it apart in the market and showcasing added-value keywords that tell the story of how its processes are executed.
How we do it (New section)
Showcase client successes to build credibility and highlight the company’s impact on their business.
Be part of Loop
Show how Loop benefits its users and guide them to download the app.
