Case Study 1 | Online Auction App
Project Overview
“The Gallery Auction app” is an app for (smaller) art galleries that offers a simple “bidding- /purchase process that can help users bid on and purchase quality art online from anywhere, at any time in a secure manner.
CHALLENGE
People interested in art tend to go to either larger gallery sites (supporting more expensive art) and there is really no online “auction” services for smaller galleries.
GOAL
Design an app that could help smaller galleries to get more visibility online, increasing their brand awareness/sales and at the same time making their art available online to existing and potential users/customers.
MY ROLE AND RESPONSIBILITES
UX- and Visual Designer for the “Online Auction app” from conception to delivery.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on low- and high-fidelity designs.
Understanding the User
I conducted interviews, empathy maps and secondary research to better get an understanding of the users (demographic/s) buying patterns on- and offline for art related items.
USER RESEARCH | SUMMARY
UX- and Visual Designer for the “Online Auction app” from conception to delivery.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on low- and high-fidelity designs.
Pain Points
My assumptions about “art interested” users that would appreciate an online auction/bidding service were all dependent on a secure, simple and safe purchase process. So, not only the bidding part itself but how the payment and shipping could be fulfilled satisfactory.
ACCESSIBILITY
All users have different (pre)conditions which needs to be taken into consideration for both design and functionality.
SIMPLICITY
Many users find it difficult, sometimes confusing, finding quizzes that match up to their expectations. This is mostly dependant on the lack of a well-thought filter functionality, a busy website with too much content or bad grammar.
TIME
Users have different schedules and living patterns which means the user experience should be the same despite time of the day.
AUTHENTICITY
Some of the users pointed out the relevance of a “genuine” bidding experience. Adding the right imagery, sounds and other recognizable elements from a real auction could help supporting that.
Exploration/Discovery
I conducted interviews, empathy maps and secondary research to better get an understanding of the users (demographic/s) buying patterns on- and offline for art related items. My assumptions about “art interested” users that would appreciate an online auction/bidding service were all dependent on a secure, simple and safe purchase process.
PERSONA
All users have different (pre)conditions which needs to be taken into consideration for both design and functionality.
USER JOURNEY MAP
Users have different schedules and living patterns which means the user experience should be the same despite time of the day.
UX Design Process
PAPER WIREFRAMES
Drafting different screens (here the “Dashboard screen) on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the “Dashboard screen”, I wanted it to be clean, simple and easy to interact with and emphasize on the ongoing auction art items. The color framed version below, #3, is the one i ended up finalizing on when moving to digital tool/Figma.
LOW-FIDELITY PROTOTYPE
Using the completed set of digital wireframes, I created a low-fidelity prototype. I wanted to convey user tasks/flows that was relevant to the results from my user research and to be used further in any usability tests or iterative processes.
View the Auction app | Low-fidelity prototype
DIGITAL LOW-FIDELITY WIREFRAMES
For the dashboard screen shown here as the other screens created I wanted to make sure I implemented as much as possible from feedback and findings from the user research to meet expectations as well as for future rounds of iterative processes to minimize any further time constraints.
According to the user research and some of the user concerns about a “secure” and reliable checkout process, (first screen shown here) I wanted to implement a step-by-step feature that would will give the user a better view of the whole process.
USABILITY STUDY | FINDINGS
I conducted two rounds of usability studies. Findings from the first study, using the low-fidelity prototype, helped guide the designs from wireframes to mockups and to focus on specific areas that needed a more user-friendly and better solutions.
The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
ROUND 1 FINDINGS
Non-clickable areas
The lack of a “multiple bidding option”
Two choices for the “Cart page” created redundancy and/or confusion
ROUND 2 FINDINGS
Use more micro-interactions”
Payment method/card should be indicated
HIGH-FIDELITY PROTOTYPE
The final high-fidelity prototype presented extended user flows but met user needs by offering a more engaging and functional user experience such as the “checkout/payment process” as an example.
View the Auction app | High-fidelity prototype
Final Design
Early designs allowed for some customization, but after the usability studies, I added in more info about the art/item itself and an overview of the total price.
MOCKUPS | PAYMENT PROCESS
The first usability study revealed some frustration and confusion about not fulfilling the whole “checkout step-by-step process” I wanted the user to get an as authentic experience as possible, especially through the checkout process. Showing that a purchase has been submitted and accomplished, and also confirming via emailing a verification code (or similar) would give most users, a sense of calm and security which was one of the initial concerns during the user research.
KEY MOCKUP SCREENS
Accessibility Considerations
Expand on item interaction/s to support users “vision” and holistic view about a potential purchase. This include the three features on the bidding page.
Mark/tag visited links or items to facilitate user interaction and speed up accessibility for newer or not yet visited items.
Added entry points for user’s saved items in the menu/under the profile page. (Could extend to offer multiple saved selections due to different variables and the user’s interests).
Conclusions
IMPACT
It seems the app can help (art interested) customers to easier make a purchase in a secure way after going through an engaging experience putting the user in the center.
”Quick, easy process and helpful step-by-step process indicator for payment.”
WHAT I HAVE LEARNED
One of the most important things i have learned working on this project is the importance of collecting data/information (user- ux-/secondary research studies, competition analysis) at the beginning of the project and all along the road to make any iterative process/es as smooth and optimized as possible.
Next Steps…
Another round of usability study making sure the app corresponds to any changes and updates that have been done and meeting up with user/customer expectations.
Implement additional features that would facilitate the user experience even more through design and functionality.
Conduct another round of user research to see how most recent (Next steps #2) works out before “finalizing” the app and ship it to the developers.