UX/UI | Interaction Designer
header4.jpg

KonoKona: Helping Artists Obtaining a Booth at Conventions

 

KonoKona: Helping Local Artists by simplifying the process of getting a table at Artist Alley

Platform: Website & App
What: Customer Facing Website, CRM
My Role: UX/UI + Branding + Content Strategy
This is my Graduation Project for Emily Carr University of Art + Design

 
 
Untitled-1.jpg

Design Definition

Context:

Have you ever been to a farmer’s market, craft market or anime convention and wondered how the farmers and artist’s got there? It actually an incredibly inefficient and painful process for both the artists and the organizers

Problem:

Getting a table to sell at an anime convention is inefficient and stressful because of a communication gap between the artists and organizers.

Goal:

  1. Create a website platform that simplifies the application process for users

  2. Help organizers sort and manage through 600+ application at once


 

Problem: Visiting 20+ websites to apply for 20 tables

Solution: Putting all the conventions on one site

Artists have to visit 20+ different convention website just to apply for tables. Keep in mind they would also have to dig through the page to find what they are looking for.

1440x1024 Light@2x.png

2.+Identify+Problem+%E2%80%93+28%402x.jpg
 

Problem: 20 Page artist alley pages are difficult to read through

Solution: Having all the key information on one page for users to make a decision

Understanding the key information that users need to make a decisive decision on whether they want to attend a convention or not.


 

Problem: Users has repetitive process of filling out forms over and over again

Solution: Easy application process without repetitive forms

I simplified the application process by separating user’s personal information and convention information into two separate areas.

wireframes3.png

Spreadsheet style layout – 44.png
 

Problem: Organizers are sorting through 600+ applications manually through email

Solution: A CRM that easily process over 600+ applications

Organizers receive over 600+ applications, however they only have 150 tables available. On top of that, communication with artists is done manually through email.

This not only simplifies the process, but also saves the organizer’s time.


 

Responsive

I started my design on desktop because users feared applying for tables on their phones.

By simplifying the application process, I was also able to make it simple enough that the users feel comfortable to do this on mobile

Web 1920 – 64.png

Process:

New Doc 2018-11-01 12.30.40_4.jpg
 

I started the project by interviewing several artists and organizers. I created an affinity map with the information that I obtained from them

 
2. Identify Problem – 19.png

Persona: Understanding the User

After conducting several interviews, I was able to make persona’s of my 2 primary stakeholders, understanding who they are and why it gives them pain points

Web 1920 – 74.png

Information architecture

I created an information architecture, and then highlighted the most crucial flow for the most important features necessary to make a proper website.

 

Initial Wireframes

I wireframed the initial user flow, which gave me further insight on how I should proceed

New Doc 2018-10-12 15.08.18_3.jpg
Web 1920 – 3.png
Web 1920 – 4.png
Web 1920 – 5.png
Web 1920 – 2.png
Web 1920 – 11.png
 

First Iteration

mockups.jpg
 
 

Artist Flow

What worked:

  • The overall flow

  • Artist’s loved how they don’t have to fill out forms about their personal information over and over again

What didn’t work

  • The information could be rearranged for the user

  • have less dialogues

organizer.jpg
 
 

Organizer Flow

What worked:

  • Allowing the organizer to set a payment deadline

What didn’t work

  • The organizer prefers to look at the information in a spreadsheet format

  • There was the artist’s information but completely overlooked the logistic information

  • Too much dialogue


Accessibility

Upon checking my designs for accessibility, I realized that the colors were not passing the criteria. This made me go back to explore color options available and further enhanced the design for everyone.

Before

Before

After

After

The final result contains

  1. Search feature that brings all the applications together

  2. The ability to buy tables with easy to read information

  3. Having an easy form to fill out

  4. Allowing organizers to sort through applications

The final product:

totalwork@2x.png

Key Takeaways

Understanding the importance of a Spreadsheet Layout

The hardest part about this project was learning how I could sort through 600+ applications without looking like a huge mess. What I learned was that spreadsheets are an amazing way to keep track of a massive amount of information.

Thinking of Accessibility

After designing the first mock up iteration, I realized that the color choice I used was not accessible to the colorblind. This made me think more critically about my color choice, understand that accessibility is not an after thought but rather should be considered at the start of my design process.

Not only did it improve my design for those who are colorblind, it improved my design overall for everyone.

Designing for Web and Mobile

Working on KonoKona allowed me to better understand the challenges of responsive design.

Successful Usertesting VS Good Design

After doing countless usertesting, I learned that just because it was successful does not completely mean it was good. My users are tech literate but used to a tedious process. When there were certain features I was able to simplify, the “wow“ I saw on their faces was when I knew the “Aha!“ moment came.