Plant Stand Collective Site Concept
Role // UX Designer | Client // Educational | Subject // Plant Stand Collective | Designed in // Figma
Plant Stand Collective is a plant store located between the Diversey and Belmont brown line stations in the north side of Chicago, which has a unique emphasis on artist collectives and helping those in need. They host 28 artist vendors at a time to help them sell their goods, & donate proceeds from their plant of the week each week to Feeding People Through Plants, an organization that works with the Chicago Food Depository.
Though they have a strong customer base and online presence despite only being open for just over two years, Plant Stand Collective does not have a website. Using the content on their Facebook and Instagram pages, my knowledge of the store as a customer myself, and conventions for e-commerce, I created Plant Stand Collective a concept site that would allow users to book workshops, buy plants for pickup, and get help with caring for their plants after purchase.
The Problem
At the time of this project, Plant Stand Collective had no website, and operated solely off of Facebook and Instagram pages. The lack of a central hub to house all of their information was problematic for a few reasons - they are missing out on the online market, it was hard for customers to find information about the store or plants (especially after purchase), and the lack of a site may have made the company seem less reputable. The main design challenge is designing a site that effectively captured the feel of the store and their existing online presence while sorting through all of their information in a clear and cohesive manner.
Stylistic Research
Because there was no central hub of information for Plant Stand Collective, research was needed to find the common design and branding elements to create a cohesive brand for the site. An analysis of the social pages and online reviews for the store, as well as site visits, found that it was important to focus on a bohemian, soft, and natural color scheme with artistic fonts and a clean and minimalist layout.
Additionally, I had to determine what content categories were needed based on the information they were sharing with users, and what was lacking. After conducting a social media analysis, I determined that the following categories were key:
Shopping - Plants: Browse plants available in the store, see care info, and place plant orders for pickup
Shopping - Plant Accessories: Browse available plant accessories and artist designs and place orders for pickup
Plant of the Week: Some feature of the plant of the week that charitable donations go to, which ended up being through a colored banner on the image on the shopping page and its feature page, as well as the plant of the week being the first result on the plant page to highlight it
Upcoming Workshops: A site for customers to view upcoming artists workshops as well as to book a spot at the workshop
Care & FAQs: A page for customers to view detailed care instructions for a plant by searching its name. In a further project, this would also include some sort of chat feature or form to ask specific questions to the store owners
For visual branding, the fonts Quincy CF and Basic Sans were chosen to keep the artistic yet sleek feel. A color palette was chosen with two green shades, a pink, a natural off-white and solid black to optimize the style and color contrast available on the site.
Project Scope
The redesign process lasted ten weeks from conception to final prototype, which is interactive and was created in Adobe XD. This project was conducted as an exercise to improve my branding, prototyping, and XD skills, and was done independently without Plant Stand Collective as a client, and therefore did not have any client requests or constraints based on budget or planned rollout.
In order to satisfy the requirements of the design project, the final prototype had to include interaction, animation, multiple processes and user-friendly interactivity between screens.
Design Process
Stage One: Research
The first stage of the process was to conduct research on PSC and what their brand entailed, determining their core values and what would matter most to them in a site design. After discovering their core values of sustainability, supporting the community, and giving back to others, I was able to create an effective brand for the company and visual design elements that supported the ambience of the store.
Stage Two: Site Map
From there, it was key to create an effective site map with the most important information that PSC was discussing on their socials. I decided on the categories of Shopping (with sub-pages for Plants and Plant Accessories), Workshops, an About page, and a Plant Care/FAQs page. All of the pages are accessible from the home page, save for the two sub-pages of the shopping page.
Please click the above site map to view it in a full-screen format.
Stage Three: Wireframing
Afterwards, I quickly wireframed and created a high-fidelity prototype version of the site, utilizing other online plant retailers and e-commerce sites with similar values and style as inspiration along the way. Incorporating clean lines and fonts with pops of color that added to the visual experience while keeping the images of the plants as the focal point, the prototype came together in a user-friendly and visually effective way.
Please click the above image to view it in a full-screen format.
Outcomes & Results
The final site was as I hoped - clean, minimalist, and natural, and showcased the positive and creative energy that the storefront and social media presence exuded. The interactive prototype, which underwent small accessibility changes after some quick user testing, can be explored by clicking the button below.
Reflections & Thoughts
Working on the Plant Stand Collective Site Design greatly improved my skills with branding and brand analysis. Many of my previous site designs were based off of an existing concept, and creating the site from scratch introduced me to new challenges and new opportunities to learn.
Additionally, I had never worked creating an e-commerce site at this scale before, which posed additional opportunities and challenges in content organization to prevent content overload. Breaking the shopping into different categories was helpful, but creating effective filtering criteria was key to a user-friendly design as well.
This project also promoted my understanding of component states and their capabilities within Adobe XD. While primarily used for hover states in this project, understanding these components will create opportunities for me to prototype more user-friendly, complex designs in the future.