InArtist

UX and UI Design




InArtist is a web application that allows artists to connect wherever they are in the world. Their target audience is artists, art lovers, art galleries, and studios.


My Role : Wireframing | User Testing | Maintaining Brand Consistency

OBJECTIVE

01

The primary focus was for improving the User experience of the website. This was based on strategic planning and a design vision that focuses on company goals.

I assisted the founder with redesigning the current information architecture. I led efforts to evolve the service and address customer painpoints related to getting on-board with inArtist.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of Inartist.

THE APPROACH

02

I did an analysis around how communities are built in the digital space and what participants expect from these platforms.Along with the team, we did a parallel study of competitors based on community building and inspected the website assets that were a primary requirement to increase community engagement.

Site Audit

I volunteered to conduct a site audit to evaluate the current information architecture of the website. This helped me to further understand the goals and requirements of the company.This exercise also helped the team to realize how much content was showcased and this resulted in a discussion regarding content strategy and finding the MVP.

Current Information Architecture

Customer Insights and Ideation

I worked with the developer and marketing head to understand the customer behavior while clicking through the site and paid close attention to the google analytics to uncover insights and translate findings into not just features but larger goals that address customer behaviours and motivations.

Strategy and Vision : The strategy that we opted was to focus on a particular target audience as currently the site catered to a large variety of personas.

PERSONAS

03

In order to address the above strategy I presented the technique of creating personas. This helped the senior stakeholders to address a specific set of users and align the MVP to meet their needs. According to the stakeholders,people visit their website to share information about ongoing projects, learn about upcoming events, and read stories and engage with other artists.This answered the question What people do in the website.
But this did not reveal Why people visit the website in the first place.

User Research through Interviews

During the first Event hosted by InArtist on 15th March 2018, I started talking to the attendees to understand "Why" they wanted to be a part of InArtist and what they expected from the platform. I conducted qualitative research through open ended questions like-

"What does community mean to you?"

"As an Artist would you share your work on public platforms which meant open criticism?"

"Why do you want to meet other artists?"

The discovery phase was a quick, high‐intensity effort that allowed us to audit the existing work, review the competitor landscape, and begin research into user needs, behaviours and pain‐points.My research revealed that the concept of 'community' represented something different to users at different stage in their art as a career or a hobby. Users' motivations for community participation differed, hinting at different requirements.This helped me create the three Personas.

Persona 1

Persona 2

Persona 3

After designating persona types and aligning this with our strategy we were able to prioritise who we would be focusing on supporting in the early stages.
This led to a brain storming session of the list of features and functionality that could be included in the development of the platform.We re-evaluated the existing features and functions that were offered in the platform and I conducted a card sorting exercise with the stakeholders to priortitize the platform to the above personas.

The list of features and functions were segregated under Three sectors - Business Value | User Value | Technology Value.
Each of these values were rated on a scale of Low, Medium and high priority in order to focus on an MVP approach.

PROCESS

04

Features and Functionality

Features and Functionality matrix based on Business value | User value | Technology value ( Note :The entire feature matrix cannot be shared due to NDA)

Hierarchical Task Analysis

The central task that stood out during the interview process was participating in discussions within the area of interest. My next step was to visualize the user journey of one of the participants. He was asked to look for a specific topic and comment his view on the discussion.

User flow Diagram for the task : Add you comments for the conversation regarding "Importance of materials in Sculpture".

The Study -

We conducted more such studies to understand the thought process of the user while navigating the site. I realized that -
1- There were confusions regarding naming conventions currently followed in the websit.
2 - There were multiple ways to reach the destination to complete the task. This frustrated and confused the user.
3- Lack of breadcrumbs and other indications resulted in the user to be lost within the Site navigation.

Proposed Information Architecture

Proposed (Version 1) Site map

There was a staggering amount of content to be re-organized. This was accomplished by going page by page and re-grouping the content based on the MVP approach with respect to the features and functions.

I presented a site map addressing the current issues with the information architecture. I created prototypes to share the vision, evangelise ideas, achieve alignment and drive decision making.

Sketching and Prototyping

Quick sketching and low fidelity prototyping helps in making quick design decisions, I kept in mind everything I had collected so far - personas, their pain points during the current user flow. I started visualizing by roughly sketching out concepts. I was able to obtain some heuristic feedback from my peers before starting high-fidelity design.

During the study I realized that the "people" was the driving element in the platform. I decided to give a visual struture to have the system fuction well and integrate the fact that "everything is about the artist and not just the art".

Creating visual structure through Wireframing

Providing Home page with a clear set of goals was a very essential approach to the user flow. The home page was the heart of the web application as the uers engaged more from this page. The two primary factors that were kept in mind while doing this version of the high fidelity prototyping, was - 1 ) To provide affordances ( Visual guides) to allow the user to navigate the web application without confusion.
2) Was to give enough references which indicated where the user was within the Site architecture.
We are constlantly testing and re-iterating the wireframes to better enhance the exxperience of navigating the website.

High Fidelity prototypes examples for some of the primary pages

Incorporating brand guidelines

The brand guidelines were constructed on their current logo. Though we made quiet a few changes from the initial brand guidelines, It was a gradual change that will eventually be reflected on the website as well. Currently the website is on Version 1 regarding branding.

Below are few of the initial proposals and suggestions made for guiding the User interface of the website.

Brand colors that were incorporated from the Logo

These colors were used as accent colors to highlight buttons, links, and important elements

These colors were used as accent colors to highlight buttons, links, and important elements

Icon designs and proposals for "Indicators" - Verified artists or Curators on the platform

Iteraions for various header proposals

The website design is currently at a stage where it is undergoing continuousS changes and iterations. These are few prototypes and sketches shared from the earlier versions. To know more about the approach and proceedings, mail me or lets meet over a coffee.