Role: UX Designer
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Brief: Design an app for Boketto, an art gallery, that allows remote art enthusiasts to find, view and make an offer on artwork.
Tool: Figma
Overview
The aim is to design and develop a new application that facilitates users to remotely view and purchase artwork from a gallery. The primary emphasis is on assessing the user experience related to core actions: browsing, selecting, and placing offers on artwork and ensuring ease of use for all users.
User Research Summary
I conducted interviews and created empathy maps to understand the users I was designing for and their needs. One of the primary user groups identified during this research phase consisted of working adults with limited time for in-person art gallery visits.
The user group confirmed initial assumptions but also revealed additional pain points. Other user problems encompassed concerns about usability, the app's ease of navigation and viewing, and a strong desire for a clear and intuitive progression system for bidding on artwork.
User Pain Points
Time
Working adults are too busy to go to art galleries in person.
Usability
Applications that contain too much information and imagery on a page are difficult to view and use.
Bid progression
Users want a clear view of the artwork’s bidding progression.
Personas
Problem statement
Rita is a senior accountant looking for a sentimental gift. They want to use a mobile app to search for and place an offer on artwork so that they can surprise their husband for their 10th anniversary.
Problem statement
Dan is a newly appointed course leader at a sixth-form college. He wants to purchase artwork from an art gallery so that he can invest his bonus in something and to encourage him to spend some time away from his screen to look at his purchase.
User Journey maps
Mapping Rita’s user journey revealed how helpful it would be for users to have a mobile app for an art gallery, Boketto, to search for and place an offer.
Mapping Dan’s user journey revealed how helpful it would be for users to have a mobile app for an art gallery, Boketto, to purchase artwork remotely.
Paper Wireframes
Each low-fidelity screen was extensively thought out and designed to ensure that elements that made it to digital wireframes would meet the user’s needs and wants identified as part of the user research.
The red dots marked elements and sections that would be used in the subsequent digital wireframes.
Digital Wireframes
Transitioning to the digital design phase, I ensured that the screen designs evolved from the paper prototypes and findings from the user research. My key design goals included addressing the pain point of bid progression clarity and enhancing the overall usability of the application.
Low-fidelity Prototype
The low-fidelity prototype connected the primary user flow of searching for and placing an offer on an artwork. A usability study will be conducted to test the efficiency of this user flow with users.
View Boketto’s low-fidelity prototype.
Usability study findings
I conducted two rounds of usability studies. Findings from the first study guided the construction of refined low-fidelity prototypes and the subsequent high-fidelity mockups. The second study examined the high-fidelity prototype, exposing which aspects needed refinement and, in some cases, if any elements needed to be removed.
Round 1 findings
1. Titles and wording are unclear
2. Make pages more efficient
3. Option to filter
Round 2 findings
1. Confirmation pop-ups
2. Button labels are unclear
Mockups
Before the first usability study, the view in real-time feature consisted of several screens, each containing steps. However, following user testing, I was prompted to integrate all the steps at the beginning of this feature's process. This adjustment allows users to gain an overview and receive prompts for the upcoming steps on subsequent screens, where they can place their favourite artworks in their environment.
Ahead of starting the high-fidelity mockups, additional details were incorporated into the low-fidelity prototypes to provide further guidance regarding the foundational structure of the app.
Initially, the checkout process was spread over several ill-conceived screens. In response to the usability studies, I revised this aspect of the prototype.
Consequently, I reduced the number of screens and compacted the information to be concise and functional. Moreover, a screen enabling users to review their artwork and its relevant details before finalising their offer was introduced.
Accessibility considerations
1. Familiar icons are used to ensure easier navigation in the app.
2. Colours used passed the WCAG AA and AAA colour contrast checker.
3. Minimal but coherent text is used to help users focus on the imagery/artwork whilst giving context to each piece.
Design System
High-fidelity prototype
The final high-fidelity prototype presented an accessible and user-friendly app to purchase artwork from the art gallery Boketto. This prototype fulfils users' requirements to purchase artwork efficiently during their commute or at home. A minimalistic design ensured the cohesiveness of text and imagery, additionally addressing another user concern of indicating which screen the users are on and their bidding progress.
View Boketto’s high-fidelity prototype.
Takeaways & Next Steps
Impact
The mobile app for the art gallery Boketto was designed with the user’s needs and wants in mind.
Peer feedback
“I love this app’s design and layout! It looks easy to use, keeping the focus on the artwork – I’d use this to purchase art.”
“I love this app’s design and layout! It looks easy to use, keeping the focus on the artwork – I’d use this to purchase art.”
What I learned
Throughout the design process, I learned the significance of conducting usability tests with diverse participants and the valuable insights they provided as they worked through prompts and a system usability study. Moreover, forming themes from the participants' insights crucially influenced the ultimate design of this app.
Next steps
1. Conduct a final round of usability testing and a system usability study to conclude if all user pain points have been effectively addressed and if any other pain points have emerged.
2. Continue developing the high-fidelity prototype, working on features like 'Edit your profile'.
End of case study.
Ask to see the process in more depth.
Ask to see the process in more depth.