01. Piksnip


Theme Art Social Media
Tools Photoshop, Illustrator, Sketch, Framer
Deliverable Hi-fidelity prototype
Audience Artists, Art enthusiasts, Art critics
Tags UI/UX Design
Notes Originally a college capstone; currently revamping the project.
Prototype Link

Brief


When posting art on social media, both positive and constructive feedback with substance are often hard to come by. Comment sections of artwork mostly consist of compliments that might as well hold the same value as a click of a “like” button.

As an artist, while I appreciate these positive gestures, I’m also often left wondering why it is that users click “like”. Comment sections are implemented on social media sites to help elaborate on these “likes”, but people don’t take advantage of them for those purposes despite its widespread availability.

As someone who also likes making comments to help other artists improve, I’m also aware that thinking of how to phrase feedback eloquently also typically takes some thought for any viewer, and not everyone has the time to leave comments that may provide something meaningful or useful to the artist.

My goal is to create something that 1)provides something that artists can make more use of in regards to the kinds of feedback they receive and 2)saves time for anyone who wants to provide said critique without having to spend too much time making a detailed explanation describing an artist's work.

Overview of Design Process

  • 1. Research and Heuristics Analysis of the Competition
  • 2. Building user flows and site maps after gathering user expectations from card sort
  • 3. Visualizing ideas and results with wireframes and designing a style guide
  • 4. Creating a hi-fidelity prototype for interactive user testing

Research Survey


Methodology

  • 16 Question multiple choice online survey (includes an optional free response question in the end)

Purpose of Research Plan

  • - To gather information on how artists feel about giving and receiving constructive feedback within online spaces
  • - To identify the key issues that need to be prioritized before working on the UI prototype

Many respondents shared similar sentiments regarding the importance of an online environment where constructive critique can be regularly enabled amongst artists and peers. Many say they primarily expect these types of discussions within classroom settings. Upon hearing about these thoughts from them, I sought to create something that fulfills the niche of such settings, while also allowing artists the flexibility to decide who can participate in these discussions.










Information Architecture


After the research phase with the above survey, I created a card sort exercise for users to organize how they expect information to be laid out. The site map and user flow diagram are made as a result of the card sorting results.

Sitemap





Userflow





Visualization of Information


Wireframes

It was challenging to design the wireframes with both social media and non-social media oriented users in mind. Most importantly however, I wanted to provide options for everyone to toggle on and off certain key settings of their experience in using the application. I still wanted to keep the app relatively simple to use at the same time, so visually I let the most important elements stay visible, with other relevant information hidden under links that explain what certain actions entail.





Developing a Style Guide


Design Elements

Blue, white, and green are often popular choice colors that don’t detract attention away from content. However, I didn’t want the app to look too “medically-oriented” in look and feel, so I opted for a slightly more purple-ish tint to give the blue a more stylish look. I also gave the red color (used for the critique button) a slight pink tint. While the critique in question is intended to warrant attention, the boldness of the conventional red color might come off as more critical than it intends to be.





Prototyping for Usability Testing


Hi-fidelity Prototype

An interactive prototype allows for users to address any issues more effectively. Prototype can be viewed here (best viewed in desktop).

When making an a prototype from the wirefames, aspects such as whether to keep the section name labels under icons on the bottom navigation or not was debated between. I decided to stick with the textless icons since many people like keeping the interface minimal, but if it's in popular demand, it will be something I'll consider for the next update for accommodation purposes.





Post-test Results and Reflection


Of the 6 people interviewed for usability testing, navigating through the app and figuring out the app's main purpose has been a mostly positive experience. However, both social media and non-social media users could not find certain sections quickly. One of my next priorities is to switch the icons causing confusion out for symbols that are more universally understood. Comprehensive results are logged in here.

In future projects, I look forward to also logging user feedback and associating them with each respective versions for more consistent testing before making more fixes. I did a lot of back and forth with people in between working on the project and asking for their feedback, but had the tendency to make changes instantly before asking more people for validation.

The design process has been a successful experience in frequently improving upon initial ideas, all while constantly keeping in touch with everyone else also involved in providing feedback towards the project. To receive more suggestions on how to improve upon the project further was also enlightening, as many people reviewed come from different backgrounds but still share similar and diverse new insights.

Content © 2018 by Phuong Ho unless otherwise stated. All rights reserved.
Please refrain from copying or distributing materials from this website.