The document describes the development of a virtual art gallery tour app. Key points: 1) The app aims to make art and galleries more accessible for busy or distant art lovers. 2) User research found main frustrations were lack of time, distance from galleries, and cost of visiting. 3) Prototypes and mockups were created and tested, with feedback leading to improvements like a back button on artist profiles. 4) An accessible high-fidelity prototype was created, considering factors like color contrast and screen reader support.

1. DADA - Virtual Art Gallery
Rudy Alvarenga
3/6/23

2. The product:
DADA is a virtual art gallery tour app intended to make
art and art galleries more easily accessible at home or
on the go. This app is targeted towards art lovers who
lead busy lives or otherwise lack access to art galleries.
Project overview
Project duration:
Project was worked on between October 2022
and March 2023
Preview of selected
polished designs.

3. The problem:
The problem is Art accessibility. Despite many,
many people being art lovers, sometimes it’s
inaccessible. This may be due to scheduling,
distance or any other issues that present
themselves, How to we make art and art
galleries accessible to those at home?
Project overview
The goal:
The goal of this project is to bring art and art
galleries home to the user. Are they too far
away? Can they not afford a trip to the art
gallery? No problem. The project will solve
these problems..

4. My role:
lead UX designer/UX researcher
Project overview
Responsibilities:
user research, wireframing, prototyping

5. Understanding
the user
● User research
● Personas
● Problem statements
● User journey maps

6. User research: summary
I conducted user Interviews to better understand the users frustrations that they are experiencing,
as well as the user expectations the users have with my app,
I used the results of the interviews to build User groups. The leading user group discovered were
Adults with busy schedules and less than ideal hours of work. These users want to make use of
their free time to relax and reconnect with activities they love.
This user group research revealed that the main frustrations felt were lack of time, due to working
hours or other responsibilities as well as distance as that is very well a large pain point that would
keep the user from attending a gallery. Even if they did have free time. With this cost is also a
factor.

7. User research: pain points
Time
The first pain point
expressed. Our user
group feels that they do
not have sufficient time
in their busy schedules
to go view a gallery.
Accessibility
This was our second
pain point discovered. It
is expressed that
distance plays a heavy
factor in avoiding
galleries, this falls in line
with users that live away
from the city.
Financial
This last pain point
discovered is with cost.
For users that are able
to make the time,
factoring cost of taking a
trip to the gallery, food,
parking, and general
spending. This can be
considered a significant
pain point.
1 2 3

8. Persona: John Apples
Problem statement:
John Apples is an
established restaurant
professional. He needs a
Virtual Gallery Tour App
because art is his other
love. However, life is
getting expensive and he
would love a way to
connect with this love
while also saving money.

9. User journey map
Image of user
journey map
This one took a couple of
tries, because I really had to
think about all the
important steps I felt I had
to take If I were John
Apples.

10. ● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design

11. Paper wireframes
Goal here was to create a
homepage for the app. The
home page should have a
little bit of everything and
that's what I had try to
convey with my paper
wireframes. I had an idea of
where I wanted to go in the
first frames but it changed
quite a bit during the
refined version.
Image of paper
wireframes including
five different
versions of the same
screen and one
image of the new,
refined version

12. Digital wireframes
This page is the Art Gallery
page. One of many a user
can view. It looked best for
the user to have the top
section be artworks that are
“trending” or “hot ” for the
gallery. Lower down is an
artist scroller where users
can scroll to the side to
view Artists work that have
been presented at that
gallery.
Here I had a
painting
carousel thats
meant to be
rotated. Tap on
one and
painting
expands and
shows info and
gallery
information.
Insert first wireframe
example that
demonstrates design
thinking aligned with
user research Here the
thought is that
the user
already knows
the artist. They
want to follow
them. Here is
their profile to
tour their work
or to see what
socials theyre
active on.

13. Digital wireframes
Here we have the main
page of the app. What
research indicated was; to
have a little bit of
everything on the
homepage. More of the hot
or trending items, news as
well. From there the user
can explore more and
navigate as they choose.
This element is
pretty much
the same as
the artwork
carousel from
the Gallery
page - this one
is on the main
page; It
features the
title and
description of
the work with
options to
favorite, share,
and comment.
Insert second
wireframe example that
demonstrates design
thinking aligned with
user research This is the
backbone of
the app, the
drawer. Stays
consistently
overlaid on
most pages for
easier
navigating.

14. Low-fidelity prototype
Screenshot of
prototype with
connections or
prototype GIF
https://www.figma.com/proto/xuUXpSExAk4Y
icTPhqsGO6/ART-GALLERY-TOUR-
APP?node-id=5%3A12&scaling=scale-
down&page-id=0%3A1&starting-point-node-
id=5%3A12&show-proto-sidebar=1
So the user flow for this
prototype is that the user must
find a gallery, view an artists
profile, and finally view an art
gallery tour with the options
being “Interactive” or “Non-
interactive”

15. Usability study: findings
For the Low Fidelity usability study, the goal I wanted to focus on the most was navigation. To
make sure the users were comfortable navigating the app overall.
Round 1 findings
1
2
Round 2 findings
3
All user had difficulty exiting an artists
profile
1
Most users found navigation difficult
2
Some users found the bunker bar a
3

16. ● Mockups
● High-fidelity prototype
● Accessibility
Refining
the design

17. Mockups
This was a big one during
the usability study that I
added to the High fidelity
mockups. The Hamburger
menu was non-functional
and users wanted another
alternative way to move
between screens. So I
added a basic menu with
the same title font for each
page.
Image of
selected
screen before
usability study
Before usability study After usability study
Image of
selected
screen after
usability study

18. Mockups
This was another bigger change
that was added after the study. In
the prototype there was no way
to back out of the Artists Profile
menu in the event the user chose
an artist they didn’t want they’d
have the option to go back and
choose another. My fix for this
was a “Nevermind” button and
tap the blurry areas to exit.
Before usability study After usability study
Image of
selected
screen before
usability study
Image of
selected
screen after
usability study

19. Mockups
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display

20. Mockups
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display

21. Mockups
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display

22. High-fidelity
prototype
https://www.figma.com/proto/xuU
XpSExAk4YicTPhqsGO6/ART-
GALLERY-TOUR-APP?node-
id=212%3A3&scaling=scale-
down&page-
id=212%3A2&starting-point-node-
id=212%3A3
Screenshot of
prototype with
connections or
prototype GIF

23. Accessibility considerations
Insert one to two
sentence summaries
describing each
accessibility consideration
applied in your designs.
Insert one to two
sentence summaries
describing each
accessibility consideration
applied in your designs.
Insert one to two
sentence summaries
describing each
accessibility consideration
applied in your designs.
1 2 3

24. ● Takeaways
● Next steps
Going forward

25. Takeaways
Impact:
"The layout is good and I like the overall
feel of the design!”
What I learned:
There was much i learned throughout this first
project. From the overall process, wireframing,
low fidelity and high fidelity mockups. The
whole process was exciting to learn about.

26. Next steps
First thing I believe I
would tackle would to
have a light and dark
mode. These both would
be high contrast and be
able to be switched based
off the users preferences.
I would also work on is
another color palette.
Updating this as one of
the next steps would
possibly give the app a
better feel and possibly
have a higher contrast.
A possible direction here
would be to update the
apps layout.
This is the least important
but this would give a
possibility to create a
more eye-catching layout
to each page.
1 2 3

27. Let’s connect!
Insert a brief sentence or two about contacting you and/or reviewing more of your work.
Provide your contact information here. This might include your email address, phone number, and
website or link to other professional platforms.