Botani

Mobile Design, Personal Project

Role: UX/UI Design

Summary

Project Overview

As a personal project, I designed an innovative mobile e-commerce platform inspired by a prompt from my Google UX Design Certificate program. My goal was to create a catalog that entices users to shop for flowers online.

Key Responsibilities

- Conceptualized and designed a mobile e-commerce platform tailored to provide users with a refined shopping experience for unique flower arrangements.
- Identified user needs and preferences to inform the platform's design and functionality.
- Implemented intuitive navigation and user-friendly features to enhance the overall shopping experience.

Results

- Developed a mobile e-commerce platform that enables seamless browsing and shopping for unique flower arrangements.
- Designed a refined shopping experience aimed at driving user engagement and encouraging online purchases.
- Received positive feedback on the design concept, indicating its potential effectiveness in achieving its objective.

Homepage

Explore the various features of Botani through the homepage.

Poll

Created for users who want some advice, the poll recommends products catering to the users’ needs.

Customization

Users can choose their bouquet size, flower variety, decorations, and personal message.

Product Description

Bringing life to an application enhances the overall user experience. By adding descriptions, florist introductions, care instructions, and customer reviews, it shows that we care about both the product and the customer.

The Design Process

Research:
The Qualitative Data

Conducting interviews to gather insights, I asked open-ended questions to find user needs and wants regarding the online shopping experience. As I searched for common themes, I categorized my findings into user priorities and user pain points.

Priorities

→ Users want fresh flowers.
→ Users want long-lasting bouquets.
→ Users want to customize their flower arrangements.

Pain Points

→ Users don't purchase bouquets online.
→ Users don't know proper floral care.
→ Users don't know the variety of flowers available to them.

Competitive Analysis:
The Market

I examined features that would likely benefit a user’s experience if they were to buy a product from these sites.

The common theme among these competitors was that customization was not highly emphasized.

Ideation:
Brainstorming

Users would have an better experience shopping if they had options for product selection.

A recommendation poll could help first-time users while customization would satisfy individuals who want personalized bouquets.

As a visual representation, I created a site map to define and showcase the relationship between every page.

Lo-Fi Design:
Wireframing

I focused on layout and information hierarchy. Once I was satisfied with a certain layout, I refined the details into wireframes on Figma and prototyped the main user flow.

Usability Study:
Testing functionality

Participants were instructed to: 1. Select any item, 2. Add the product to their cart, 3. Complete the ordering process

User feedback was compiled and organized into an affinity diagram.

"Why are there so many options? I don't know what to choose"
Participant could click on only one option when they had several in mind.
"Is there only one photo? I think you should add more. What if I wanted to see the item from the back side?"
"What type of decorations would the bouquet have? Will there be pictures? I want a teddy bear"
"There's so many things I have to fill out, kind of tiring."
"How would the pick-up option work? Do I have to pay if it's pick up?"
"What's the difference between poll and customization? It seems kind of the same to me"
Participant asked about whether poll would have more options as it seemed limited.
Participant didn't notice that customization had a ribbon option and skipped through this section.
"Is there a way to see my item in more detail on the cart page? I want to know what size I chose."
"I think it would be faster if I didn't have to type all of my contact information."
Participant could not click payment options. Also could not click the edit button when reviewing order.
"There's a lot of options. Makes it kind of overwhelming to be honest"
"What if I didn't want decorations in any of these particular categories?"
Participant tried to scroll for photos in product description but could not complete this.
"I think it would be helpful to have photos on sizing. I don't know how much 21+ stems would look like"
"Are you going to have more shipping options for the flowers?"
Participant had difficulty pressing back button on the payment page. Has stated that it's too small.

Iterations:
The Changes

Examining the struggles that users faced, errors in visual clarity and navigation were prevalent. With these issues in mind, I made major changes in my high-fidelity prototype.

01.

Microinteractions

Users needed instant feedback to navigate through the app.

02.

Re-design Branding

The design system has to be consistent and match the visual design goals.

03.

Fix information

Add necessity features a typical e-commerce mobile platform would have.

Homepage

As the first screen that users see, I had to make sure that the visual design is polished and the navigation is simplistic.

What I needed to fix:

→ Typography too bold, too distracting
→ Cluttered overlays on photos
→ Incohesive colors

How I fixed it:

→ Images and typography that suits the branding
→ Consistent design system for a cleaner look

Before
After

Poll

Being one of the core features, it is important that users feel confident using the poll.

What I needed to fix:

→ Different UI from rest of the app
→ Missing interaction for chosen answers
→ Inability to return to previous pages

How I fixed it:

→ Similar UI for icons (back button instead of menu)
→ Previous answers now appear on top
→ Answer changes color to indicate interaction

Before
After

Cart

The old cart page was not descriptive of the products that users chose. By changing the items into components, I created a pop-up for users to click on.

What I needed to fix:

→ No product description
→ Bad color contrast (green and black)

How I fixed it:

→ Expanding product descriptions
→ Better color contrast and shading for depth

Before
After

Ordering Process

Many users pointed out flaws in the ordering process, so I fixed how I presented information. By changing the positioning and typography of the labels, it was easier for users to read.

What was wrong:

→ Design too compact and close together
→ Labels located inside input text area

How I fixed it:

→ Headings for every section for better understanding
→ Labels now located above the input text area
→ Consistent spacing between each component

Before
After

Visual Design:
The Aesthetic

Final Thoughts

Takeaways

I challenged myself to design an application that encased all the core concepts I envisioned. As I explored features on Figma, every moment felt like a new learning experience. By implementing user feedback into my design, my iterations improved both visually and functionally.

Next Steps

I would include a search filter system, customer service section, and more personalized branding. Implementing options like color selection in bouquets and chat box pop-ups would make the app beneficial for more users.