Green Side
Roles
Research, Wireframing, UI/UX Design, User Testing, Prototyping, Branding
Team
Solo
Timeline
September - November 2024
Tools
Figma, Adobe Illustrator
Product Overview
Green Side is a mobile platform that helps users find nearby farmers’ markets. Users can browse through available products from local markets and place orders with the option for convenient pickup or delivery to their homes. Users can also discover fresh and local foods that meet their budgets while becoming educated on seasonal produce.Context
I was tasked to design and develop a digital product and its branding for a startup company that addresses existing challenges or opportunities in any sector of my choice.Project Brief
Through research, I recognized that consumers face various barriers to shopping for local foods from farmers’ markets, leading me to define the problem I aimed to solve.The Problem
Process
Before I began the design process, I performed competitive analyses to examine existing platforms and features within the same sector. Platforms like GrownBy and Mama Earth let users order from local markets but lacked pickup and delivery flexibility. Some platforms also lacked filters, making it harder to find deals and browse products.Competitive Analysis
I designed the platform around key navigation sections: the homepage leads to 'Find' for nearby markets, 'Shop' for local groceries, 'Learn' for educational content, and 'Profile' for orders and favorites. This structure ensures convenience, discovery, and a personalized experience.Information Architecture
I created mid-fidelity wireframes for my initial exploration of layout and hierarchy, focusing on user experience over visuals. After conducting user tests, I designed iterations for the screens based on feedback before achieving the final designs.Wireframes
Solution
I developed a realistic digital product that encourages healthier, eco-friendly lifestyles by simplifying the process of shopping for fresh and local foods. Not only can users order groceries from local farmers' markets, but they can find the best deals and learn about seasonal produce. I prioritized simplicity and transparency to ensure a seamless, informative experience that supports local businesses.The Approach
Green Side makes fresh and local produce easy to find and even easier to enjoy by connecting users with top rated markets nearby. Users can navigate under 'Find' to view locations of nearby markets and get directions. Filtering options are available to help users find markets based on rating, operating hours, and product availability.
Finding Markets
Whether you are meal prepping or looking to make healthier choices, Green Side makes it simple to browse and order fresh produce right at your fingertips. Users can navigate under ‘Shop’ to browse through the vibrant and seasonal produce of local markets all within their budget with featured deals and price filters.
Shopping for Food
Green Side keeps users in the know about what’s in season to ensure enjoyment of the freshest foods available through the 'Learn' section, featuring a produce guide, farmer stories, and seasonal recipes. The 'Profile' section is where users can track current orders, browse order history, and quickly access their saved markets and products.
Educational & Personalized Experiences
Visual Identity
Green Side’s primary logo presents a set of geometric fruits and vegetables composed of circles, ovals, and semi-circles. These shapes are used interchangeably to form different simplified, yet recognizable, fruits and vegetables, establishing a modular and dynamic visual identity. The green triangles in the top left corner form an arrow that points towards the cluster of fruits and vegetables, implying how the platform allows users to shift their eating habits to the ‘green side.’Logo
Green Side’s colour palette reflects the platform’s inviting nature through its vibrant hues, carefully selected to ensure strong colour contrast for accessibility. Green was selected as the primary brand colour to symbolize a commitment to sustainability. I selected minimalist and geometric typefaces for the display and body text which are legible at large and small sizes. Together, the brand colours and typography create a visually engaging platform.Colours and Typography
Web Format
I optimized screen layouts for larger screens, keeping content organized and consistent with the mobile designs. I also ensured uniform spacing and typography for a seamless transition between devices.
I used responsive components to adapt mobile screens for desktop, ensuring a flexible design across screen sizes. To create responsive components I mastered Figma's auto layout feature. This was a powerful tool that allowed me to dynamically adjust spacing, size and alignment across various instances for a streamlined design process.
Design System
Scroll through the slide deck to view the product's design principles and guidelines, covering it's visual brand identity, typography, colours, iconography, components, and layout.
Key Takeaways
Completing this project emphasized the importance of a thorough design process, ranging from competitive analysis and mid-fidelity wireframes to user testing and final screen designs to reach a simple, user-friendly solution.Design Process
Learning how to create responsive components using Figma’s auto layout feature was a valuable skill that will be useful for future projects to streamline the design process and ensure flexibility.Responsive Design
