ROLE

UX Designer, UI Designer, Researcher

TIME

October 2023

PLATFORM

Responsive (Desktop, Tablet, Mobile)

TOOLS

Figma, Procreate
A responsive web design for a plant and coffee shop

As someone who spends a lot of time on the computer, I'm always on the lookout for new coffee shops to work from. Recently, I came across Eden Plant Co on Instagram. The shop's atmosphere caught my eye, with plants surrounding the space and creating an amazing ambiance. However, I couldn't find any information about the shop's offerings on their website. Despite this, I decided to give it a go and visit the shop anyway.

When I was at the store, I started thinking about how they could be missing out on potential growth. Personally, I always check Yelp or Google to get an idea of what a new restaurant or coffee shop has to offer before actually visiting. I was curious to know if other people do the same.

I found out from a survey of MGH that:

Nearly 80% (77%) of those surveyed said they are likely to visit a restaurant's website before they dine in or order takeout or delivery.

Of that group, the survey found that nearly 70% (68%) have been discouraged from visiting a restaurant because of its website.

Also according to Yelp:

45% of customers are likely to check Yelp reviews before visiting a business, and over 70% of people will look-up and confirm a business’s contact info, location, and hour of operation before visiting.

What opportunities for business growth could Eden Plant Co be missing out on without a website?

About Eden Plant Co.

Eden Plant Co. is a unique plant store and coffee shop located just off downtown Houston. With a strong focus on providing an environment of peace and rest, the owner, Irving Chavez, started the business by selling plants from his family's backyard. The micro shop has gained popularity since its opening in November 2021.  Currently, Eden Plant Co maintains its online presence solely through Facebook, Instagram, and Yelp.

What makes people feel intrigued to visit a business?

While I think Eden Plant Co. has succeeded in creating an inviting physical environment, they are missing out on the opportunity to fully capture the essence of the store’s atmosphere and offerings online.  There is an opportunity to leverage the website as a tool for enhancing brand perception, attracting more customers, and potentially increasing sales by increasing foot traffic to the business.

Since Eden Plant Co. is a plant shop that also sells coffee, how can I distinguish Eden Plant Co. from other competitors? I went on the internet and found some plants and coffee shops to find out what they have to offer.

I always keep the user and business goals in mind while making design decisions. By aligning the user goals with our business goals such as building community, driving foot traffic, and fostering brand loyalty, I can create an experience that is fulfilling for customers and helps the business succeed.

I interviewed 3 of my friends who are plants and coffee lovers to find out how they like to buy their plants and coffee. I also wanted to understand the factors that influence their decisions to visit the business and make a purchase, and learn how online presence can impact the visibility and reach of the business.

which formed some key insights:

Building and maintaining an online presence is essential for attracting customers, as demonstrated by the preference for businesses with enticing websites and active social media presence.

The in-person experience, including ambiance, and quality of products are crucial factors that influence customers’ decision to visit the business and make a purchase

A strong online presence, including well-maintained websites, enticing photos, and positive reviews, influences their decisions to visit businesses in person.

Quality is a primary factor for all three when choosing where to make a purchase, whether it's coffee or plants, thus providing a reliable way for customers to assess quality online, such as through detailed photos and descriptions could be useful.

Meet Caitlyn, who’s always trying to brighten up her place with some plants and constantly finding a new coffee spot to switch up her work from home settings. Caitlyn will help me keep the needs and challenges in mind as I go forward and help me make good design decisions.

Figuring out how to build the solution

Since Eden Plant Co. is not planning to expand their business to have an online shopping option, I brainstormed an option that could ensure quality assurance as expressed by our user interview participants,  as well as increase foot traffic to the store.

The solution could potentially be a plant catalog that customers can browse through. This plant catalog includes all the plants that are available for purchase at the store with real pictures and some useful information such as care directions and price points. This could potentially help people who just recently started their plant journey like Caitlyn to feel less overwhelmed, and more intrigued to actually visit the store to purchase the plant. Even better, once they visit the store, they will get to enjoy the coffee while they are it!

I began sketching the layout of the website on desktop first to bring my ideas closer to life.

I had the same ideas on what to include on the homepage, but the layout for each is slightly different. Since Eden Plant Co. focuses on fostering a sense of community and bring everyone together once in a while, they often host events such as concerts, flea markets and church services, and I should somehow showcase that on the homepage (as shown on Homepage #2) to furthermore intrigue customers to visit the physical store, hence increasing foot traffic.

The plant catalog will be nice in providing simple plant information and care directions for customers to quickly browse through and see what’s available for purchase at the store while also being able to assess the plant’s health through a real image of the plant. Coffee menu is simple and straightforward.

On the About page, it’s important to show how great and credible the products are through other customers’ testimonies. The Contact Page should include business information and a contact form for convenience.

I took my sketches and bring them into Figma, while also refining some design decisions and adding some features to the sketches that I came up with. Since this is a responsive web design, I always kept in mind how the layouts should look like on tablet and mobile devices as well.

The navigation bar has now become a hamburger menu but still contains all the navigation options.

Due to limited space on tablet and mobile devices, information is often arranged in a vertical stack rather than horizontally. To maintain consistency throughout the design, I have adhered to this important guideline. The above images showcase key screens and provide examples of how content will be arranged on tablet and mobile devices in comparison to desktop.

Let’s kick it up to high fidelity

Since Eden Plant Co. has already done a great job in establishing their brand values, personality and aesthetics, it was helpful for me to create a visual board that I can closely follow and match my designs to achieve consistency.

Colors

The primary color is the color of their logo. For the secondary color, I used the color of the background of their old logo. The primary color of green resembles the plants, whereas the secondary color when made darker, turns into a stunning shade of brown, which resembles the coffee.

Typography

Fraunces is a stunning and versatile serif font with unique curves and refined details, mirroring the natural beauty of plants. When paired with Plus Jakarta Sans, a modern and clean sans-serif font that offers excellent readability, they create a nice balance between tradition and modernity, reflecting the dual nature of the shop’s plants and coffee offerings.

Hierarchy is achieved through different font sizes. weight and heights.

How will users behave?

Once the high-fidelity prototype was ready to be tested, I conducted 10 moderated usability tests to find out how difficult and easy the website is to navigate. Users were asked to find the store’s business information, plant catalogs and coffee menu.

After the test, I synthesized key points and here are the results:

4 out of 10 participants expressed a strong desire for more in-depth information about each plant, including detailed care instructions, and growth patterns.

7 out of 10 participants liked that they could filter the plants based on size, making it easier for them to look for the plant that they are looking for.

10 out of 10 participants appreciated the clarity of the homepage, stating that it effectively communicated the dual offerings of plants and coffee and effectively communicated the brand’s image.

8 out of 10 participants chose to click the Contact option on the navigation bar menu when  prompted to look for the store’s information, while the rest said they expected to find the information on the homepage (which they were able to)

Changes I have made

As mentioned in our user interviews, the importance of having knowledgeable and friendly staff is really important. By providing customer with more in-depth plant information, they will feel less intimidated and more confident when the time has come for them to purchase the plant in person.

The Final Prototype

This is the final prototype for Eden Plant Co. after iterations and feedback. With intuitive navigation, and visually appealing aesthetics, this is the digital experience that Eden Plant Co. needs that mirrors the charm and warmth of the physical space.

Desktop

Tablet

Mobile

Key Takeaways

Design responsively

I learned that designing responsively is not just about making sure the website looks good on different devices; it's also about creating an inclusive and seamless experience for all of our visitors, regardless of how they access the site.  Responsive design is so important – it's a fundamental aspect of accessibility and user satisfaction.

components = life saver

Components in Figma are a game-changer. They save me so much time when designing responsively. This not only speeds up the design process but also it also helps ensure visual consistency throughout the entire project. I honestly don't know what I would do without components.