sue candelier  |  UX DESIGNER

  • Portfolio
  • Services
  • Contact
  • Portfolio
  • Services
  • Contact

MOCA
E-COMMERCE SITE

PROJECT


Challenge: MOCA’s online store is confusing to navigate. It is hard to figure out how products were categorized (no filters) and the checkout process is complicated. 

Solution: Redesigned the e-commerce site to create a more seamless online shopping experience for people who wanted to support MOCA and buy from its online store.


ROLE


I conducted user research to fully understand the problems users are facing—usability, information architecture, and design.

Based on research, I redesigned the site as a prototype and tested it with users. 

I presented the final prototype, which had a simplified, well-organized design with a streamlined check-out process.


COMPANY


The Museum of Contemporary Art (MOCA), Los Angeles is a contemporary art museum with three locations in greater Los Angeles, California.

MOCA’s online store carries a range of products, including items related to their current exhibitions. Revenue from sales help support MOCA’s programs.

TOOLS


Picture
Picture
Picture
Picture
Picture
Picture
Picture
Sketch 3
Invision
Gliffy
Illustrator
Photoshop
Google Drive
Google Docs

RESEARCH


Picture

Surveys and Interviews

Sent out a survey via Google Forms to gather information on demographics and travel—how often they travel, websites and apps they use to plan travel, and the type of travel planner they are.

Distilled the most common answers from 50+ responses; Followed-up with target participants via an in-person interview or open-ended survey. 

We wanted to know about their last trip—what they did, how they found out about those things, and how they kept track of them. We asked them about technology they traveled with and how they interacted with their devices. 

Picture

User Persona

Consolidated and analyzed results from interviews and surveys to create a user persona and develop a scenario.

We made sure to consider details like how often she travels, travel apps she uses, and her frustrations with the current way of planning travel.

This helped us design a solution that would solve specific problems for a specific type of user.

Picture

Comparative & Competitive Analysis

What types of travel and activities organizing apps are already out there? Our team did a C&CA to get a good grasp on what already exists and the types of features each had in comparison to one another.

By doing this, we were able to distill good ideas for features and ways of organizing events and activities that may work for the Airbnb iOS app and Apple Watch design solution. 

Picture
Picture

Card Sorting

Card Sort 1
To figure out where it would make sense for people to start planning activities on the Airbnb app.

Card Sort 2
To understand how people categorized activities and events to do when traveling. We had some activities written out, and we asked people to group the activities and title each of the groups. 

Based on these two card sorts, we figured where to put the “THINGS TO DO” section on the app and the activities categorization: culture, outdoors, eat/drink, nightlife, shopping

DESIGN


Picture

User Flow

We used markers and a whiteboard to brainstorm about our user flow based on the user scenario.

This step helped our team flush out the details for every interface and element of the app that our user would interact with. 

DESIGN & TESTING


Picture

Sketched Wireframes

Applying lean UX, our team sketched wireframes to quickly test, validate, and move on to digital wireframes.

Picture

User Testing

User testing was vital to getting feedback for our wireframes. First, we tested sketched wireframes. 

From testing our sketched wireframes, we learned that users wanted to have a choice of planning a trip either by selecting a place to stay OR by selecting activities around an area. 

We also learned that users wanted the ability to personalize their trip by naming it. This becomes helpful when planning multiple trips simultaneously, especially if the trips are within the same city.

Based on that feedback, we design digital wireframes for the next series of testing.

Picture

Prototype

We used Sketch 3 and Adobe Illustrator to design high-fidelity digital wireframes that matched the current Airbnb app. The wireframes were put into InVision to make it into a clickable prototype.

We did multiple rounds of user testing and iterated on the design based on user feedback.

Picture
Picture
Picture

RESULTS


We took a great app and made it even better. By adding features for users to learn about activities and events happening around the area they are traveling, as well as a personalized way to keep track of that information, users can now easily plan and organize both travel activities and lodging in one app. They can even set up reminders for activities based on location or time!

Adding these features, while adhering to Airbnb’s simple and clean design, we were able to add value (not clutter) to an app that was already super useful. Not only did this solution provide a better user experience, but it also exemplified what Airbnb is all about--feeling at home wherever you are.

Picture
Picture
Picture
Powered by Create your own unique website with customizable templates.