Francia Sandoval UX Portfolio

Download Francia Sandoval UX Portfolio

Post on 16-Jul-2015

204 views

Category:

Design

1 download

TRANSCRIPT

  • FRANCIA SANDOVALUX SPECIALIST

    UX PORTFOLIO 2015

  • CONTENTS3 ................................................................ABOUT ME

    17 ..................... NETFLIX (SPEC WORK) CASE STUDY

    NIGHT SHIFT THEATER COMPANY CASE STUDY5 ............................................................

  • HELLO!Im Francia and Im a UX Specialist.

    Im interested in the unmet needs of the user and

    the usability of design. I studied Screen Studies and

    Journalism but I have experience in UX Design. I firmly

    believe that creating memorable user experiences

    begins with a great idea and a whole lot of research.

  • MY PROCESS USUALLY LOOKS LIKE THIS:

    DRIN

    K A

    TO

    N OF COFFEE

    EACH DAY

    Ideation

    Research-interviews-observations-surveys

    Analysis

    Design

    Test

    Deliver

    Evaluate

    -personas-scenarios

    When Im not working, I can be found searching for the perfect burger and the DeLorean (the modified time machine, not just the car), watching travel documentaries or reading a graphic novel.

  • NIGHT SHIFT THEATER COMPANY CASE STUDY

  • THE CLIENT

    BUSINESS GOALS

    THE PROBLEMThe Night Shift Theater Company is a small non-profit company that was looking to improve their web presence.

    They wanted to appeal to art foundations and other grant givers while promoting their monthly bar event, Drunken Shakespeare.

    Based on initial usability testing of their website I found that users felt ambiguous and were reluctant to participate throughout any of their offerings. Through this, I made the realization that this company needed some content strategy.

  • THE CHALLENGEDetermine the useful and valuable information needed in order to drive users to take action, develop a design that highlights that content and strategize a plan to help maintain and deliver that content.

    DELIVERABLES

    THE TEAM

    TECHNIQUES USED Competitive analysis Comparative analysis Usability testing Stakeholder interviews Surveys Content auditing User interviews Heuristic evaluation Affinity mapping Personas

    User journeys Develop Site Maps Wireframing Sketching or design studio Paper prototyping Card sorting Mood boarding

    SOFTWARE USED Callie BauerUX Designer

    Chris LevinsonUX Designer

    Jerom Million-RosseauUX Designer

    Francia SandovalUX Designer

    Project Manager

    Two annotated high fidelity mockups for desktop sites to hand over to developers

    Clickable high fidelity prototypes

    Strategy document that includes suggested changes to brand, content and structure based on research

  • MY ROLEPROJECT MANAGER Lead the day-to-day of the design team Set up agenda and goal-driven meetings Run standups Run sprint planner Run retrospectives Send daily stakeholder updates Take notes and distribute to the team after any meetings Ensure team members are tracking their time daily Aid in testing, design and other steps of the process Aid in analytics setup and testing Client visit prep Present to client

    UX DESIGNER Developed user research Conducted user test and interviews Developed surveys Created strategy document and annotated wireframes Conducted usability tests Sketched and created wireframes Content evaluation and audit

  • I was given access to all of their social media accounts, their website and their shared company files. While conducting a content audit, I sorted information in terms of value and usability.

    1. CONTENT INVENTORY

    Some major discoveries during this content audit: They lack a consistent voice throughout their writing. A lot of their information is not organized and difficult to access. On their website they allow users to apply to co-produce a play and submit a play but they did not have a system put in place for what happens when that information is submitted.

  • Competitive Analysis: examined how other theater companies, tell their story and promote themselves.

    Comparative Analysis: Looked in to A/B testing results on the Obama Campaign website in order to examine different donation processes.

    Secondary Research: Looked into request for proposals from art foundations to discover what appeals to them. I found that art foundations like theater companies that show their history, story and if they are giving back to their community.

    Primary Research: Conducted surveys and interviews focused on understanding peoples habits when RSVPing to events, donating and how they submit plays. Research shows that people are more likely to donate when they are being told what their money is being used for and how much of it. When it comes to attending free events, most people are more likely to go when they are reminded of the event.

    2. RESEARCH & KEY TAKEAWAYS

  • Through card sorting, I was able to identify what information was vital to include on the site and how to categorize that information. This led to a fully developed site map and navigation schema.

    3. ORGANIZING AND DEFINING CONTENT

  • With rapid sketching, we defined the layout and built a paper prototype, allowing my team to think of effective visuals that would strengthen our potential solutions.

    4. SKETCHING

  • Usability tests followed each design iteration.The tests were done to make sure users clearlyunderstood where the information was laid out.

    Observations

    Many of the users didnt understand why the donation page was under the Get Involved tab.

    Many of the artists that we tested hated filling out a form for play submissions. They were used to just sending an email.

    Users didnt understand what the purpose of the Our Audience page was.

    1

    1

    22

    3

    3

    5.1 USABILITY TESTING COMPANY SITE

  • Testing the Drunken Shakespeare site allowed us to experiment more with different layouts due to the more colloquial vibe of the site.

    Observations

    Support Us was clearer and more effective language than Get Involved

    Many users thought that having the logo in the center of the navigation was distracting.

    The different sizes for the and the sliding interactions that we had planned out for the RSVP buttons were unclear and unnecessary.

    1

    1

    2

    2

    3 3

    5.2 USABILITY TESTING DRUNKEN SHAKESPEARE SITE

  • After several rounds of testing and iterations. All wireframes and flows were updated. Style guides and mood boards were developed to reflect each sites tone. Then all documents were compiled, packaged and annotated and delivered to the clients development team.

    6. DOCUMENTATION

  • DRUNKEN SHAKESPEARE PROTOTYPEhttp://invis.io/M21N0S6JB

    THE NIGHT SHIFT THEATER COMPANY PROTOTYPE

    https://projects.invisionapp.com/share/4R1MWCSYQ#/screens

    THE PROTOTYPES

  • NETFLIXCASE STUDY

  • THE CLIENT BUSINESS GOALSNetflix: provider of on-demand Internet streaming media available to viewers. Increase social activity between users.

  • THE CHALLENGENetflix was looking to increase social activity between users. We asked ourselves how do we develop a feature that increases social activity in a seamless way, without disrupting the existing flow and layout that Netflix currently has?

    DELIVERABLES

    THE SOLUTION THE TEAM

    TECHNIQUES USED Competitive analysis Comparative analysis Usability testing Surveys User interviews Heuristic evaluation Affinity mapping Personas User journeys Develop Site Maps Wireframing

    Sketching or design studio Paper prototyping

    SOFTWARE USED

    Sketches Wireframes User flows Sitemaps Navigation schema Responsive designs Interactive prototypes Developed features

    The development of three main features: Friends page Groups page Co-watching feature

    Francia SandovalUX Designer Pedro Do

    UX Designer

    Tulga EnhsaihanProject Manager

  • MY ROLEUX DESIGNER Developed user research Conducted user test and interviews Developed surveys Conducted usability tests Sketched and created wireframes

  • 1. ANALYZING SURVEY RESULTS

    Discuss what they watch with their friends. Use their smartphone while watching something on Netflix.

    Text while watching something on Netflix.

    Source: 195 survey respondents

    Discuss what they watch in person.

    Use Netflix to recommend films and TV shows.

    Even though there are social interactions between users, they are communicating with each other in inefficient and unstructured ways.

    91% 72%

    76% 60%

    27%

  • I text my friends funny clips from the shows that I am watching and we laugh about it and talk about it. WILMER GARCIA, 17 YEAR-OLD NETFLIX USER

    2. ANALYZING USER INTERVIEWS

  • I get most of my movie recommendations from my friends when we meet in person. When I see a really good movie, Ill immediately text my friends and tell them the name of the movie. ALIMAA, 45 YEAR OLD

  • While working on the comparative analysis, the focus was to highlight the ways users interact with each other on these sites. Based on this analysis we decided to incorporate these features: Facebooks Group set up Spotifys messaging system Twitchs co-watching feature

    Working on the competitive analysis, we focus our questions on the feature sets to determine an unmet need. How do users find and share films? What does their community look like? How do users have conversations with each other or interact? What features do these sites have that Netflix users will expect? What features are missing in this market?

    3. COMPETITIVE ANALYSIS

    COMPARATIVE ANALYSIS

  • 4. DEVELOPING PERSONASWe created affinity maps based on the data collected from the survey, interviews and behavioral patterns. Then we used this insight to develop fully fledged personas.

  • 5. USER JOURNEYSUser journeys and flows were developed in order to determine the unmet needs of the user. It allowed us to figure out how our design would improve these inefficiencies.

  • 6. INFORMATION ARCHITECTURESitemaps and navigation schemas were used to determine the information architecture.

  • 7. DESIGN STUDIODesign studio was used to sketch and refine ideas prior to paper prototyping.

  • 8. USER TESTINGWe tested each feature to make sure the user flow was understandable and seamless.

    Observations

    Users were confused how their friends would be able to interact with the users list of recommendations.

    User testing revealed friends chat feature blocked the recommendation list.

    1

    1

    2

    2

  • 9. USER TESTING MEDIUM FIDELITY PROTOTYPEMedium fidelity wireframes and digital prototypes were produced to support the outcome of the research and usability testing.

    Observations

    Users had difficulty setting up their discussion groups because the feature did not reflect familiar best practices.

  • THE RESULTS

    Where users can have detailed discussions about films dedicated to their interests.

    Users can recommend films to their friends and receive recommendations based on common interests.

    Users can speak with each other while watching something and push to mobile.

    The Groups Page The Friends Page Co-watching

  • THE PROTOTYPELink to the prototype or just click on the image below.http://invis.io/J61G2SS8X