Stepping into the World of UX

Hi! My name is Kyle Miyamoto, I’m a student at General Assembly in Los Angeles taking the UXDI immersive course. Follow me on my journey through UX!

It’s been a wild ride to this point, and these first two weeks have flown by. A truly wonderful experience thus far, learning many new tools, techniques, and working with some truly great and creative people.

With so many different tools to use, techniques to learn, here’s a short case study about documenting my process of these first two weeks and my frist project.

Narcos: A Netflix exclusive app; bringing you behind the scenes footage and features

Developed by Kyle Miyamoto

Developed for Roberto Plascencia (and Netflix, of course)

Pen, Paper, Post-Its, InVision, Evernote, Sketch

In this project I was tasked with developing an app for a classmate, based around his interest in the show Narcos on HBO. The goal was to develop a clickable prototype that would reflect his user needs in addition to a streamlined clickable prototype that would be intuitive and feature filled.

Step #1: User Research and Interview

During the interview process I was able to determine what the Roberto needed; an application that enables you to explore bonus content and background information regarding the show. The user wanted it to be accessible, informative, and allow him to see behind the scenes footage. He had an emphasis on the app being able to convey all this information (map, bonus footage, cast information, exclusive content) intuitively and on the go.

Challenges:

Ask more questions = more information to develop features, iterations, and concepts around

Step #2: Develop a Persona: Identifying who, what, and, why, Narcos

From the information gathered in the interview process I was able to develop a persona for the app. An ideal user formed from the information gathered during the interview. These points of emphasis included user goals, pain points, and ideal usage format. I created the template below to easily identify all the aspects of the persona in an easy to read, identify, and simple format. I used it throughout the process as a reference to make sure I was addressing Roberto’s unique goals.

Step #3: Competitive + Comparative Analysis

Using comparative analysis I was able to break down and analyze competing applications for features, user flows, content management to format and develop a flow for the Narcos app along with prototypes ideal for the persona I’d created. These comparisons enabled me to identify weak points in my own development and turn those weaknesses into strengths in the Narcos prototype. Below I’ve attached a few examples of my comparisons, and feature set analysis’.

  • Narcos is a feature filled, content heavy app compared to direct competitors
  • User’s are encouraged to explore, and learn new information
  • Not a e-commerce app

Challenges:
Would compare multiple apps/sites to develop a more in depth and precise feature set
Not many apps exist with the same goals / hard to make direct comparisons

Step #4: Concept Map + User Flow

During this phase of the process I began to develop an ideal user flow through testing and research. By card sorting the user was able to identify the key features that needed to be easily accessible in the app and enabled me to begin concept mapping. The concept maps allowed me to incorporate the user’s priorities, and develop a flow for the app and manage its features and content. These maps gave me the foundation to build wireframes that would incorporate the users needs, along with enabling me to build a streamlined interface that would be intuitive and accessible.

Using the concept map, I tested the user to confirm that the groupings (which were based on hierarchy of importance) were aligned with our goals and intuitive flow that we were aiming for.

Concept Map:

  • Enabled expansion of additional potential features; user sorting enabled prioritization
  • Combining concept map and user flow through research enables features and information to be organized according to user preference

User Flow:

  • Feature groupings based on hierarchy of importance and relevance based on user research
  • Enabled features to be identified, grouped and prioritized for wireframes and prototypes

Step #5: Prototyping and Wireframing

In this step I was able to see the first step’s of the physical app come into fruition. Through the initial steps of the process I was able to build off the concept maps and rapidly create paper prototypes. Rapidly creating paper prototypes and wireframes enables me to test them and identify any potential problems before moving onto the higher fidelity steps; enabling me to save massive amounts of time. The many rapid iterations also enabled me to simplify the design and confirm that I was able to fully introduce the features in a clear and concise way. The wireframes conveyed the visually stimulating interface that fulfilled the persona goals and priorities.

  • Allowed me to build off the concept maps, rapidly creating prototypes, and polishing them via pen and paper before moving into a digital prototype stage
  • Rapid prototyping allows for multiple iterations and user flows to be tested
  • Wireframing allows the implemented concepts, user priorities, and prototypes to be tested quickly and efficiently; multiple iterations + rapid design
Wireframing
Prototyping and Testing

Step #6: User Testing + Reiteration

From the finished paper prototypes, I built them in a digital format, and uploaded them to InVision. This enabled me to create a clickable prototype that could be used on the ideal device, an iPhone. This was a key step in the process, allowing me to observe a user with the device, how they used it, and helped identify any problem areas in the interface, or flow. Through the testing, I was able to identify areas where the user struggled and reiterate my design, and re-test. This enabled me to confirm my design choices, see that the needs of persona were met, and the design conveyed the necessary information easily and intuitively.

  • Multiple user test’s enabled me to track which iterations had improved on the initial design
  • Confirm through user tests that the goals and features of the persona and company were met and usable through good design

Step #7: Project Summary + Next Steps

All in all the project when very smoothly. Using the design process I was able to produce a deliverable working prototype based on research, along with wireframes that convey that research. As a result I was able to show the complexity of the app through simplified and concise design.

The next steps I would take to further the development of this app would be to expand the feature set, screens, and wireframes to show the depth and information this application would allow the user to access. I would also bring some iconography into the app to help identify some of the base wireframe features.

  • Deliverable working prototype and wireframes
  • Research based iterations, concepts, and wireframe development

Next Steps:

  • Mid-fidelity working prototype
  • Expanded feature set and wireframes

and most importantly….

…a happy user!