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. 


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



San Do Cinefamily Before 1
San Do Cinefamily Before 2


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


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

Heuristic Analysis

Jakob Nielson’s 5 Qualities of Usability

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 by introducing new functions?



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. 






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


Explore More

Michael Barbering

100 Product Managers