Responsive Website Design

Overview

product:
Wildflower Arts Center is a fine arts music venue that offers a variety of events. The goal of the website is to provide a fun and easy way to pick-out and purchase event tickets. The typical user is between ages 25 – 70 and a young professional or a retired music enthusiast.
Role
UX Designer
UX Researcher
Visual Designer
responsibilities

-Planned & conducted user interviews
-Paper & digital wireframes
-Low & high-fidelity prototyping
-Conducted usability studies
-Accounted for accessibility
-Iterated on designs
-Designed responsive website
-Designed logo & branding

tools
Adobe XD
Adobe Illustrator
Pen & Paper
duration
December 2022
problem:
Available online event ticket websites have difficult navigation for choosing seating, bad practices for hidden fees, and confusing check-out flows.
goal:
Design a Wildflower Arts Center website to be user friendly by providing clear process for choosing seats, transparency in pricing, and clear and concise checkout process.

Research

Understanding the User

I conducted interviews that I later turned into empathy maps to better understand the target user and their needs. I discovered that users who typically buy event tickets use it as a fun escape from stress or to connect with the greater community. However, many online events ticket websites have clunky navigation for choosing seating and often frustrate the target users by avoiding transparency in ticket fees. This frustration causes users to give up and not complete the ticket purchase

User Pain Points
Navigation

Choosing seats often is clunky and confusing, resulting in confusing navigation.

Pricing Clarity

Fees are often not transparent until the end of the checkout process, causing user frustration.

Experience

Online ticket shopping websites don’t provide an engaging browsing experience.

Process

Sitemap
goal:

Make strategic information architecture decisions to improve overall flow of website. Keeping it clean and simple as possible!

Sketches & Paper Wireframes
sketch process:

Sketch 5 different desktop page ideas & "star" favorite ideas

Combine favorite ideas

Iterate & expand

Repeat for all screens

Repeat for multiple screen sizes

mobile
tablet
Digital Wireframes
Priorities:

- Clear menu & visual hierarchies
- Useful button locations
- Carousel of images & event cards for easy browsing
- Implement suggestions from peers

Low-Fidelity Prototype Usability Study Findings
Tickets in Cart

Participants want it to be more obvious when they add a ticket to their cart. Add a pop-up cart overlay each time a ticket is added to cart.

Modify Individual Tickets

Participants want a way to modify individual tickets in the cart. Add modifier buttons in cart items and summary items to allow users to make changes.

Checkout Flow Navigation

Participants want to be able to navigate back easily during the check-out process. Add a back button during each page of the checkout.

Iteration

Addressing User Pain Points
Cart Overlay Pop-up Added
Delete Ticket Icons Added
Checkout Progress Bar &
Additional Navigation Added
Desktop Mockups
Mobile Mockups

Branding

Logo Design

Using Adobe Illustrator, I designed a logo for the website inspired by Mexican wildflowers.

Typography Design

I designed the typography in a custom design system to improve visual hierarchy, easy navigation and overall usability.

Color Design

Designed to be fun, engaging and improve the overall usability and readability.

Inspired by Laura Marshall's "Floral Fiesta White III" Wall Art

Seating Graphics

The seating navigation custom graphics implement the design system colors to reinforce the brand.

Takeaways

Impact

"Wow, this website is really beautiful and easy to use! This is much more exciting to use than my regular event websites. Can’t wait to use it.”
- Research Participant

What I Learned

Small design adjustments can lead to a HUGE impact on the user. At the end of the day, if you stay focused on the user and continue to design in a clear and concise manner, the user and the business will benefit!

Next Steps

1. Conduct follow-up usability studies on the website.
2. Identify and address any areas of improvement and ideate on additional features.
3. Continue to refine the branding and logo based on stakeholder and user feedback.

Thank you

I hope you enjoyed viewing Wildflower Arts Center: Responsive Web Design! Thanks for checking it out!

Let's work together!

Creative coffee sessions encouraged

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.