Artwork of Alice
Responsive website for a local watercolor artist to solidify her brand and increase accessibility to her products and services.
My Role
UX Researcher
UX/UI Designer
Brand Designer
Platform
Responsive Web
Duration
Jun - July 2024
5 weeks
Alice Liu is an artist local to Virginia Beach. She works mainly in watercolors, operating through her Instagram account, @artworkofalice, of 14.1K followers.
Alice is only in her 3rd year and recently started gaining traction after finding her niche in teaching watercolors. She’s taught demonstrations for multiple local associations and been approached by galleries and companies such as the Virginia Zoo to sell her work.
Alice expressed to me that she turned down a lot of opportunities because of uncertainty about how to organize her work and set up a real business. She wanted a website to establish her online presence and have a more accessible way for people to find her and purchase and interact with her work.
GOAL
Design a responsive website to solidify @artworkofalice’s brand and increase accessibility to her products and services.
RESEARCH
To begin with, I had a conversation with Alice to better understand the services she wants to provide on her website. She gave me categories that I kept in mind when I would be drawing up the sitemap.
With this information, I had a clearer idea of the kinds of flows users might take through the website and how to target the questions I’d ask the users regarding potential interactions.
What information do people want to know before making a purchase?
What makes people feel satisfied with their purchase?
I took these questions to the users to figure out more about their motivations and needs.
User Interviews
10 participants, remote
I conducted 10 user interviews with potential users as well as some of Alice’s real clients.
I found that there are various reasons for why people make “non-essential” purchases such as art, but the majority of the people who currently follow Alice on Instagram interact with her because they have a personal appreciation for art.
The main trend I found was:
People are more likely to interact with a product if they feel the process is transparent and accessible.
I made an affinity map to have a clearer understanding of users’ frustrations, needs, and motivations pertaining to purchasing and/or learning art.
I now had a better understanding of what users are looking for when they interact with an artist’s website, but since I was working from scratch, I wanted to gain inspiration by looking at a few other artist’s websites who provide similar services to the ones Alice wanted to provide.
I specifically looked for more established artists who offered some kind of courses or learning materials.
Our direction from here ...
The key things to focus on were developing and accurately conveying Alice’s brand, and presenting all the information especially about logistics in an accessible and understandable way.
DEFINE
Now it was time to define our user to better visualize the kinds of needs we need to address.
Melanie is a passionate art lover. Recently, she’s been wanting to redecorate her spaces with art and even looking to learn how to create those pieces herself, but struggles to find art that she resonates with and materials that suit her learning needs.
She needs to feel that she can connect with the artist to support their works, and confident that the learning materials an artist provides is authentic and suitable to her level.
At this point, I knew it was about time to start ideating features and figuring out the flows I wanted to test for Alice’s website, but for the scope of this project, I knew that I would need to focus on a few main flows that would best fulfill Alice’s business goals.
I had another meeting with Alice to figure out the key things she wanted to highlight on her website.
Alice wanted to focus first on making her website a place for people to access her services and resources more easily, making sure to maintain a friendly and personal atmosphere as she does on her Instagram.
IDEATE
I created a quick feature matrix prioritizing mainly based off my user and client interviews.
Then I translated these things into a sitemap. I wanted to make the navigation straightforward and familiar, so I referenced competitor’s websites. Before moving on, I presented the sitemap to Alice to make sure I had the essential navigation points.
From here, I drew up 2 user flows: signing up for a course and submitting a commission inquiry. I wanted to ensure that users would be able to complete these interactions that may not be as familiar as a simple checkout flow.
Let’s Wireframe
I sketched out different layouts for the main screens involved in the flows, focusing on how to order sections and where to place buttons.
Home
Courses
Commissions
Course registration
Commissions inquiry form
ITERATE + VALIDATE
Before I moved onto the high-fidelity wireframes, I wanted to test the flows to make sure that the overall navigation was easy to follow. Though the actual content wasn’t yet in the screens, I put headers and as much text as I could to hopefully also get feedback on whether the users feel that there is enough information for them to make informed decisions, or if I should add more sections.
Mid-Fidelity Usability Testing
4 moderated usability tests, remote
The main trend I noticed was that users really want to have a sense of who they are investing in. They value reviews and authentic feedback to help them feel more secure and informed about their choices.
STYLE + BRANDING
Based on the usability test results, I knew that I wanted to add more details about Alice as an artist and teacher, but I also knew that part of the feeling of familiarity would come from branding.
I wanted to design a brand that reflected Alice’s core values, so I sat down with Alice to discuss the keywords she wanted to convey. She also sent me a few websites for inspiration. I then created a moodboard from the things we discussed, adjusting it as needed with input from Alice, leading us to our final branding.
Overall, I wanted the UI to highlight and enhance Alice’s work. It needed to be something that complemented her work without distracting from it.
When it came to the logo, Alice told me that she likes typography based logos, especially the ones that are circular with a monogram. I brainstormed some ideas centering around the letter “A” and “Artwork of Alice” written around it, but Alice ended up thinking it looked too plain and not cohesive enough.
She suggested adding embellishments to the monogram such as leaves or flowers but I asked if those images would really communicate her brand image. It was at that time that I recalled a unique brush holder I saw that she had. It was a ceramic spherical brush holder with a face on the front and holes at the top from which the brushes poked out of.
She ended up loving this illustration for her logo since it’s unique and iconic to her workspace and also conveys a playful, joyful vibe as she wanted.
ITERATE + VALIDATE pt 2
With the branding in place, I created high-fidelity wireframes and watched the website come to life.
Now it was time to validate our designs again. I was mainly focused on what users overall satisfaction in interacting with the website, and if they felt like there was enough accessible information for them to make decisions.
High-Fidelity Usability Testing
32 unmoderated usability tests, Maze
Signing up for a course
Submitting a commission inquiry
Overall, people enjoyed that navigation was easy to follow and the filling out the forms was very straightforward. The main area to iterate on was the course detail page. Users wanted more details before investing time and money.
Let’s make some iterations ...
Added details about the artist
Users wanted more information about the course and the artist herself to know who they’re supporting before they purchase.
I added a course trailer to give the user a better idea of the work and to be more enticing. I also included a block about the instructor on both the course detail and commissions page to be more personal and welcoming, directing the user to view more on the artist’s about page.
Pricing details
Some people wanted to know more about prices before submitting an inquiry form.
Because prices vary so largely depending on the commission, I didn’t add details on the main page. I talked with Alice and we agreed that it would look too cluttered to have a whole section on the page, so instead I added more details about price ranges in the FAQs and added a dropdown in the form to make it clearer what the typical ranges are for a commission.
FINAL DESIGN
And now I present... Artwork of Alice!
Home
A welcoming home page filled with Alice’s work and links to all the main sections.
Courses
A variety of learning materials including paid courses, free youtube tutorials, and Instagram live events.
Register for a course
Look through the course details and see what past students have said about it. Learn a bit more about your instructor and complete an easy checkout flow to start your learning journey!
Commissions
Browse Alice’s past commissions and FAQs about pricing, shipping, and other details. Submit an inquiry form to get a project started!
REFLECTION
Navigating ambiguity
One of the biggest challenges about this project was understanding what Alice’s vision and goals were. Since she is just now starting to consider establishing a real business, she hadn’t thought in detail about the services she wanted to highlight and some of the things she did want to highlight on her website don’t exist yet, such as Youtube tutorials and courses. Because of this, I had to do a lot more research and discussion to figure out what the content would be not just about how it would be organized and displayed.
Usability begins with the test itself
This was my first time doing unmoderated testing and I learned a lot from it. I was reminded that I need to be super clear in my task instructions while not giving the task away. I need to ensure that what I am testing is the usability of the tasks themselves, not the comprehensibility of the test. While many participants didn’t have any trouble, some of Alice’s real clients completed the test and her audience tends to be a bit older with not as much familiarity about the concept of a prototype. I was reminded to consider my audience even when writing out test instructions or questions.
View other projects
Mobile App
Enabling and encouraging reflection and well-being through an organized prayer journal app.
Web Feature
Increasing productivity and engagement by streamlining scheduling processes.