Final Cinefamily Mockup Design 

Final Cinefamily Mockup Design 

 

The Cinefamily is a non-profit movie theater in the heart of Los Angeles - offering eclectic shows inexistent at normal venues. 

disclaimer

This case study is not associated with Cinefamily; it was done solely to refine my UX skillset.

 

Timeline: 2 Weeks
Tools and Software: Paper & Pen, Post-it Notes, Sketch App, Marvel, Photoshop, Excel
UX Skills: Heuristic Evaluation, Guerrilla Interviews, C&C Analysis, Card Sorts, User Flows, Site Maps, Personas & Scenarios, Information Architecture, Sketching, Mock Ups, Prototyping, User Testing, Iterations


Skills Summary

 

Before

San Do Cinefamily Before 1
San Do Cinefamily Before 2
 

After

ipadcinefamily.png
Browse Events 3.png
Checkout.png
Event Details.png
Cart Bag.png

Research

 
Screen Shot 2017-07-30 at 12.40.21 PM.png

Heuristic Analysis

Method
Jakob Nielson’s 5 Qualities of Usability

Deliverable
One super sexy spreadsheet with usability scores

Key Takeaways
Site has too many functions (especially external to site).
Site incapable of educating users about upcoming films.
Confusing homepage - no focal point. 

 
Cinefamily Outside.jpg

User Interviews

I visited Cinefamily to ask their users what they used the site for. The results? Everybody only used the site to buy tickets.

  • “My friend took me to this show. He heard about it on social media.”  
  • “I didn’t even know you could purchase stuff online.” 
  • “Sometimes, I purchase my tickets online only to find out by the time I get here that the show is sold out” 
  • “I usually just have Google Chrome generate my credit card information. I didn’t know you could sign in”

 

 


How might we increase business revenue for Cinefamily.com by introducing new functions?

 

Ideation

Cinefamily Nataly Persona.png

Persona Development: Natalie

Age: 29 Years Old
Occupation: Public Relations Specialist
Relationship Status: Engaged

Natalie's favorite brands

Cinefamily Natalie's favorite Brands.png
 

Gain Points

When websites offer lots and lots of information

Having access to the hottest and most exclusive events in LA

Pain Points

When things don’t work correctly 

Not being in the loop of what’s hot and happening

 


Natalie wants to find a movie to watch, but is struggling to find out what is popular and learn about them. From Natalie’s pain points, I created a feature prioritization chart indicating the most critical functions of the redesign.

 
Screen Shot 2017-07-30 at 12.39.49 PM.png

Feature Prioritization

Features were brainstormed and posted on post-its. Then, features were entered into a spreadsheet. I worked with up-and-coming developers to determine LOEs. 

 

Card Sort

The main navigation had 9 links. The goal to streamline navigation and ensure that main features were prioritized. 

Before

Before

After

After


 

Original Site Map

Takeaways: the site has too many navigational links. Users weren't interacting with most of the website.

Cinefamily Original Sitemap.png
 

Original User Flow

Takeaways: Nobody used the site for e-commerce. Nobody signed in.  There was no lead generation. No customer retention.

Cinefamily Original User Flow.png

 

Revised Site Map + User Flow 

After a series of iterations, a final site map and user flow was decided. On the site map, precision and conciseness was a focus.  On the user flow, efficiency was a focus -- particularly when introducing the browsing functionality. 
 

San Do UX Cinefamily New Site Map
San Do UX Cinefamily New User Flow

 

 

Sketches + Wireframes

IMG_8256.JPG
 
 

Explore More

Michael Barbering

100 Product Managers