You can view the prototype by clicking here.
Overview
The Background
Welike Art is an application that introduces the artists' artworks to the world online thanks to augmented reality technology. For the average consumer, augmented reality (AR) is flashy and attractive but not practically useful. Though not the first to develop an AR Painting app on the market, Welike Art intends to create a purpose for emerging technology and tailor features to inform the user experience. Also, Welike Art is aiming partnership with artists in Canada and bringing art galleries right inside people's homes.
The Challenge
Welike Art requires a new interior design app that effectively uses an AR feature to help customers select artworks, visualize them in their rooms, and purchase them confidently.
Project Summary
Welike is an augmented reality (AR) interior design app. It allows the user to buy artworks from well-known or amateur artists in Canada. Welike Art is looking to provide a better experience visualizing paintings on their customer's wall.
Duration
4 Months
The Solution
Welike Art is an app that allows users to select artworks from its catalogue and see them on their wall thanks to augmented reality technology.
Tools
Adobe XD | Illustrator | Photoshop | Reality Composer
Client
Welike Art
Role
UX/UI Designer
“ I enjoy visiting art galleries and purchase abstract artworks. My aesthetic environment is really important to me.”
— Amanda, Interview Participant
RESEARCH
Market Analysis
With the requirements from the project brief and research plan in hand that served as a guide that followed throughout the research phase, I started my research with Market Analysis. To start this project, it was essential to establish an understanding of the paintings, current target demographics and AR/VR trends in the interior design apps. Key takeaways are:
Competitor analysis
To better understand current AR interior design apps and determine Welike Art's brand positioning, I selected and analyzed three major apps in the market. Through this research, I found that if Welike Art could provide intuitive and accurate AR views with a large catalog and a checkout feature, they can differentiate themselves and succeed in the market. The reason that all these apps either focus on an e-commerce feature or the AR feature, and no apps offered equally balanced features. I also found that the most of the apps lack accurate visualizations for their AR features.
“Every great design begins with an even better story.”
— Lorinda Mamo, Designer / Creative Director
USER INTERVIEWS
To understand and articulate customer expectations and needs, I conducted a variety of interviews. I recruited people who purchase art paintings online and are also interested in new technology; this audience would ideally have an aesthetic eye for the home decoration since they want to find the best painting to match their rooms. This group’s impressions about the AR feature were overall positive. I noticed that there were still potential opportunities to solve customer problems by providing an intuitive AR view for accurate visualization.
I interviewed 10 participants and collected more than 100 pieces of feedback. The participants' average age was 35; out of 10 participants, 6 identified as female and 4 as male.
Here are the top findings from these feedbacks:
1) 5/10 of the participants are not just buying something that looks good; they love the idea of becoming an art collector.
2) For all participants, aesthetic appearance and the meaning of an art piece can be impressive to purchase it.
3) 7/10 of the participants prefer to visit an art gallery to purchase an art piece to see how they look in reality, 3/10 of them look for some inspiration on websites.
4) Participants wouldn’t like to spend a fortune on a painting. Even though it has a great look, it should be affordable for their budget.
5) It is a challenge for all participants to buy the right painting for their place in terms of physical, style and appearance fit.
6) 3/10 participants purchase art pieces online, but none of them use an application for this. It is easy to buy online, but always hesitate that painting may not actually be the same as on the website.
7) All participants indicated that they would like to make a purchase at home, but they want to make sure that the painting meets all their expectations.
8) Half of the participants would like to share their ideas with partners or friends to get their advice about the art piece.
9) During the pandemic, it is definitely difficult to go out and visit art galleries.
10) All of them replied positively when asked would they use an application that can provide all functions they need while purchasing an art piece.
UNDERSTANDING AUGMENTED REALITY (AR)
As a UX/UI Designer, I wanted to understand AR technology better. I read articles and analyzed principles of AR designing. Moreover, I used some AR Programs such as Reality Composer and rendered 3D AR projects. I aimed to discover 2021's AR capabilities.
Reality Composer
Click "Play" button to see the AR discovery
"If you have four hours to chop down a tree, spend the first three hours sharpening your axe."
—An old saying
ANALYSIS
PERSONA
After synthesizing the user research from the 10 participants, a Persona was developed to represent a typical user’s personality to understand their problems, motivations, personality, goals, frustrations and how Welike Art app could fill in those pain-points.
POV STATEMENTS + HMW QUESTIONS
After defining the target user, Tracy, I needed to better understand how I can help Tracy with Welike Art App and its features and functionality. I created point-of-view statements and how-might-we questions to help encourage solutions for those needs.
STRATEGY
BUSINESS AND USER GOALS
After a short brainstorming session I compared initial business goals with goals of the user to identify what’s common between them. This helped me to focus on the features that satisfy both business and user.
PRODUCT ROADMAP
Once I gathered all the potential features, I created a product roadmap focusing on a few of those features presented. Below is a list of features chosen for each of the how-might-we questions.
“The next big thing is the one that makes the last big thing usable.”
— Blake Ross, Co-creator of Mozilla Firefox
INFORMATION ARCHITECTURE - APPMAP
After outlining the features and priorities in product roadmap, I created appmap of Welike Art. This helped me in visualizing how each page would be connected, and how users could potentially navigate through the application.
DESIGN
USER FLOW
I created a user flow to better understand the efficiency of Welike Art. Below you can see the whole process of choosing the right artwork and purchasing it through the app.
choosing the right artwork and purchasing it through the app
SKETCHES
I created sketches to showcase the visual hierarchy and structure of elements for the initial screens.
Low-fidelity wireframe
Once I designed the app on paper, I moved to the next step and created a low-fidelity wireframe.
HIGH-fidelity wireframe
KEY SCREENS
PROTOTYPING AND TESTING
I built a prototype with Adobe XD. The challenge was to try to simulate the placement of artworks in AR with gestures that felt natural.
Unmoderated Remote Usability Test
Due to Covid-19, I conducted an unmoderated remote usability test. I used the Google Form for our screener survey and Loop 11 software to run the research and collect our participants' data. I asked them to record their screen and allow voice recording through Loop 11. Also, I asked them to think out loud while completing the task. The screener survey was sent to our networks, and I recruited participants. 30 participants filled out the screener survey, and among them, 5 participants were eligible to run the research with us. I created a prototype in Adobe XD and added the following tasks to Loop 11:
THE TASKS
Participants were asked to follow this task list flow:
1. Sign up for an account.
2. Browse and navigate to find a painting via the masterpieces category.
3. View the artwork in 3D mode.
4. Purchase the selected artwork.
TEST GOALS
• Identify the pain-points of the app’s features and task flow.
• Gather feedback ranging from user’s navigation through the app to ease of the
application’s process to search and purchase.
• Observe how the user flows through the app to find and purchase a painting.
• Discover what interests the user about the app. (i.e., visuals, tasks, flow, etc.)
AFFINITY MAP
After conducting the usability testing, I was able to identify key insights and generate the top recommendations from test users through an affinity map. Taking these recommendations, I now had areas of the app I could improve upon, making for a better user experience.
UI DESIGN AND ITERATION
“UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse.”
— Dain Miller, Web Developer
STYLE GUIDE
Once I began prototyping, I maintained a UI kit throughout the process to document UI elements and patterns for future reference. I created all elements using Illustrator and Sketch for use in my high-fidelity wireframes.
ITERATION
The high-fidelity wireframes and the prototype were updated based on the design recommendations. I gathered the feedback from my usability testing through the use of an affinity map. The findings discovered helped me make key adjustments to my screens for the wireframes. I also began putting my research together for coming up with Welike Art's brand and overall design.
Drag the Slider to see the previous design
NEXT STEPS
The next step of this project is to add more features, such as add live help chat. Also, I will consider adding services including “Frame customization,” “Professional consulting,” and “Artwork Community” I will discuss challenges with developers and engineers with AR capabilities. I will continue user testing and gathering data. Besides, I will continue improving the UI Kit based on feedback and adjustments made to new features
LEARNINGS
I enjoyed this project because of its creative opportunities, and it helped me deepens my knowledge of Augmented Reality and its uses. After I did user interviews, I found out that many people agree that the AR feature would help their painting buying experience; however, most people do not take advantage of this new technology. In this project, I faced many challenges in usability testing of the AR feature. It was hard to convey AR features on the wireframe prototype that was not fully developed. I had to ask users to visualize this as a fully functional app.
“If I had an hour to solve a problem and my life depended on the solution, I would spend the first 55 minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.”
— Albert Einstein, Theoretical Physicist
