Embedded Files
★★★★★
Case Study - detailed analysis:
The Project
Project Scope
Future Art: Virtual Art interactive application
★ Designer's personal challenge:
Apart from the main user flow (critical path) (in Burgundy), to integrate the following flows:
✦ Accessibility flow - Languages
✦ Accessibility flow - Assistive Technologies
✦ Real-life (on-site building Gallery) QR code scanning feature, to enable virtual interactive flow
(similar to virtual visit flow)
✦ Hamburger Menu/ Profile flow
Project Overview
The product:
Future Art is a fictional international organisation for the promotion of arts and visual/ virtual arts. It is based in London but it has a worldwide popularity and visitors from all over the world. Future Art’s goal is to reach and teach history of art, and to become a platform for enabling virtual workshops and interactive activities. At the same time, to create virtual and real-life communities with emphasis on Accessibility, and to focus on promoting and democratising art.
Project duration:
August - September 2023
The problem:
★ Art is a very dry and elitist subject and most people, especially from underprivileged and marginalised demographic groups, don’t have the opportunity to get involved.
★ People don’t have the time to visit the real-life (building) Gallery (Future Art and other local galleries), and this physical boundary has to be resolved to democratise art even more.
The goal:
★ To create a platform (application) for providing a more direct and instant access to people that want to learn more about art, art history and to attract new users.
★ To educate people using the application about history of art, through fun facts, interactive activities and workshops.
★ To create a platform where people from all over the world can access, by encompassing and promoting Accessibility (Languages and Assistive Technologies) features.
My role:
★ UX designer
★ UX researcher
★ UX writer, and
★ UI designer
[For all Phases - “Product Development Life Cycle”: Conception (Phase 1) to Delivery (Phase 5)]
My responsibilities:
★ Defined strategic project scope
★ Conducted strategic research
★ Conducted design research
★ Prepared empathy maps
★ Prepared personas
★ Prepared user journey maps
★ Prepare problem statements
★ Accessibility considerations
✦ Languages
✦ Assistive Technologies (AT)
✦ Building and incorporating visual Accessibility Features in accordance with WCAG requirements.
★ Prepared sitemap diagrams
★ Conducted interviews
★ Conducted usability studies
★ Designed paper wireframes
★ Designed digital wireframes
★ Designed low-fidelity prototype
★ Designed medium-fidelity prototype
★ Designed components to enable compliance with sticker sheet (design system)
★ Designed sticker sheet (design system)
★ Designed mockups
★ Designed high-fidelity prototype
★ Designed connections
★ Designed triggers and interactions (component graphics, motion and animation)
★ Incorporated findings from usability studies
★ Incorporated and coordinated design iterations
★ Graphic design
★ Logo and branding design
★★★★★
Understanding the user
User research: summary
To fully understand the existing market, the Future Art's goals and the actual user limitations and needs:
★ I conducted interviews and created empathy maps to understand users.
★ I prepared users' journey maps to list the challenges and unveil improvement opportunities.
★ I defined the user needs and planning to embed those needs in the design.
★ I researched other competitor's and Art Institutions websites and applications - competitive audit.
★ A few different user groups identified during research, but the most critical one that incorporates the most challenges was marginalised and underprivileged users, that don’t have the time or education to approach and appreciate art.
The selected user group has confirmed the initial assumptions about the Future Art visitors, but research also revealed that time and finances were a very limiting factor in visiting the real-life facilities, especially.
★ Other user problems, had to do with vulnerable users and edge cases, from neurodiverse users to physically and mentally disabled users.
User research: pain points
1 Most users have difficulty due to limited time and financial resources to visit the real-life (building) Gallery.
2 People with physical and mental disabilities, and other groups such a families with young children, have difficulty visiting the real-life (building) Gallery.
3 First time internet users and users from marginalised and underprivileged backgrounds have difficulty in reading about, feeling connected and understanding art. Even if they encounter Art occasionally, there is not any good reason to return back.
4 A large number of users and potential users don’t understand and/ or not interested in art. It is considered a very dry and elitist subject. There is nothing engaging to keep users and/ or attract new ones in a fun, engaging and entertaining way.
Persona: Nina
Problem statement:
Nina is an Architecture student with very limited time and sister to 2 younger siblings, who needs easier and fast access to Future Art Gallery (and other local Galleries), because she doesn’t have enough time to visit the real-life (building) establishments.
User journey map
Mapping Nina’s user journey, it has revealed how helpful and engaging it would be for users (and potential virtual and real-life visitors) to have access to an application for viewing the current Future Art's exhibitions and exhibits, learning about art history, and participating in entertaining interactive activities.
★★★★★
Starting the design
Paper wireframes
I took the time to draft 6 versions of the same “template” Homepage frame, to ensure a different approach each time and how the most important elements can be incorporated in a strategical and tactical hierarchy. The visual identity was very important due to the Art Gallery's institutional branding, so it was imminent to be incorporated in the designs, as well.
For the Homepage, eventually I selected a very simple but guiding layout to take the users easily and quickly to the right part of the application, which is the virtual gallery. All the key elements are visible within this primary frame (template):
★ Logo (branding, colours, visual identity, etc.)
★ Hamburger menu
★ Profile (avatar)
★ Tickets and marketing opportunities (shop, café, venue hire, etc.)
★ Visit (real-life Accessibility)
★ Contact
★ Terms and Conditions (T&Cs)
Main user flow diagram (critical path)
Below is the main user flow, where it shows the steps that a user has to follow to accomplish and complete the virtual visit and interactive activity:
★ Visit the virtual gallery.
★ See the available virtual/ digital exhibitions.
★ Select which exhibition to visit.
★ See/ visit/ enter the selected virtual/ digital exhibition.
★ Select the preferable virtual/ digital exhibit.
★ See/ visit/ enter the selected virtual/ digital exhibit.
★ Select the Art History feature.
★ Read and learn about the selected exhibit (Art History, artist's biography, exhibit history, fun facts, etc.).
★ Return to exhibit
★ Select the virtual Interactive activity.
★ Visit/ enter virtual Interactive activity, where the user can draw over the selected exhibit and post it to shared space.
Sitemap
The sitemap diagram below includes the main user flow (as described above), and the Accessibility flow outlined in the designer's personal challenge (see above). Due to the nature of this application, the Accessibility feature has incorporated early enough, to remove any physical and mental disability restrictions and boundaries.
Digital wireframes - templates
As the initial design phase continued and evolved to digital wireframes, I made sure to include all important features that were identified during the user research and to promote the Art Gallery's institutional branding.
Easy navigation and visibility/ direct access of all key features was a primary goal. In parallel, I incorporated fun learning and interactive activities, to engage the users in entertaining groups, build virtual communities and provide sense of belonging to the users.
Last but not least, marketing opportunities were accumulated in a particular zone (top-right frame corner) to make sure the user has an insight to all the facilities and marketing options provided by the Art Gallery and to help the Gallery monetise its assets.
Low-fidelity prototype - static*
The low-fidelity prototype has been developed by combining the main user flow diagram, and the Sitemap diagram (for selecting the required Accessibility (Languages and Assistive Technologies) features). Then visiting the virtual exhibitions, enjoying the exhibits, alongside the Art History learning and the interactive activity/ies.
At this stage the main user flow is mostly a sequential structure:
A. Homepage
B. Accessibility
C. Exhibitions/ Exhibits/ History of Arts/ Interactive Activities)
*static = graphical representation
Low-fidelity prototype: Main user flow - static (graphical representation)
✦✦✦✦✦
Usability study findings (R1)
To ensure a user friendly application, I conducted two rounds of usability studies that enabled further the design development and alignment with the original goal and pain points. The first round was done after the completion of the low-fidelity prototyping, and helped forming the medium and high-fidelity prototypes. I received some very good feedback from my peers' reviews, and I implemented some changes to make the whole UX functions easier and more straightforward.
Round 1 (R1) findings:
USR1 - 1. Sequential flow to be DIVIDED in parallel flows to provide more clarity to the user. Currently, it is confusing and frustrating to integrate the Accessibility flow in the main user flow. Most users would prefer to visit the virtual Gallery (main user flow - critical path) directly, and to control the Accessibility features independently.
USR1 - 2. Marketing and low bar buttons introduce unnecessary complexity. Template (frame) layout to be simplified to basic functions, and all those additional features to be incorporated in other flows or within the Hamburger menu and/ or profile.
USR1 - 3. Users need more guidance for the required steps to use and select the preferred Accessibility (Languages and Assistive Technologies) features. The current layout doesn't show the full path, more frames to be added to provide clarity.
USR1 - 4. The Art History button has to be re-arranged and to become more frame relevant, as it is one of the basic features alongside the Interactive Activities button. Currently, it is located in the same zone as 3 other buttons and is not very prominent.
USR1 - 5. Content warning flashcards have to be integrated in the exhibitions/ exhibits, for the vulnerable populations (underaged, neurodiverse users, etc.).
Revised Sitemap (R1)
The aforementioned usability study findings (R1), especially the "USR1 - 1" finding, has triggered the revision and rearrangement of the sitemap diagram to divide the main user flow (Virtual Gallery) from the parallel user flow of Accessibility. This change creates a hybrid of hierarchical and matrix structures, and they enable an enhanced cross-usability application functions.
"USR1 - 1. Sequential flow to be DIVIDED in parallel flows to provide more clarity to the user. Currently, it is confusing and frustrating to integrate the Accessibility flow in the main user flow. Most users would prefer to visit the virtual Gallery (main user flow - critical path) directly, and to control the Accessibility features independently."
Key:
1. All revised and new items are shown in yellow
2. Items added in previous design iterations are neutralised and shown in shades of burgundy.
Digital wireframes (R1) - templates
The typical application templates were revised in accordance with the usability study findings (R1) especially items:
★ USR1 - 2
★ USD1 - 4
★ USR1 - 5
I made sure to simplify the layouts and have less call-to-action buttons. The retained and remaining buttons were grouped into zones, in accordance with their specific functions.
Key:
1. All revised and new items are shown in yellow
2. Items added in previous design iterations are neutralised and shown in shades of burgundy.
Medium-fidelity prototype (R1) - Static*
The medium-fidelity prototype is a merge of:
★ The main user flow
★ The revised sitemap diagram and
★ The first round of the usability study findings (R1).
The iterated prototype emphasised the DIVIDE of the main user flow and the Accessibility user flow, into two separate flows. All the other usability study findings (R1) have been revised and/ or integrated, accordingly.
As mentioned before, at this stage the user flows are a hybrid of hierarchical and matrix structures, for example:
★ Virtual Gallery = A. Homepage + C. Exhibitions/ Exhibits/ History of Arts/ Interactive Activities
★ Accessibility = A. Homepage + B. Accessibility
*static = graphical representation
User flows: Indicative (Assistive Technologies [AT]) Accessibility user flow + Main user flow (Art Exhibition, Art History and Interactive Activity) - static (graphical representation)
Key:
1. All revised and new items are shown in yellow
2. Items added in previous design iterations are neutralised and shown in shades of burgundy.
✦✦✦✦✦
Usability study findings (R2)
Continuing the design progress, I conducted the second round of usability study, based on the medium-fidelity prototype. The purpose of this round is to implement additional changes that will improve the user experience and user interface (very minimal at this phase), and to further integrate the Designer's Personal Challenge. I received the following constructive feedback from the testing, and below are shown the subsequent design changes.
Round 2 (R2) findings:
USR2 - 1. All buttons to be 44px minimum (WCAG). A typing feature can be added as well to make easier selecting the preferred Languages/ AT. This is an application to bring art to the users and especially for those users that have physical and mental disabilities and boundaries. The design has to remove all those boundaries and connect the user to the Art Gallery and the communities.
USR2 - 2. An accessibility (Languages/ AT) multiple-selection feature can be integrated as an extra benefit. Users can use the application in dual mode especially if they are learning English and participate in interactive activities. The Languages barrier has to be removed and bring people closer to form virtual communities. Additionally, there are a number of users that might have multiple Assistive Technology requirements (due to multiple disabilities or neurodiversity conditions). Again, making the application more considerate to the user needs will increase the number of users and their satisfaction.
USR2 - 3. Lower bar has a lot of unnecessary functions, to be integrated within the menu or profile and to make lower profile simpler to use. Some simplification took place in the medium-fidelity prototype but further simplification has to be considered.
USR2 - 4. To add carousel for the exhibitions (enhance the UI) and ensure its operation as a dual movement feature (slide towards both directions).
USR2 - 5. The UI buttons design can integrate change of colour while hovering over or selecting the button - component design and integration in the flow (sticker sheet/ design system).
At this stage the Designer's Personal Challenge is going to be integrated into the design, and including the following features:
★ Real-life visit (building) Gallery user flow to be integrated in the application (QR code feature to be added, for scanning various Exhibitions/ Exhibits, etc.), for the visitors at the real-life (building) Gallery.
★ Extending the design to encapsulate the Hamburger Menu and Profile (including some profile features) as an additional user flow. This is the flow where the findings "USR1 - 2" and "USR2 - 3" are going to be embedded.
Revised Sitemap (R2)
The latest usability study findings (R2) and combined with the Designer's personal challenge requirements, have triggered the revision of the sitemap diagram to include the features shown below:
★ Real-life visit (building) Gallery user flow (QR code scanner).
★ Accessibility features to provide multiple selections.
★ Top bar additional flows - to include Hamburger menu and profile features and flows.
★ Low bar simplified to mostly guide the users to the 4 prominent flows:
✦ Virtual Gallery - Main user flow
✦ Real-life (building) Gallery
✦ Accessibility - Languages
✦ Accessibility - Assistive Technologies
Key:
1. All revised and new items are shown in yellow.
2. Items added in previous design iterations and the usability study (R1) are neutralised and shown in shades of burgundy.
Digital wireframes (R2) - templates
The typical application templates were revised in accordance with the usability study findings (R2) especially items:
★ USR2 - 1
★ USD2 - 3
★ USD2 - 4
★ USR2 - 5
I made sure to simplify the layouts and to encapsulate a few features in the Hamburger menu and Profile. The low bar has been revised to include quick links to the 4 prominent flows (as shown in the Revised Sitemap (R2) diagram). Last but not least, some UI elements were incorporated such as some indicative thematic photos and exhibit information zone for each photo.
Key:
1. All revised and new items are shown in yellow and mustard.
2. Items added in previous design iterations and the usability study (R1) are neutralised and shown in shades of burgundy.
Digital wireframes (R2) - user flows
Below are shown the new and revised user flows (excluding main user flow) as static wireframes, where the (R2) revisions are shown in yellow and mustard colour.
The most important iterations are:
★ Addition of real-life visit (building) Gallery user flow.
★ Accessibility features extension, to provide multiple selections.
Digital wireframes (R2): Real-life visit (building) Gallery user flow - static (graphical representation)
Key:
1. All revised and new items are shown in yellow and mustard.
2. Items added in previous design iterations and the usability study (R1) are neutralised and shown in shades of burgundy.
Digital wireframes (R2): Indicative Accessibility (Assistive Technologies [AT]) user flow - static
(graphical representation)
Key:
1. All revised and new items are shown in yellow.
2. Items added in previous design iterations and the usability study (R1) are neutralised and shown in shades of burgundy.
★★★★★
Refining the design
UI design elements: Sticker sheet (Design system)
At this stage, the design has been evolved into 4 flows/ segments including the main user flow. In order to visually distinguish between each other, new thematic colours were introduced to help the user navigate around visually and cognitively:
★ Burgundy - Main user flow: Virtual Gallery
★ Black - Real-life (building) Gallery user flow
★ Cobalt Blue - Accessibility: Languages user flow
★ Teal - Accessibility: Assistive Technologies user flow
The yellow colour was evolved as an accent colour to enable UI and to bring forwards interactive elements, mostly.
Highlighting the Accessibility requirements, all call-to-action (buttons) features were revised and to be in accordance with the WCAG minimum requirements of 44px.
Mockups - templates
Approaching the high-fidelity phase, the basic templates build in the design are the following:
★ Homepage
★ Virtual and real-life (building) Gallery visit - very similar templates but different colours to be visually distinguishable to the users.
★ Information (Art History) - the same template for the virtual and real-life (building) Gallery visit but different colours.
★ Interactive activity - the same template for the virtual and real-life (building) Gallery visit but different colours.
★ Accessibility - Languages and Assistive technologies have very similar templates but different colours, again to be differentiated from each other.
★ Profile - Art Gallery branding is more prominent in the background and the low bar design is different to the rest of the templates (and user flows).
All templates were revised in accordance with:
★ First round usability study findings (R1).
★ Second round usability study findings (R2).
★ UI design elements - sticker sheet (design system).
High-fidelity prototype - static*
The high-fidelity prototype design has been evolved by incorporating the following parameters:
★ First round usability study findings (R1).
★ Second round usability study findings (R2).
★ Latest Sitemap diagram (R2), where all flows are incorporated.
★ UI design elements - sticker sheet (design system).
★ Designer's Personal Challenge.
All user flows (5 in total) are integrated and calibrated within the application. Additionally, the hamburger menu and profile features user flows were added to provide a more holistic user experience.
Five user flows:
★ Main user flow: Virtual Gallery
★ Real-life (building) Gallery user flow
★ Accessibility: Languages user flow
★ Accessibility: Assistive Technologies user flow
★ Hamburger menu and Profile user flow (mostly a matrix structure) and contains the following elements:
✦ Hamburger menu:
✱ Virtual Art Gallery uploads portal
✦ Profile:
✱ Your Art
✱ Your Messages
✱ Your Languages
✱ Your Assistive Technologies
✱ Your Personal Details
✱ Your Payment/ Card Details
✱ Your Membership
The UI elements (graphics, visuals, triggers, interactions, motion, animations, etc.) are embedded to all user flows to ensure visual coherence and continuity. Major emphasis was given in bringing forward the brand's identity by creating atmospheric visuals that trigger emotional reactions. On the practical side, visual contrast and the size of buttons and text were tested thoroughly to ensure a legible and pleasant visual and experiential environment. Last but not least, a plethora of motions and animations were build in to make the product even more engaging and capturing.
*static = graphical representation
High-fidelity prototype: All user flows - static (graphical representation)
Key:
Yellow is an accent colour.
Accessibility Considerations
★ Accessibility features (Languages and Assistive Technologies) are embedded in the application, since its conception, that solve the problem and reflect the goal of inclusivity and problem statement.
★ All call-to- action (buttons) features are compliant with the minimum WCAG requirements (44px)
★All call-to-action (buttons) features provide UI interactive design elements to create visual, motion and animation effects, hence enabling the users to be more aware of their chosen actions.
★ Visual contrast is integrated in the design to ensure clarity of information and readability.
★★★★★
Going forward
Takeaways
Impact:
The Future Art application is a ground breaking idea and a pioneer application due to the integration of Language and Assistive Technologies features. The institution truly hopes that this product will bring a lot of involvement and engagement from various groups and it will democratise art by making it widespread accessible.
Quote from usability studies:
“I found the interactive activity task very exciting and loved the various settings. It will help me unleash my creativity"
Learning Outcomes:
Generic:
This was my first UX/ UI project and I have learnt a lot of theory, methodology, practical and technical skills.
It has been a very steep learning curve and I invested a lot of time learning and repeating some steps so I can fully understand and implement them in the near future. I still heave a large amount of information and practices to learn, and looking forward to work in real-life projects within the technology industry. I have a lot of ideas and I would like to see if I can make some impact in improving the UX/UI realm for the potential users.
Apart from the actual theory and design of the application, I spent multiple hours learning how to use figma, how to build components and bring all design parameters in a more holistic way without overwhelming the user.
Application Specific:
★ I found the usability study findings very surprising in some instances and ideally I would like to conduct a few more studies and testing in order to further improve the product.
★ The brief started as a virtual Art Gallery application, but then it was expanded to include the real-life (building) Gallery. The information is already online, hence the institution can utilise the application to make the visitors aware of the product and to be used within their premises, as well. Additionally, this has a few more benefits, such as less printing for brochures and exhibition/ exhibits information, and so on.
★ I found that incorporating vulnerable users in the design required some special measures (such as visual content warnings) and this requirement had to be integrated at the very early steps.
★ Accessibility, diversity and inclusion are some topics I am very passionate about and I tried to bring them forward since the very early stages. However, I followed a more arbitrary approach and I would like to get some more formal design training on the particular subjects.
★ Apart from accessibility, I would like to integrate more neurodiverse appropriate design. I know this is a very early stages opportunity and loads of research has to take place, but this is another significant group of potential users.
★ Figma technical issues:
✦ I grouped some elements such as the lower bar, and then I couldn't add the connections to the individual button (return button). I added the connection to the whole group. Further down (in my 2nd and 3rd projects) I resolved it.
✦ There must be a Figma bug, in the carousel connections. Although I add the the right type of trigger and interaction, then it changes to another interaction (without altering anything from my end)
✦ When I test the prototypes on my desktop/ laptop they work properly, but when testing them on my tablet and mobile phone some buttons are not working. I have contacted Figma and awaiting for a response.
What I could have done better:
★I kept designing and redesigning the application numerous times to include all required features and parameters, possibly next time I can be more organised by creating a list with all the visual, technical and feature parameters.
★Due to lack of experience in Figma (first time user) I spent numerous hours experimenting with ideas and graphics. Hopefully next time I am going be more experienced and it will take less time to design the technical parts of the product. Especially the sticker sheet, I had to redesign a few times to ensure compliance with WCAG and visual branding.
★ A Language feature has been integrated but I didn't consider the requirement for an online/ offline translator. This is a very good opportunity for people that are interested to learn English through Art.
★ I haven't considered the requirements of log in/ access/ security features. Especially for those people that are participating in the interactive activities then they have to save and load their art on their profile and post it in the public virtual gallery "Cosmos". This has multiple levels of complexity as content has to be age and group appropriate, and possibly universal and user dependent filters have to be applied in advance.
★ Intellectual property rights is another parameter that I haven't considered especially for the users that create and upload art in the public domain "Cosmos". Possibly a few more frames have to be added before posting their art to ensure compliance with legislation and GDPR.
★ I haven't considered any dark mode design options and right/ left-handed users. This is something to be considered in the following revisions.
★ I am not sure if this application is functional for both operating systems - Android and iOS. I have integrated a return button to all frames, but I think the Android devices don't need it, as the "return" function is done through the device button (lower right button in android devices).
Next steps
1. Conduct a third round (R3) usability study to test the application in a more holistic way.
As mentioned before, I would like to recruit mostly vulnerable users and edge cases (especially neurodiverse users).
2. Create additional frames in accordance with Sitemap (R2), and having a fully functional product.
To fully understand how a complete products looks like and functions.
3. Simplify the design by creating some more components and interactive elements.
Some of the components have disabled the use of buttons and I would like to sort out the Figma technical hierarchy.
Possibly this is because I am still learning Figma, but I would like to understand the different design requirements and potential issues, and to design a product that is aligned to the engineers and developers technical specifications.
Conclusion
This projects has been a unique opportunity and learning curve to bring forward my theoretical and practical skills, knowledge and (minimal) UX/ UI experience. However, I have thoroughly enjoyed all research and design stages. In the past, I have attempted to design some frames for websites and applications (as a hobby), but I was ignorant of all the theory, design and technical parameters to consider. This particular project has been a catalyst in my learning and design experience, and as Art is my hobby I found the creation and ideology behind this application very interesting and fulfilling.
In the next few projects, I would like to keep developing my skills and evolving as an all-round designer. At the same time I would like to discover my specific area of interest and gain more experience there, too.
Thank you for your time! ✿◠‿◠
★★★★★
More Projects
Page updated
Google Sites
Report abuse