ARTMONIOUS
The Story
Artmonious is an app that allows people to quickly discover and purchase art tailored to their tastes. Users browse through artwork by swiping left for dislike and right for like (think Tinder meets Etsy meets Pandora). The swiping feeds an algorithm that learns the user's taste and makes tailored suggestions for purchases.
Through user testing the client’s existing designs, and researching their competition we learned that the current design was confusing for users and needed to be simplified. We surveyed over 100 people, conducted in depth interviews, sketched, wire-framed, and created a brand new design through ample amounts of testing and iterating.
Project Details
Role: UX Researcher and Designer
Tools: Pencil and Paper, Sketch, Keynote, Invision, Slack,
Trello
Timeline: 3 weeks
Deliverables: personas, user flow, user survey, heuristic analysis, mood board, c + c analysis, lo-fi wireframes, hi-fi clickable prototype
The Final Design
Minimalist design with clean lines and a muted color palette to put emphasis on the artwork.
Added search feature to gallery so users could quickly find saved art, and we created an in-depth gallery filter to make for easy cart selection
Art on a card so users know it's a separate, swipe-able entity.
Show art as thumbnails to keep the gallery easy and enjoyable to scroll through
Only artist and work name on the swipe screen so the art would be the primary focus. Users can tap the art to get more information
We changed the tab icons because users found the original design tabs confusing
Interviews revealed that users buy art when they have a connection to the artist so we implemented an artist page with tabs for both featured (for business needs) and favorite artists
Users follow artists on social media so we added a button to streamline the connection.
Users can tap to see the full artist info page
My Process
I focus on the user throughout the entire project, constantly asking questions and looking for problems to solve. For Artmonious we interviewed a wide range of users, surveyed over 100 people and tested through a multitude of iterations
There are 3 primary steps I follow for UX design:
1. Research
• Concept Mapping
• Contextual Inquiry
• Heuristic Evaluation
• Competitive Analysis
• Survey
• User Interviews
• Persona
2. Build
• User Flow
• Card Sort
• Mood Board
• Design Studio
• Sketching
3. Test
• Wireframes (low resolution)
• User Testing
• Wireframes (hi resolution)
• Clickable Prototype
1. Research
The Research phase is the beginning stage where we gathered information about both the company and its users.
Heuristic Evaluation
We started by evaluating existing logistical problems with the current app design before getting any users involved.
The issues that came up the most were:
CONSISTENCY AND STANDARDS
“Seems familiar, makes sense.”
-- A lot of elements and navigation in the existing design don't match the standards users are used to seeing.
AESTHETICS AND MINIMAL DESIGN
“Looks good, works beautifully.”
-- The design was complex and felt cluttered.
CONSISTENCY AND STANDARDS
Top Nav bar changes from logo to name to page title to nothing
AESTHETICS AND MINIMAL DESIGN
There was a lot of skeumorphism that was distracting and made it difficult to see the pictures that were for sale
ERROR PREVENTION
The 'add to gallery' and 'buy it now' buttons are the same color
SYSTEMS WORLD MATCH
The 'walls' logo in bottom tabs is misleading and confusing
CONSISTENCY AND STANDARDS
Settings is usually on the top right or under hamburger menu
Competitive Analysis
We then needed to understand the competition for Artmonious
We looked at other existing art apps and found out that almost all of them allow the user to follow an artist through social media. If Artmonious was going to be competitive they needed to include this feature.
User Survey / Interviews
We surveyed over 100 people and conducted 11 in-depth interviews to identify user needs.
Key Findings:
• Users like to have a connection with the artists.
• 89% have purchased art in person, while only 54% have
purchased online.
-they don't feel as safe buying online
-they want to know more about the artist
• Users spend at least 50% less money than they spend in person
when buying art online.
• Users want to get better suggestions for art to buy with more
personal and specific tags (i.e. "if I'm looking at a picture of a
deer, the suggestions will usually be 12 more pictures of deer.")
• Users aren't interested in following their friends' art. Only artists.
Personas
Combining all the information from user interviews, I formed several personas to guide and inform the design process.
2. Build
The Build phase is where I was able to implement all of my gathered research into a visual design.
User Flows
We mapped out the easiest way for users to get from swiping to buying. This informed which navigating was necessary to have in our design
Card Sorting
We began designing our information architecture with a card sorting activity I had users arrange labeled note cards into the categories they thought made the most sense. This informed our primary navigation and settings tab.
We quickly learned there couldn't simply be a 'my account' button, but instead we needed a settings button that would encompass things like 'my orders' and 'contact us.'
3. Test
We did thorough user testing on every iteration until we achieved optimal usability
Sketching
We brought all our research and information hierarchy together and did a design studio with multiple rounds of sketching.
This was a jumping off point for our wireframes. It also allowed us to make quick paper prototypes to complete our first round of user testing on the new design.
Mood Board
I created a mood board to get some direction for the aesthetics of the app.
Since we didn't have a defined existing brand yet, this was especially helpful for informing the color scheme. It also set the mood for something in line with the 'harmonious' vision of Artmonious.
I also made the logo black and white because in user testing many people were confused by the original logo, and thought it looked like Firefox.
User Testing from Sketch to Screen
Starting with the current design, then hand sketches, lo-res wireframes, and finally hi-res interabtive prototype, we performed repeated user testing with a large sampling users for each iteration of the Artmonious re-design. I wanted to make sure the layout made sense and was intuitive every step of the way
HOME (SWIPE) SCREEN
-
At first we removed the bottom tabs to make the swiping process as simple and clear as possible. However, after adding the artist page it became clear that there was just too much involved in the app for there to not be a primary navigation bar. To compromise we made the tabs much smaller than in the original design in order to leave ample room for the artwork.
-
We also put the artwork on a card to make it clear that the artwork was a separate entity from the stationary tabs, thus making it appear swipe-able.
GALLERY SCREEN
We needed to make the gallery cleaner and easier to view, so we stacked the artwork to give each piece it's own space. However, when prompted to search for specific pieces within the gallery users were frustrated by all the scrolling they had to do. Therefore, we turned the images into thumbnails so we could fit more on the screen.