Case Study:
Case Study:
The Outline Art Gallery Website
The Outline Art Gallery Website
Embedded Files
Project Overview
Project Overview
The problem
Other ticket purchasing websites have a long complicated checkout process.
The product
The Outline is a local art gallery located in the suburbs of Columbus, Ohio. The Outline provides a space for a wide range of artists to display their work. Also a space for customers to appreciate art. The Outline would like to have exposure into the digital space so users can get updates on events and purchase tickets.
The goal
Design a website for The Outline where users can easily navigate and simple checkout process.
My role
UX designer designing The Outline art gallery website.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Project duration
April 2022 to May 2022
Understanding the user
To better understand what users needs, I conducted interviews and create empathy maps. I discovered that many users had a difficult time navigating and purchasing tickets on other ticket purchasing websites.
The overwhelming events and information on many ticket purchasing websites make it confusing to navigate and is frustrating to users resulting in not purchasing.
User pain points
1. Navigation
Ticket purchasing websites are too clustered making navigation confusing.
2. Experience
Ticket websites are mundane and lack an engaging browsing experience.
3. Purchasing
Lots of steps into locating tickets and checking out process takes too long.
Persona and problem statement
Cory is a busy adult who needs to buy tickets online that is easy to navigate because ticketing website is frustrating to purchase from.
User journey map
Mapping Cory's journey shows how helpful it would be for users to access The Outline website.
Starting the design
Starting the design
Sitemap
My goal with the sitemap is to arrange information where users can easily navigate and obtain.
Paper wireframes
Wireframes
Initial sketches of paper wireframes show how I would address the user's pain points.
For the home page, I focus on a simple layout and a drop-down menu/navigation to help users ease of browsing. Also added a date selection feature to improve the ticket purchasing experience.
Screen size variations
Also sketched out paper wireframes for viewing on smaller platforms like mobile phones and tablets.
The home page paper wireframe variation is designed to maximize the platform's screen for an improved experience.
Digital wireframes
In the initial design phase, I based the designs on the user's pain points to improve their browsing experience. I grouped similar elements and optimized the screen space for an overall better experience throughout different platforms.
Wireframe
Screen size variations
Usability Study Findings
I conducted two rounds of usability studies. The first round helped to design mockups from wireframes. The second round was used to design a high-fidelity prototype from the mockups
1. Payment
Users were not able to save payment information for future checkouts
2. Checking out
Users don't know how many steps till checkout was complete
Refining the design
Refining the design
Mockups
Based on the insights from the usability study, early designs did not allow users to save payment information or option to have the same billing information so users would have to fill out the billing section again. I added both options to make the checkout process quick and easy.
I added a progress bar to give users a visual representation of the steps left to complete checkout.
Accessibility considerations
1. Color
Used color contrast and large buttons for users with difficult visual impairment.
2. Layout
Designed the site with a simple layout making it easier to read and user flow.
3. Headings
Used different heading size text for clear visual hierarchy.
Screen size variations
The high-fidelity prototype shows the user flow for placing an order and submitting payment.
To view The Sub Shop high-fidelity prototype
Desktop
Mobile
Desktop
Mobile
High-fidelity prototype
The high-fidelity prototype shows the user flow for scheduling and purchasing tickets.
To view The Outline high-fidelity prototype
Going forward
Takeaways
Impact
Users of The Outline Art Gallery website feel like the design was clear and simple to navigate through.
What I learned
While designing The Outline Art Gallery website, I learned that small changes can have a huge impact on the user flow. Usability studies and peer feedback also have a huge impact on the design that I may have overlooked or just missed.
Next steps
1. Testing
To conduct another usability study to see if there are any pain points that were missed.
2. User Research
Conduct more studies to validate the design changes.
3. Peer feedback
Send design for peer feedback for farther improvement
Page updated
Google Sites
Report abuse