Figma, Invision, Sketch, Adobe Portfolio
This is a case study for my capstone project that I completed as part of my education at BrainStation. I designed and produced an app for millennials to collect and join the world of fine art through searching for artworks based on their budget and personal taste. This case study will showcase my entire UX process; Research, planning, ideation, design and high fidelity production.
Challenge
As the art marketplaces continues to rapidly grow, millennials feel a need to join the world of art but are discouraged from joining since they feel overwhelmed and lost. The major factors preventing millennials from joining include: The preconceived notion that art is too expensive, and the lack of proper education.
Role
Role: UX Researcher & Designer, UI Production
Timeline: 2 months
Platform: iOS Mobile App
Approach
Secondary Research
Primary Research Interviews
Affinity Mapping
User Experience Mapping
Wireframe Development
UI Research and Development
High Fidelity Production & Deployment
Results
Artem uses quick user entry and machine learning to understand the users wants and needs in the art marketplace.
Artem empowers new and seasoned art collectors to easily find artworks in a database of millions of pieces that are both subjectively beautiful and within their price range.
Secondary Research
Through extensive secondary research, I learned that...
Most millennials do not have the capital to invest in the most expensive artworks, and therefore would rather invest their capital in emerging artists with the idea that their work will accrue value over time.
Many millennials are discouraged from buying art due to the belief that it is "too expensive", but 2/3rds of millennials stated that they would pay between $500 and $700 for an art piece.
in 2021 80% of millennials art buyers searched for art through social media pages such as Instagram.
Primary Research
I conducted an array of interviews with multiple millennials who are interested in art across many demographics and synthesized all of my findings. Through synthesizing my information I found 4 main themes; Pricing, Value, Education & Online Presence. As most of my pain-points revolved around pricing I decided to focus the artem app on solving the issue of affordability, seeing as though it also went hand-and-hand with my secondary research.
Themes and Epics
Using the chosen themes that arose from my primary research, I created a variety of user stories to gain insight into how a digital solution might facilitate the lives of users. These user stories then informed my main epic, which was "affordability", which in turn led me to my "How Might We (HMW)" Statement.
Persona
In order to begin finding solutions for my "How Might We" question, I created a persona in order to represents all of my interviewees, anecdotal experiences, and art collectors at large.
Meet Aleksandra Skylar. A 32 year old digital marketing specialists looking to dip her toes in the ever changing world of art collecting.
Opportunity Selection
I used my persona, Aleksandra to then create an experience map, which outlines the current process, which she has to go through in order to purchase an artwork. As I created this experience map I found some key points (north stars), which could be valuable opportunities as I began to design my digital product.
Some of the key opportunities were...
An app that allows users to find artworks and learn about the artist without having to switch between channels.
An app that curates a suggestions page using machine learning to gauge their art taste and stay within their budget.
An app that allows users to purchase artworks within the app without having to switch to a gallery's page.
Task Selection
I built simple task flow for Aleksandra to follow in order to guide my creation of wireframes. The proposed task flow shows Aleksandra signing up for Artem, where she is met with a few initial questions such as her basic information, her max budget, and she choose whether or not she resonates with a proposed art piece. After she completes the sign up process she is met with a social media like page where she can view her suggested art pieces, which was generated using machine learning from the signup process. She can then easily purchase an artwork through the artem app.
In the future development of the product, users will be able to connect with other uses, set up their personal art gallery and continue browsing through suggested artworks as the AI learns more about the users likes and dislikes
Wireframing
When creating the wireframes, I knew that I wanted to create an app that feels both modern and professional, yet youthful as well. The purchase of art is something, which should be fun and exciting, but it is also something that requires people to invest a rather large amount of capital. Therefore I wanted to create an app that not only reflects these qualities, but an app that also feels safe, while also feeling exciting.
With this in mind, I began sketching solutions, which feel familiar to Aleksandra's demographic.
I then brought my sketches to life by creating mid fidelity wireframes showcasing some of the main features I wanted to include in the artem app. During this process I conducted ten user tests. Five took place in the first iteration of the mid fidelity prototype and then I conducted five more in the second iteration of the mid fidelity wireframes.
After the completion of a total of ten user tests I had a strong understanding of what seemed to be working, and what seemed to need fixing as I approached the UI stage of the process.
Brand Name
As you can see from the Mid-Fi wireframes the brand name ideation was an iterative process, in which multiple names were created. I began with the name Prism Pink, but it did not seem to portray a sense of art, which led me to a more carefully researched app name.
I decided to call the app Artem. Artem is the Latin word for art. It was derived from Greek culture and means unharmed and in perfect health.
Wordmark
I then began creating the wordmark. I wanted to create a clean and easy to read wordmark, which would perfectly embody the perfection, which is art. To begin this process, I gathered inspiration on existing wordmarks, then I began sketching what I wanted my wordmark to look like, and finally I digitally designed it using Figma.
UI Inspiration
An essential part of the ideation phase was gathering inspiration to create an app, which had a clean and minimalist design, while still being user friendly. The implementation of a Tinder like interface was a fun way to implement machine learning and user preference into the app. I also decided on a simplistic card system for the information collection page and an Instagram like homepage to implement the aspect of community. System-wide decisions like rounding the edges, using neutrals for backgrounds and text are all inspirations, which stemmed from my UI Board.
Tinder Interface
Card System
Budget Selector
Clean Design
Moodboard
I based my moodboard on my personas interests and lifestyle. Hip and artsy, Aleksandra loves to browse around art galleries, while hanging out with friends and learning about artworks and its artists. Using adjectives, ideas and concepts such as comforting, inviting, serene and neutral I was able to source some appropriate imagery and begin setting the tone for this apps visual identity.
Color Exploration
Using my moodboard I collected various color swatches and began selecting my primary color (60%), my secondary color (30%), and my accent color (10%). I knew that the colors had to feel serene and inviting, without taking away from the artworks, as well as have an obvious contrast in order to create a product that passed the AA accessibility standard.
I decided to go with a cream for my primary color, in order to maintain a neutral background. For my secondary color, I went with a fresh green to add that pop of color. And for my accent color I decided to go with a darker sage-like green in order to provide that rich contrast amongst the three chosen colors.
I conducted two rounds of user testing throughout the different stages of development. Using a varied pool of users that are familiar with the iOS platform, but differed in their art opinions. I conducted these tests in a series of 20-25 minute Zoom calls. User's had to walk through the task of signing up for Artem and arriving on the home screen, where they can see their profile information and their art suggestions.
Overall, testing was a success. In the first iteration of the prototype, users struggled with the budget slider tool. They were unsure of which handle to drag, as well as if they were able to manually enter their budget. Another thing that they mentioned was the fact that they didn't have a minimum budget, but rather just a max price.
Along with this major change, there were also a few more minor changes that occured. In the second iteration of the tests users were prompted to add their credit card information during the signup process for faster check out upon completing a purchase, but users did not feel as though they trusted the app enough in order to do so, and therefore removed this part of of the signup process from the task flow. The transition screens also changed. User's believed that there should be more graphics, rather than words. Therefore, I went ahead and added a pie chart, which measures the users progress throughout the signup process.
Upon completing user testing and the development of the Artem brand. I began injecting color and brand elements into a new grid-based build of the app.
Columns (count: 4, type: stretch, margin: 16, gutter: 16
Rows (count: auto, type: top, height: 10, offset: 8, gutter: 18
I then continued to follow the model of my mid-fidelity wireframes, while making some minor navigation changes, while also designing the user interface or the front-end experience.
Below you can find artems current prototype. Feel free to explore its design and features, and if you'd like you to follow along using my persona's task flow, the steps are as follows.
1. Create an account
2. Read through a brief summary of what to expect when using Artem
3. Enter your personal information
4. Select your budget
5. Tap on the "heart" or "X" in order to help our AI curate your suggestions
6. View your artwork suggestions
7. Tap on a piece you like and view its details
To explore Artem from a business and marketing perspective I designed a responsive website for desktop and mobile devices to advertise its features to prospective customers. Designing a responsive marketing website allowed me to understand the importance of product deployment and how it directly correlates with product downloads.
In this stage of the process I learned how to control breakpoints, create content flow diagrams, translate desktop sites to mobile sites, and lastly how designing a responsive website differs from designing a mobile app.
In order to see how the application could be used in different ways, I created a laptop version of Artem. Having a laptop version allows the users to be able to better understand what the app has to offer prior to signing up, as well as viewing artworks within a larger screen.
As you can see the sign up process on this version differs as users will first be prompted to add their name, email and password, and from there they would go through the different steps of adding their budget and selecting art pieces they enjoy.
As I continue to develop Artem, I plan to introduce many new features to users. These features include...
Introducing the art purchasing screens.
Saving the users credit card info upon making their first purchase for faster checkout.
A gallery section where users can showcase the art the own to their friends.
A favorites page for users to revisit works they've hearted.
The fruition of Artem has taught me many important lessons. At the top of the list is the UX process as a whole. Creating Artem allowed me to understand step by step what is needed in order to develop a product as a UX Designer. Amongst this lesson, I was able to understand the importance of research practices and how they enable users to build meaningful and relevant products that facilitate the lives of those around us.
As I see my final product I feel a sense of accomplishment as I recall all the effort that occured in order to complete my capstone project. Artem showcases all my skills as a UX Designer, it demonstrates my capabilities to research, wireframe, user test, UI, marketing and prototyping.
