A responsive website to expand Rooted app’s reach and provide a smooth, accessible experience across devices.
A responsive website to expand Rooted app’s reach and provide a smooth, accessible experience across devices.
Embedded Files
The product:
Rooted is a plant care platform that helps users confidently care for their plants through personalized schedules, symptom diagnosis, and a supportive community.
After designing the mobile app, I created a responsive website (landing page) to expand Rooted’s reach and provide a smooth, accessible experience across devices.
Project duration:
Oct 2025
Project Overview
The problem:
Many plant lovers struggle to find trustworthy, accessible guidance that adapts to their needs.
Rooted’s website needed to:
Introduce the app’s mission and core features clearly
Make accessibility resources visible at all times
Build curiosity and confidence so users feel motivated to try the app
The goal:
Ensure accessibility and inclusivity across all screen sizes.
Maintain visual consistency with the app’s calm, natural tone.
Highlight Rooted’s key value - simple plant care guidance for everyone.
Drive app downloads through clear and engaging CTAs
My role:
UX/UI Designer (research, wireframing, prototyping, visual design)
Responsibilities:
Conducted user research to understand the needs and challenges of plant owners.
Created wireframes to outline the website’s layout and functionality.
Designed high-fidelity prototypes to visualize the user interface and experience.
Conducted usability testing to gather feedback and refine the design based on user insights.
Developed content for the website, focusing on clear and engaging plant care information.
Understanding the User
Summary:
I revisited insights from my mobile app usability study and spoke with a few participants to understand what would encourage them to visit the website first.
Personas such as Ava and Mia (the accessibility-focused user) helped guide content and layout choices. From there, I learned the website should feel trustworthy, easy to navigate, and inclusive.
Starting the design
Sitemap
Structure used: Hierarchical
Home (overview, features, CTA)
About Rooted (mission, accessibility promise)
Care Guides (educational content preview)
Community (user stories and forum preview)
Accessibility Mode (persistent toggle)
Download App CTA (anchor button on every page)
Wireframes
Sketched multiple homepage layouts focusing on:
Hierarchy of app intro, CTA, and accessibility resources
Keeping key features above the fold
Using generous whitespace and calm flow
After reviewing 4 versions, I combined the strongest ideas into one balanced homepage structure
Digital Wireframes
Transitioned to digital wireframes in Figma for desktop and mobile.
At this stage, I focused on responsive layout consistency: ensuring readability, smooth flow, and accessible touch targets.
Digital wireframe screen size variation(s)
Low-fidelity Prototype
Mockups
The Rooted website was designed to remain visually consistent and accessible across all devices. The layout adapts smoothly to maintain readability, clear hierarchy, and easy navigation whether viewed on desktop, tablet, or mobile.
Key adaptations:
Simplified the navigation bar into a hamburger menu on smaller screens.
Maintained visibility of the accessibility toggle across all sizes.
Adjusted spacing, image scaling, and font sizes for better legibility.
Reordered content sections for smoother vertical scrolling on mobile.
Link for the desktop screen mockup
High-fidelity prototype
The design aims to provide a smooth and engaging experience for plant owners while clearly communicating Rooted’s purpose.
Prototype highlights:
Clear homepage layout introducing Rooted’s value and app download link.
Persistent accessibility toggle available.
Consistent typography, iconography, and calming color palette for better readability.
Link for mobile prototype view
Accessibility considerations
High Contrast Mode toggle ensures visibility for users with low vision
Clear navigation and readable typography support ease of use across devices
Text adjusts fluidly to different screen sizes
Takeaways
Impact:
The final design improved both usability and accessibility across all screen sizes, creating a more intuitive and inclusive experience for plant enthusiasts. It also helped strengthen the connection between the app and website by maintaining a consistent and recognisable visual identity throughout the product.
What I learned:
I learned how important it is to plan for responsiveness and accessibility early in the design process. Even small adjustments, like improving contrast or keeping navigation consistent, can significantly enhance the user experience. This project also taught me the value of balancing simplicity with functionality to create a calm and engaging interface.
Page updated
Google Sites
Report abuse