design your day
A teammate and I designed a microsite for an art festival.
TYPE: ux/ui
GOAL: design a microsite
DURATION: 4 days
client

I completed this project with my teammate, Jessi, for a fictional art festival.

CHALLENGE

We were tasked with designing a responsive microsite for the festival of our choice.

01
RESEARCH

We used mixed methods to collect quantitative and qualitative data and gain insight into our users' behaviors and motivations.

Tools Used
  1. Lean UX Canvas
  2. Competitive feature comparison
  3. User surveys & interviews
  4. Affinity map

lean ux canvas

We used a Lean UX Canvas to get a big picture overview of my process. We decided to target users that attend art events. We started by trying to learn what motivates our users to attend art-related events and what frustrates them about art events.
business problem
Art festival attendees feel they have to sacrifice comfort to find and see art they appreciate.
business outcomes
1. Higher attendee satisfaction
2. High number of attendees
3. Longer time spent at event per attendee
users
1. Art lovers
2. Artists
3. People who attend festivals
user benefits
1. Discover new art to love
2. Have fun
3. Feel personal connection to art and artists

competitive feature comparison

We conducted secondary research before talking to users to identify gaps in the market and potential opportunities for our art festival. We learned that many art-related events don't provide an easy way for attendees to plan their visit beforehand and know what to expect.

market positioning chart

We created a market positioning chart to identify a "blue ocean" or a gap in the market. We discovered an opportunity in a solution that is somewhat upscale while also offering a personalized element.
survey & interviews

We sent out a survey to learn gather quantitative data on our users' habits and behavior and received over 70 responses. To gather qualitative data and understand the motivations behind our users' behaviors, we conducted 6 user interviews.

Motivations

70% of users said they attend art events to support the artists. A majority of users also said they attend art events looking to be inspired and have a meaningful experience.

Needs

Many users complained that art events are often too crowded which makes it more difficult to have a comfortable experience and see the art. Other users complained about a lack of food options and seating.

Experience

A majority of users expressed a desire to connect with the artists behind the art.

affinity map
"It is great when the environment supports the art. the event is a fully sensory experience."
02
define

We continued to synthesize our findings and pull out key learnings using several tools in order to generate problem statements.

Tools Used
  1. Value Proposition Canvas
  2. User Journey Map
  3. Problem Statements
value proposition canvas

We used a value proposition canvas, starting with the customer profile to assess customer jobs, pains, and gains. We identified obvious jobs such as "see art", but we also identified social and emotional jobs. Art festival attendees want to connect with the artist, visit with friends, and have a meaningful experience. Physical discomfort, crowds, and a disorganized space, get in the way of these "jobs".

user journey map
Our user journey map provided context and revealed several opportunities for design along Our user's journey
  1. When feeling overwhelmed while planning visit
  2. When trying to find and see desired art
  3. When navigating the event and feeling uncomfortable
problem statements

We generated problem statements based on the low-points we discovered in our journey map. We rephrased each problem statement into a How-Might-We (HMW) to keep our process centered on the users and their needs.

HMW #1

How might we improve the physical and emotional comfort of attendees at the event?

HMW #2

How might we help our attendees plan their visit and see everything they want to see without missing out?

HMW #3

How might we help our attendees have fun?

03
develop

During this phase of the design process, We ideated and designed a solution based on user and stakeholder needs.

Tools Used
  1. Brainstorming
  2.  Impact vs. Effort Matrix & MoSCoW Method
  3. Jobs-to-be-Done
brainstorming
feature prioritization
impact vs. effort matrix
We arranged our brainstormed feature ideas on an Impact vs. Effort Matrix to determine which features bring the most value to users for the least effort. We determined a feature to be "valuable" if it met needs or desires expressed by users.
moscow method
We continued to prioritize our brainstormed features by sorting them into 4 categories: must-do, should-do, could-do, and won't do. Must-do features are necessities according to user and stakeholder needs. Won't-do features are either unnecessary or out of scope.
value proposition canvas
We revisited our Value Proposition Canvas, focusing on the client side. We used this tool to assess product-market fit and ensure that our proposed solution aligned with our findings and stakeholder requirements. We confirmed that our features geared towards attendees' comfort and ability to connect with the art best met needs and wants discovered in our research.
minimum viable product (mvp)

Our MVP was designed to satisfy user needs and wants while aligning with the "blue ocean" we previously identified.

user needs

Our MVP includes features to prioritize attendees' comfort including the option to reserve comfort stations and a festival app that provides navigation and information on the level of crowds at each exhibit.

user wants

Attendees have the option to attend virtual meetups with their favorite artists prior to the event. At the event, users have access to a personalized recommended schedule and a curated playlist chosen by the artists.

blue ocean

The Blue Ocean we identified previously is personalized and upscale. Our MVP is highly customized and aimed at providing a high quality, upscale experience for attendees.

user flowchart

This flowchart maps the user flow for an art festival attendee planning their visit using our microsite then attending the event and using our festival app. The green path represents the "happy path" that I expect and want the user to take. In this case, the ideal path is a user planning their visit and following their recommended schedule during the event.

04
deliver

During the Delivery phase, We began designing our solution and tested with users to identify problems in layout and ontology. We created low fidelity mockups for our desktop and mobile solutions to mitigate risk by finding issues quickly before investing too much time.

Tools Used
  1. Low fidelity testing
  2. Medium fidelity testing
  3. Visual Competitive Analysis
low fidelity testing
Task: input preferences and receive custom schedule
  • 6 users tested
  • Misclick rate during beginning of task: 50%
  • Misclick rate finishing task: 83%

Several screens confused users as they tried to input their preferences. Talking with users revealed that the visual hierarchy did not make sense to them and did not align with their mental models.

medium fidelity testing
Task: input preferences and find exhibit at time of event
  • 5 users tested
  • Misclick rate while inputing preferences: 60%
  • Misclick rate while finding exhibit: 100%

In our next iteration of prototypes, We made more educated decisions on layout, including making buttons more obvious and the ontology clearer. Our misclick rate was still high, so we further refined our layout in the high fidelity prototype.

visual design

My teammate and spent a significant portion of our process ensuring that our visual design met our brand attributes and made users feel the way we intended.

brand attributes

Jessi and I chose five words to represent our brand based on our features and intended audience.

  1. Personal
  2. Customizable
  3. Upscale
  4. Engaging
  5. Unique
moodboard testing

I created a mood board to reflect our chosen brand attributes. We tested it with users to see what emotions and words the mood board evoked for them. My teammate and I asked users for their rationale behind their word choices and learned that the image of a woman in the upper left made the board feel more feminine than I had intended.

words chosen by users
  1. Fresh
  2. Trendy
  3. Glamorous
  4. Feminine
  5. Contemporary
style tile testing

In our style tile, I made an effort to make the design feel less feminine and luxurious with darker colors and stronger fonts to better reflect our brand attributes. This time, the feel of our design was fairly close to our brand attributes. However, the design still came across as feminine to users, which I kept in mind as I designed the high fidelity prototype.

words chosen by users
  1. Fresh
  2. Upscale
  3. Feminine
  4. Fashionable
  5. Contemporary

Users can use the festival microsite to input their preferences and receive a customized schedule for their time at the event. I used progressive disclosure in order to avoid overwhelming the user with information. I also made sure that users are able to opt out of decisions and go straight to ticket purchase if they prefer.

high fidelity prototype

I created the high fidelity prototype for our desktop site while my teammate, Jessi created the prototype for our mobile app. In the final design, I attempted to make the design more unique and engaging by using interesting shapes and bold colors. Our mobile app is designed for use at the time of the event.


High Fidelity Prototype Link
success & failure metrics
Jessi and I chose several metrics that would indicate whether our solution is successful. These metrics are centered on user satisfaction.
metrics for success
metrics for failure
  1. Increase in ticket sales
  2. Increase in duration of guests' visits
  3. Low bounce rate
  1. High churn rate
  2. Decrease in time spent in app
  3. Low app ratings
next steps
As this was only a four day sprint, there were a lot of features that Jessi and I didn't have time to execute. In particular, we would have liked to conduct additional testing on our mobile app and polish our designs to ensure logical visual hierarchy, proper alignment, and consistency between our desktop and mobile screens.
key learnings
choose brand wisely

We chose brand attributes that were somewhat ambiguous, which made testing our mood board and style tile more difficult.

design takes time

It can take a while to get your design to align with your brand in the eyes of users.

iteration is valuable

We learned so much with each iteration of testing both for our prototypes and visual design.

other projects
gaming frog
I worked with Gaming Frog to improve their UX/UI and increase their user retention.
add a feature
I used the design double diamond to design a feature for Pinterest and bring value to users.
Let's work together

I am currently open to new opportunities. Reach out if you would like to work with me or simply want to chat!

CONTACT ME