CASE STUDY

Art Gallery App

Type
Personal
Platform
iOS
Status
Proposed

1 — Project Goal

Create a brand new mobile experience for the gallery. Visitors can buy tickets, learn about upcoming gallery events, and plan their next visit.

2 — Target Audience

The target audience is two groups of people. The first group is made of retired, senior visitors who often rely on transportation services to go to the gallery. The second group is young professionals who want to plan evening and weekend outings at the gallery.

Persona card for Dotty who represents users who are older and use the app to plan their visits rather than consume art in the app.
Persona card for Bao who represents users who are younger and use the app to buy tickets for themselves and others.
Storyboard created to understand Dotty's day.
Storyboard created to understand Bao's day.

3 — Research & Key Challenges

I used an online survey to determine the content people expect in an art gallery app. Participants were chosen from people who normally visit art galleries and art museums. I conducted in-person and remote interviews. The key challenge was arranging in-person usability studies for the senior segment of the target audience.

Preview of the virtual survey used to gather feature and content expectations.
Preview of the competitive audit performed on art gallery sites and apps.
User journey map for Persona 2.
Preview of the responses from the virtual survey.

4 — Initial Design Concepts & Wireframes

After thinking about the research I started creating hand-drawn wireframes using the Crazy 8s method. After selecting the most promising ideas, I created wireframes in Figma. The best ideas from initial design concepts were translated into digital wireframes.

Crazy eight marker sketches for various user flows.
Digital wireframes created from the best concepts from the crazy eight ideations.

5 — Usability Testing

Participants reviewed the digital wireframes and answered questions about navigation, expectations, and preferences. Their feedback became usability testing data recorded in a spreadsheet for each participant. Those responses became affinity groups. The usability work informed the final design.

Usability issues and insights gathered from testers one and two while using the wireframe prototype.
Usability successes gathered from testers while using the wireframe prototype.

6 — Conclusion

The art gallery mobile app's design is fun, richly-hued with saturated colors, and provokes curiosity by using bold visual design choices. Other art gallery apps I reviewed were a little stiff and elite so I chose saturated, exuberant colors in the visual design. However, I was more restrained in the ticket purchase screens.

Try the prototype →

Skills

Accessibility

Designing and coding within accepted standards to ensure equal access regardless of technology.

  • Accessible Markup
  • Proper ARIA
  • WCAG 2.2
  • Screen Readers

Design

Design means intentially creating for both the users’ task outcomes and the business goals.

  • Inclusive Design
  • Design Systems
  • Product Design
  • Visual Design

Technical

Technology is how we build products. We must consider feasibility, accessibility, and timelines.

  • Accessible Markup
  • Frontend
  • HTML, SCSS, CSS
  • Working within technical constraints

User Experience

This means learning about users and designing for their needs while respecting the business goals.

  • User Research
  • Information Architecture
  • Accessible Content
  • Public Speaking

Certifications

Practical Accessibility
Certified by Sara Soueidan
2025-01-07
DHS Trusted Tester
Certified by Department of Homeland Security
2024-10-28
Smart Interface Design Patterns
Certified by Smashing Magazine
2024-05-31
Designers Accessibility Curriculum
Certified by Deque University
2023-03-09
W3C Intro to Accessibility
Certified by W3C via edX
2021-12-22
Google UX Design
Certified by Google via Coursera
2021-11-24
Interaction Design
Certified by UC San Diego via Coursera
2018-05-27

Talks

Just in Time Usability

Isral Duke presents why accessibility is important for business. He also presents 10 things that site owners can do to quick check their site's accessibility and usability. Presented at a local ecommerce group lunch.

Accessible, Friendly Content

Isral Duke demonstrates how iOS and MacOS VoiceOver presents a simple web page. This talk promotes the use of semantic, meaningful markup to make a better user experience. Presented at Google Developer Groups.

Building Pelican Design System

Isral Duke presents version one of Pelican Design System. He talks about how it was created, and what's coming next in version two. Presented at SQL Saturday.

References

James Alt’s LinkedIn avatar. James Alt Chief Architect at Louisiana Office of Technology Services Kristina Truong’s LinkedIn avatar. Kristina Truong UX Designer at Louisiana Office of Technology Services Elle Waters’s LinkedIn avatar. Elle Waters Accessibility at Workday Guy J. Anglade’s LinkedIn avatar. Guy J. Anglade Director of Website Content at Morgan Stanley Patrick Rills’s LinkedIn avatar. Patrick Rills Engineering Manager at RevenueCat Glynnis Ritchie’s LinkedIn avatar. Glynnis Ritchie UX / UI and Product Designer at Flagrant Dr. James Davis’s LinkedIn avatar. Dr. James Davis Freelance client at Louisiana State University Matthew Magnuson’s LinkedIn avatar. Matthew Magnuson Managing Partner at DMM Motorsports Mike Cole’s LinkedIn avatar. Mike Cole Product Manager at Harman