Header preview of Little Green site redesign, showing desktop & mobile final screens
For this project, I worked with Little Green A Plant Bar, a local business that serves as an eclectic community space offering plants and coffee. The goal was to redesign their website to create a more user-friendly, visually appealing, and responsive experience that captured the brand’s laid-back and inviting vibe.
The challenge was with Little Green's original website— it was outdated, cluttered, and not optimized for mobile devices. Customers struggled to find clear information about products, services and events; the site did not reflect the inviting in-store experience. My task was to redesign the site to improve navigation, provide a smooth user experience, and better represent the business as a place for people to connect, relax, and enjoy a cup of coffee.
Animated examples of the screens, walking through the prototype
I conducted user interviews with Little Green’s customers to identify pain points in their current online experience. The insights I gathered were key to shaping the new design:
1) What are their pain points?
2) How do they feel about the site's current visual appeal?
3) What features or functionalities are missing or lacking?
Organized categories showing common themes among participants' initial impressions of site, and suggestions for improvements
Categories/themes I found included their “likes”, “dislikes”, “wants”, and “suggestions.”
The main user dislikes I observed were:
- Too much scrolling
- Spacing inconsistencies
- Outdated information
- Lack of clarity with information
While the main user likes I observed were:
- Visuals
- Photography
- Colors
- Classes and events
insert here about using this data and going into customer journey map
Header preview of YouTube Wrapped project, showing 3 of the final screens
Current pain points for Little Green’s class sign up journey include the lack of a newsletter, which means users miss updates and event announcements. Without notifications, they’re unaware of new or upcoming events. The absence of an events calendar makes it hard to view and plan for all upcoming events. Users also cannot add class dates to their personal calendars, complicating schedule management.
The main priorities will be strengthening and maintaining their brand identity through the site's color palette, along with using high quality photos of the space and the products they have to offer. More simplicity and organization with the layout will help with readability and clarity.
This research highlighted that users prioritize clear information over visuals. While they value good design, they emphasize the importance of having clear, easily accessible information.
Based on this, I am focused on creating a website for Little Green that ensures clarity and simplicity in delivering content, while still maintaining a strong brand identity.
Features of Little Green:
- Events calendar
- Highlighted upcoming events
- FAQ
- Submission form for rental inquiries
- Clear contact information
- Sign up for monthly newsletter
- Instagram integration for updates
Now it was finally time to start designing! With input from the owners of the store, I began with brainstorming a few different brand values for Little Green, which were: community, unique, and quality.
From these brand values and the aesthetics of their in-store decor, I assembled my mood board. I was drawn to dark and warm natural colors and themes, like pine green and wood. Their ambience feels eclectic, vintage, and inviting.
Header preview of YouTube Wrapped project, showing 3 of the final screens
I took the inspiration from my mood board and their logo and began creating the elements for my style tile: Little Green’s color palette, fonts, buttons and components.
For my color palette, I decided on incorporating different shades of green with a pop of yellow gold, reminiscent of their logo (also ensuring it’s AAA-approved for accessibility).
My main task was to make the stye tile feel cohesive with their already established brand identity. I used a serif font for headers, and incorporated the logo’s plant outline design as a motif throughout the design.
Header preview of YouTube Wrapped project, showing 3 of the final screens
I sketched out my initial low fidelity key screens before digitizing them. I was inspired by similar businesses’ websites, and how they organized and prioritized what to advertise to their customers. With feedback from my mentor, I narrowed down my ideas and moved forward in creating more specific mid-fidelity wireframes.
As I created the mid-fidelity wireframes, I referenced both my site map and user flows in ensure a logical flow to the website. I initially kept the class sign up process on the website, but discovered it would logistically be too complicated for the proposed new website host (Framer).
Instead, it would be much simpler to transfer the class sign ups to a third-party hosting site called Eventbrite. Eventbrite allows for notifications and personal calendar integration, along with being another avenue to garner new customers.
-add screen showing checkout process changed
-add screen showing iteration of drop down menus
Header preview of YouTube Wrapped project, showing 3 of the final screens
.png)
Header preview of YouTube Wrapped project, showing 3 of the final screens
I referenced my mid-fidelity wireframes and style tile to start building my high fidelity wireframes. I focused on creating the key screens of: homepage, about us/contact info, rental space, upcoming events, plant bar, coffee menu and artisan gifts. Once the wireframes were complete, I linked the screens together to create the prototype.
I interviewed 5 users for my usability testing, along with receiving additional comments from my mentor. The overall consensus was the color scheme is visually appealing and the website has a friendly vibe. The users liked the event calendar and the layout of the classes/events.
I got an incredible amount of helpful and insightful feedback from this process. I specifically received thoughtful advice about making the homepage clearly define what Little Green is as a brand and what it offers, simplifying the navigation bar, having more spacing consistency, and creating more visual hierarchy with the rental booking options. Utilizing this feedback, I updated and finalized my high fidelity prototypes -- previewed below!
After having a follow-up discussion with the client, I decided to add 1) banner for purchasing gift cards and 2) a separate section detailing their live music events. You can visit the Framer website prototype here.
Header preview of YouTube Wrapped project, showing 3 of the final screens
Header preview of YouTube Wrapped project, showing 3 of the final screens
Header preview of YouTube Wrapped project, showing 3 of the final screens
I am incredibly grateful for the amount of feedback and advice I’ve received throughout this journey. It was very exciting and insightful to work on my first client project and turn it into an actual working website!
I’m proud of learning how to make my design responsive, and most importantly gaining real client experience. Going through this process emphasized how important functionality and simplicity is for a website, especially when you’re trying to sell something to the users.
I was already familiar with the brand, which helped me have clarity on the design and purpose of the site. I struggled with creating a responsive events calendar, but I was able to solve this by switching to Google Calendar. It was a process to figure out how to transfer my designs from Figma to Framer, and logistically figure out things like newsletter sign ups, event sign ups, the booking inquiry form, etc. The next steps for this project would be looking into and considering more of the business and financial goals, i.e., exploring more avenues for revenue, marketing strategies, potential partners and sponsorships.
