ByEstee Case study
Designing a responsive website for a local flower shop
UX Design | UI Design | Research | Information Architecture | Interaction Design | Wireframes
| UX Writing | Responsive Design | Branding | Prototyping | Usability Testing |
Role
End to end UX/UI designer
Brief
Create a responsive design for an existing business
Timeline
9 weeks
Approx. 180 hours
Tools
Figma
Miro
Google docs
Excel
What is ByEstee?
Byestee, a small business located in Brooklyn, sells flowers every Friday and collaborates with party planners to design floral arrangements for events. They share photos of their work on Instagram and provide a business WhatsApp for inquiries and orders.
Problem
Customers main interactions with ByEstee include buying bouquets and inquiring about events. The current setup can result in lost orders since all inquiries are one platform. When people ask about events, the lack of an official form leads to a lot of unnecessary back-and-forth communication.
Solution
Byeestee could benefit from a site where customers can see their work, make event inquiries and place orders smoothly all through one platform. This would make things more organized for the customers and the store, improving their overall experience.
Challenges
Designing for a small budget small business, especially a flower shop, I recognized the challenge of integrating their work and visuals in a way that makes customers feel like they're engaging with the unique brand that they’re familiar with, while still delivering a fresh and modern design experience.
ByEstee has a unique system where they offer two color palettes instead of a customized color option. Making sure new customers understand this choice while keeping the process smooth and easy is something that can potentially be challenging.
Stating goals to ensure a focused path
User goals
Separate sections of inquiry, one for events and weekly florals
Gallery to view Byeestees work
Design that reflects brand values and builds trust
Business goals
Customer satisfaction
Customer retention
Returning customers
Research goals
Understand users current perception of the ByEstee ordering system
Define their pain points
Gather feedback on how to improve.
Taking a look at other floral businesses
I conducted competitive research to get a feel for how other flower shops set up their websites and what information is helpful for customers to have.
From my research I began to notice patterns:
Detailed contact forms help customers express themselves clearly.
Features providing insights about the company build trust.
Photos are a key element on flower websites, influencing purchases.
Some floral websites suffer from hard-to-read low-contrast colors.
Other floral businesses in the market
Speaking to ByEstee customers
Interviewing flower customers and party planners who work with florists regularly, I asked them questions that would help me understand their needs, preferences, and behaviors when shopping for flowers. I created some separate questions for party planners and flower shoppers to get the relevant information from each group.
Interview Findings
6/6
users use a gallery to choose their flower shop
6/6
users value brand identity before ordering
4/4
customers said they don't know the real size of the bouquet when they order
6/6
customers said they value aesthetic UI when ordering flowers
4/4
customers said they wish they could track delivery
4/6
users want to know about the owner of small brand before purchasing
4/4
customers said they add a personalized note with bouquets
2/4
customers said they order flowers as a gift
What these findings mean practically
Gallery significance
When customers want to buy flowers, they first check the website's gallery. If they like what they see, they proceed to make a purchase from that particular brand.
Creating ambiance
Customers who buy flowers have a specific purpose in mind. They anticipate that the shopping experience will align with the ambiance they're aiming to create with the flowers.
Order specifications
Customers prefer to be as specific as possible when ordering flowers and want to make sure that when their order arrives it looks how they expected it to.
“My bouquet is never the size I predicted it to be”
-Taken from user interviews
Defining our audience
After conducting research and understanding the insights, I was able to create targeted personas.
The first persona is the flower customer and the second the party planner.
Both purchase flowers with the motivation to create an ambience for a certain occasion.
ByEstee User personas
Defining our problem post research
Using the POV and HMW method to make practical statements, POV statements narrowed down the problem and HMW statements opened up possibilities for effective problem-solving.
Some of the key problems that need to be solved are
Customers want to build trust with the flower shop before they place an order.
Customers feel like when they receive their order, their bouquet size doesn’t match what they expected.
Customers ordering flowers for something specific, want to feel confident that the flower shop will understand their vision.
Which solutions will add value
Creating practical solutions from the HMW map, I was able to create a list of features that should be included in the website and would be vital to the user's satisfaction level.
I selected certain features to add based on research, weighing how effective they would be against the effort needed to put them in place.
ByEstee Solution chart
ByEstee Feature roadmap
Check in with stakeholder
At this point I had a meeting with the owner of ByEstee. We discussed how customers feel like the sizing of the bouquets they’ll receive is unpredictable and that customers want a way to build trust with the brand.
Certain features weren’t feasible for the brand like shipping to two different addresses or having specific personal recommendations of vases and customizable flowers for their space.
We decided on ways to implement an about the brand section and more photos examples in the gallery and product page for context, so users feel more confident in their order choices and know what to expect.
Mapping out the site
Given the limited number of pages, I recognized the significance of structuring the page hierarchy. This was particularly important because the gallery and product pages, being the most frequented and influential, needed to be prioritized.
ByEstee Site Map
Creating the Happy path
I created user flows for all major tasks on the site but given the brand's specific approach to selling flowers I focused specifically on this action of ordering a bouquet.
I recognized the need to step into the users' shoes and thoroughly explore every possible path they could take. It was essential to make the process as straightforward as possible while ensuring users fully understood the system and how to use it effectively.
ByEstee user flow
A glimpse into the bare bones of ByEstee website
ByEstee Lo-Fi wireframes
Brand identity
I chose browns and pinks for the flower shop site because they represent warmth, natural elements, and the beauty commonly associated with flowers. These colors create a welcoming and emotionally appealing environment for visitors.
The brand wanted to keep their existing logo because they like its feminine yet minimalistic appeal..
ByEstee Style Tile
Hitting a roadblock
After many rounds of sketches and Lo-Fidelity wireframes, I still wasn’t happy with my designs.
Once I started adding photos I got frustrated trying to maintain the small business home-y flower shop vibe that the owner wanted, while still trying to achieve a clean design. This is a problem I anticipated I’d face, but I didn’t realize to what extent.
I reached out to fellow designers and my mentor to hear feedback and advice. The guidance I got was very insightful and its value immeasurable.
Communicating with the stakeholder was key to moving forward and creating designs that everyone was happy with.
Final Designs
A look into the ByEstee homepage
Things I focused on
Evoking emotion in the customer through images and wording choice in the hero image.
Visual hierarchy so users easily identify and access the key actions. (Purchasing flowers and viewing the gallery)
Ensuring that the brand identity is easily distinguishable using the colors and about me section.
A look into the ByEstee product page
Things I focused on
A straightforward and minimal approach to simplify the unique bouquet process for the customers.
Real image examples for sizing and color options so users feel confident in their choices and what to expect when they receive their order.
A look at the ByEstee gallery page
Things I focused on
Providing context of the images so users can categorize their work and viewing all the photos seems less overwhelming.
Viewing many images at once with minimal clicks.
Usability testing
Having individuals who match the target audience test the website revealed usability issues.
Some severe and common problems
Most users got confused by the choosing color and size process of the bouquets on desktop.
Wording for instructions before choosing how to purchase a bouquet was confusing and cluttered.
Prices for small and large bouquets are unclear.
ByEstee Usability test chart
Which iterations will add value
I selected certain edits to make, weighing how severe the error was with how frequent it occurred.
The iterations that would add most value were
Simplify wording and process for purchasing a bouquet.
Make the price bolder on the bouquet page.
Change the back button to something clearer.
ByEstee error chart
Iterations
ByEstee Mobile iterations
ByEstee Desktop iterations
Handoff & Impact
As a designer, handing over the final designs to a happy client felt extremely rewarding. We went over how the changes to the site match ByEstee’s business and user goals.
We added an informative about the owner and brand section to build trust with the customers.
We implemented a size and color photo reference system for the process of purchasing a bouquet so customers know what to expect when they receive their order.
We created an organized gallery for enjoyable browsing and transparency of the work that ByEstee does.
The assumption based on the research done is that these changes will help boost sales because customers will understand their orders better and have a more personalized shopping experience. It will also highlight the uniqueness of ByEstee, making them stand out from other local businesses and build trust with their customers.
Moving forward
Overall, working with a real stakeholder taught me a lot. Understanding how a brand operates and what they aim to achieve is the first and most important step. This knowledge allowed me to create something that would ultimately be valuable to them.
If I had more time to work on this project, the first thing I would do is put more research and energy into the gallery. Without creative direction the photos are not cohesive and I would put more research into finding out about more possible gallery features or encourage the brand to create some content with creative direction.
I would also make a customized section for the customer where they get personal recommendations. For example, what kind of vases to use for their bouquets and a 3D feature telling them how to style the flowers in their home.
Lastly, I would add a subscription option where customers can sign up and receive the same bouquet every week. That is something that the brand needs to be ready for too.