Mark Pragides | UX/UI Designer

By

Project Overview

Team Member(s): Mark Pragides, Kaila Quesada, Jordan Moravi

Project Goal:  Redesign an e-commerce website.

Duration: Two weeks

Role:  UX Designer (all roles)

Tools: Adobe Illustrator, Marvel

The Museum of Contemporary Art is a contemporary art museum in downtown, Chicago. Its mission is to promote the works of up and coming young artists, and provide a space to contemplate modern art and culture. Their e-commerce website has the following interface:

 
 

 

  • Current Design #1
  • Current Design #2

USER INTERVIEWS

I went to the museum store and interviewed customers on their in-store experience, and their experience with the online store.

I wouldn’t use the website, just interested in browsing the store. – Customer

We’re an international and localized voice. – Employee 

I never shop for myself, usually for other people. – Customer

AFFINITY MAP

I organized the information I got into an affinity map to determine trends and brainstorm possible solutions.

  • Affinity Map

Observations

  • Emphasis on the “unique”
  • People are drawn to the unfamiliar aesthetic
  • The confusing website design turns people off

Key Insights

  • The store’s merchandise doesn’t always reflect the desires of the shopper
  • The store itself is the experience
  • People don’t want to invest too much in the unfamiliar

DESIGN PRINCIPLES

I determined the following design principles:

  • emulate the in-person experience of shopping at the Museum of Contemporary Art.
  • replicate the curiosity and wonder found in the actual store.
  • retain the MAC’s business goal of supporting young, diverse, and emerging artists.

DESIGN SOLUTION

I also determined that the design solution should:

Leave the user feeling confident, never wondering how they’ll get around, whether or not their order has gone through, or that their trust in the store has been compromised.

PRELIMINARY SKETCHES

I sketched some basic interface designs that included:

  • An immersive introduction page
  • Art gallery-style layout
  • Static menus with a kinetic center
  • Pop-up screens to invoke depth
  • Concept Sketches

BUILDING THE SITEMAP

Products on the current site were user-tested via card sorting into the following categories:

  • Art objects
  • Books
  • Fashion
  • Gifts
  • Houseware
  • Card Sorting

THE USER JOURNEY

A user journey flow was made to envision how a user would navigate the website.

  • User Journey

USER TESTING

I designed my screens in Adobe Illustrator and built them into a prototype with the Marvel app. I then user-tested the prototype and got the following results:

  • Wireframe #1
  • Wireframe #2
  • Wireframe #3

Positives

  • Navigation went exceeding well
  • Intro page was well received
  • High learnability

Negatives

  • Confirmation issues during the shopping process
  • Users felt distrustful due to a lack of presence from other users
  • Restrictive user flow

FINAL DELIVERABLES

After making adjustments through the user-testing, I developed high-fidelity mockups, which I incorporated into my final prototype.

VIEW FINAL PROTOTYPE

  • Mockup #1
  • Mockup #2
  • Mockup #3
  • Mockup #4
  • Mockup #5
  • Mockup #6