Demeter: Responsive Website

Demeter is a responsive webpage that allows users to order various flower subscriptions and flower products.

Screenshot 2023-08-22 at 3.30.58 PM.png
Screenshot 2023-08-22 at 3.31.15 PM.png

The Problem:

Users want more options for purchasing flowers and receiving flower subscriptions, and options for last minute events.

The Goal:

Create a responsive webpage with a variety of bouquet, event, and subscription purchasing options in order to meet several user needs.

Audience
Event planners, anyone planning a celebration, or purchasing flowers in the DC area

Project Duration
June 2023- August 2023

Role
Lead UX and Visual Designer

Conducting Research:

  • The competitive audit indicated that websites that worked best had lots of negative space and user flows that were aesthetic and easy to navigate.

  • One user persona that was used to do research was an event planner who needed last minute options for their events. Another user persona was an individual who lived out of state who needed to send flower subscriptions to a loved one in the local area on a regular basis.

  • The first usability drew attention to the importance of including crucial information above the fold of the desktop page, as well as the need for more clear call to action buttons.

  • The second usability study indicated that users needed a less cluttered checkout flow in order to go through the checkout process in an easier way.

Ideation

Lo-Fi Paper and Digital Wireframes

Final Designs

  • Establishing an easy to understand checkout process was crucial for user satisfaction.

Responsive Web Design

The key focus in making responsive webpages was to make sure that the flow between one device to another was synchronous and cohesive.

Takeaways:

I was learning to use Adobe XD while I was working on this project, so the learning curve was massive. I am thrilled to have gained proficiency in Adobe XD. I also learned a lot about responsive web design and designing for different devices based on their use and what information is the most significant to include on smaller screen sizes.

Previous

Artour