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 to balance the business’s needs with the user experience, ensuring the site felt both functional and aligned with their identity.
The existing Little Green website was outdated, cluttered, and not optimized for mobile devices, making it difficult for users to navigate and explore the business’s offerings. Customers struggled to find information about products and services, and the site didn’t translate the in-store customer experience. My task was to redesign the website to improve navigation, provide a smooth user experience, and better represent the business as a space for people to gather, connect, and enjoy a cup of coffee.
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 visual appeal?
3) What features or functionalities are missing or lacking?
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
Navigation Challenges: Users had difficulty finding key services and product categories.
Mobile Experience: Many users were browsing on mobile devices, and the current site wasn’t responsive.
Brand Alignment: The website didn’t fully capture the eclectic, welcoming vibe that defined Little Green’s brand.
By mapping these themes, I concluded that reducing scrolling, fixing spacing, and providing clear, up-to-date information will improve the user experience. Maintaining strong visuals and highlighting classes and events will keep users engaged and satisfied.
A customer journey map shows the steps a user takes from starting on the site to achieving their goal, like signing up for a class.
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.
After synthesizing my findings and creating user personas, I brainstormed different elements for the new Little Green website and began structuring the layout.
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
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.
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.
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.
.png)
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!
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.
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.
If I had more time to expand on this project, I would have sent out a survey during the user research process to get some more quantitative data. I would have also gotten more photographs showcasing the shop’s interior.
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.
