> 0:00 | 0:00
[0:00 | Aurascript] > 00:00:00.234 | Overview: Role - From September 2023 to January 00:00:05.033 | 2024, as a UI/UX Engineer, I 00:00:08.240 | led the development of Universe, a streaming 00:00:10.653 | service recommendation platform. I engineered the core recommendation system, integrating 00:00:16.113 | multiple streaming APIs to enhance content selection and accuracy. Working 00:00:20.824 | closely with my team, we conducted contextual 00:00:23.843 | inquiries and created affinity diagrams to inform the design process. 00:00:28.138 | I guided the development of wireframes, from low to high 00:00:31.462 | fidelity, leading to a fully functional prototype. I 00:00:34.826 | also implemented the front-end using HTML, CSS, and 00:00:39.005 | JavaScript. Leveraging tools like Figma, Balsamiq, Adobe 00:00:43.161 | Illustrator, and Adobe After Effects, I contributed 00:00:46.644 | to both design and technical 00:00:48.130 | aspects, bringing the project to completion. 00:00:51.032 | Team: UI/UX Engineer: Chase Guerin. UX Researcher: Vineet Bhardwaj. 00:00:56.837 | Software Developer: Shahana Nandy, Jeremiah Flom. 00:01:00.785 | Duration: 5 months, (Sep-2023 to Jan-2024) 00:01:06.450 | Scope: UI/UX Design, Front-End Development, Affinity Diagramming, Contextual Inquiry, Wireframing, 00:01:14.345 | Storyboarding, User Testing 00:01:16.552 | Tools: Figma, Balsamiq, Adobe Illustrator, Adobe 00:01:20.615 | After Effects 00:01:21.846 | Final Solution: Final Hi-Fi Prototype, Universe. Universe is a movie 00:01:26.791 | recommendation platform that delivers personalized recommendations from various platforms such 00:01:32.039 | as Netflix, Hulu, Apple-TV, and more. It offers streamlined navigation 00:01:37.289 | with key filters like Platform, Genre, Duration, and Min 00:01:41.234 | Rating. The platform gathers data from various 00:01:43.973 | streaming APIs to deliver personalized content recommendations, with options for 00:01:48.804 | deeper insights and direct streaming access. Features like 00:01:52.193 | trending views and customizable filters make it easy to navigate, 00:01:56.094 | positioning Universe as a go-to hub for 00:01:58.141 | tailored streaming content. Discover - Design Thinking: Research: 00:02:02.620 | Problem Statement: Challenge - Our target users, frequent streaming platform users, 00:02:08.194 | face choice overload due to the overwhelming amount of content 00:02:11.490 | available. This indecision and frustration 00:02:13.976 | highlight the need for a streamlined recommendation system that provides 00:02:17.620 | users with tailored content choices quickly and intuitively. 00:02:21.103 | Goal: To design a robust recommendation platform that helps users 00:02:25.120 | easily decide what to watch across multiple streaming platforms. 00:02:29.090 | Competitive Analysis: SWOT Competitive Analysis, Universe. The 00:02:33.548 | competitive analysis found that JustWatch and Reelgood lead with 00:02:36.799 | extensive libraries and aggregation but lack personalization and interface 00:02:40.839 | clarity, causing user overload. Universe can focus on improving 00:02:44.950 | user experience and expanding content while navigating competition and third-party 00:02:49.523 | API reliance. 00:02:50.873 | Contextual Inquiry: Our contextual inquiry involved a diverse group of individuals, 00:02:56.281 | reflecting a broad spectrum of streaming 00:02:58.301 | service users. The participants are 00:03:00.530 | excluded for confidentiality. Key Insights: Choice Overload - All participants 00:03:05.942 | reported struggling with deciding what to watch, indicating a 00:03:09.306 | widespread problem of choice overload among streaming service users. 00:03:13.254 | Importance of Recommendations - Decisions were often 00:03:16.343 | based on recommendations from friends, popular trends, or platform-generated 00:03:21.219 | top picks, underscoring the value of curated 00:03:24.052 | suggestions. Privacy and Data Security - There was a clear 00:03:27.721 | demand for data privacy, with users willing to share 00:03:30.739 | their watching history for personalized recommendations provided their information remained 00:03:35.151 | secure. Multi-platform Usage - Users frequently navigated multiple 00:03:39.818 | streaming platforms, highlighting a need for a unified recommendation 00:03:43.952 | system that aggregates content across services. Design - 5 Steps: 00:03:48.873 | Empathize, Define, Ideate, Prototype, and Test: 00:03:53.171 | User Experience: 00:03:54.516 | User Personas: Empathize - Understanding the User: I 00:03:58.232 | developed user personas based on insights 00:04:00.646 | from the contextual inquiry to reflect key user segments. 00:04:04.222 | Based on research data, these personas represented our 00:04:07.426 | target users and assisted in customizing the 00:04:09.864 | design to suit their specific needs and behaviors. Linda, 00:04:13.441 | 25. Linda is an inspiring filmmaker who enjoys 00:04:16.900 | exploring indie and international cinema. Alex, 32. Alex is a 00:04:21.497 | graphic designer who uses streaming services to unwind after 00:04:24.958 | work. Emily, 22. Emily is currently a college 00:04:28.673 | senior, majoring in communications. Empathize - Understanding the User: Define 00:04:34.338 | - Clarify User Needs: 00:04:36.173 | Affinity Diagramming: Affinity Diagramming in Figma. Using affinity diagrams, we 00:04:41.722 | synthesized research data 00:04:43.234 | to validate our hypothesis about choice overload and 00:04:46.087 | the need for better content discovery. 00:04:48.247 | Storyboarding: Ideate - Generate Ideas: During the ideation phase, we 00:04:53.379 | created four unique storyboards, each exploring different approaches to delivering 00:04:58.047 | the Universe platform. 1.] Mobile App - Storyboard #1 [Mobile 00:05:03.038 | App], Universe. Pros - Easy access with many 00:05:06.337 | features in a solid framework. Cons 00:05:08.889 | - Requires more tech support and user installation effort. 2.] 00:05:13.046 | Browser Extension - Storyboard #2 [Browser Extension], Universe. Pros 00:05:18.688 | - Lightweight, adding simple functionality. Cons - 00:05:22.407 | Limited in feature scope. 3.] Smart Watch 00:05:25.399 | App - Storyboard #3 [Smart Watch App], Universe. Pros - 00:05:30.252 | Convenience with easy access. Cons - Presents technical 00:05:34.013 | hurdles and requires many permissions. 4.] Web App [Selected] - 00:05:38.541 | Storyboard #4 [Web App], Universe. Pros - High accessibility, reliability, 00:05:44.811 | and ease of development make it a strong choice. 00:05:47.460 | Cons - Less user-friendly compared to native 00:05:50.221 | apps. We chose web app development for its accessibility, ease 00:05:54.122 | of implementation, and broad feature integration, without 00:05:57.631 | requiring app installation or specialized hardware. It was 00:06:01.088 | the most feasible option within 00:06:02.690 | our timeline, with its advantages far outweighing the 00:06:05.638 | drawbacks. Ideate - Generate Ideas: 00:06:08.682 | UI/UX Design: 00:06:10.306 | Wireframes: Prototype - Build Solution Models: We iteratively developed 00:06:15.163 | several wireframes, refining the 00:06:17.318 | user flow based on design insights. Wireframe #1 00:06:21.127 | - Wireframe #1, Universe. Established key 00:06:24.679 | filtering criteria (Platform, Genre, Duration, and 00:06:28.812 | Min Rating). I designed a user flow where individuals input 00:06:32.088 | their preferences across these criteria, culminating in 00:06:35.244 | a "For You" page that presents filtered options. Wireframe 00:06:38.564 | #2 - Wireframe #2, Universe. Jeremiah Flom introduced the 00:06:43.557 | black hole interaction concept to make 00:06:45.716 | the selection process visually engaging. Wireframe #3 - Wireframe 00:06:50.642 | #3, Universe. Building on Wireframe #2, I refined the 00:06:55.168 | flow of Wireframe #1 00:06:56.793 | by integrating the blackhole concept. This version preserves the 00:07:00.391 | original criteria while adding an engaging blackhole click to 00:07:03.712 | initiate the process. Wireframe #4 - Wireframe #4, Universe. 00:07:09.308 | Jeremiah, Vineet, and Shahana proposed an alternate approach, initiating 00:07:14.207 | the flow with an immediate recommendation 00:07:16.206 | or a "customize" option. This version featured a floating navigation 00:07:20.083 | bar to display selected criteria, initially showed limited options with 00:07:24.099 | an expandable interface for more, a "next" option when selecting 00:07:27.700 | criteria, and introduced a trending movies feature. 00:07:30.927 | Wireframe #5 - Wireframe #5, Universe. Building on Wireframe #3, 00:07:37.268 | I merged the duration and minimum rating criteria 00:07:39.797 | into a single interface, included an option to expand genre 00:07:43.488 | selections, and added a filtering feature on the "For You" 00:07:46.414 | page post-recommendation generation. Transition to User Testing - 00:07:50.780 | Given that Wireframe #5 synthesized elements from the 00:07:54.100 | initial concepts while Wireframe #4 represented a distinct pathway, we 00:07:58.766 | presented both to users for feedback. We 00:08:01.228 | sought opinions on combining duration and rating 00:08:03.690 | criteria, the overall flow, the inclusion of trending 00:08:07.292 | features, and the customization options, aiming to 00:08:10.423 | refine the current design based on these insights. Prototype - 00:08:14.208 | Build Solution Models: 00:08:15.720 | User Testing: Test - Evaluate Solution Effectiveness: 00:08:19.737 | During user testing, we gathered feedback on Wireframes #4 and 00:08:23.867 | #5 to refine the design further. Wireframe #4 00:08:27.653 | - Wireframe #4, Universe. Wireframe #5 - Wireframe #5, 00:08:33.668 | Universe. Wireframe #5 featured a central black hole, 00:08:37.661 | combining duration and minimum rating criteria on a single page, 00:08:41.515 | whereas Wireframe #4 offered a more segmented layout without a 00:08:45.137 | black hole, separating Platform, Genre, Duration, and Min Rating 00:08:49.897 | onto separate pages. Key Takeaways from User Testing: 00:08:53.497 | Navigation and Layout - 00:08:54.983 | Users preferred a simple, intuitive flow with fewer steps. Button 00:08:59.115 | Design and Functionality - Clearer differentiation between “Generate” and “Next” 00:09:03.457 | buttons was needed. Recommendation Quality - Users emphasized the importance 00:09:08.057 | of accurate and relevant content suggestions. Filtering and Customization 00:09:12.539 | - Strong demand for more extensive filtering options, such as 00:09:16.344 | by runtime, genre, and MPAA ratings, 00:09:19.527 | to allow for more personalized recommendations. Streaming Platform Selection - 00:09:24.309 | Users prioritized a smooth, straightforward process for choosing streaming platforms. 00:09:29.813 | Feature Enhancement - Desired additions included detailed movie summaries, cast 00:09:34.643 | information, trailers, and recommendations 00:09:37.499 | for similar content. Final Page Design - Users favored a 00:09:41.329 | simplified final page with 00:09:42.885 | fewer options to prevent choice overload. User Preferences Memory - 00:09:47.090 | The idea of the platform remembering past selections for 00:09:50.177 | easier access to new recommendations was well-received. Based on this 00:09:54.077 | feedback, we developed Wireframe #6 and later Wireframe #7, 00:09:58.953 | which included improvements like a "Generate" button on 00:10:01.577 | hover, an interactive black hole feature, and a trending content 00:10:05.365 | toggle. Wireframe #6 - Wireframe #6, Universe. Retained from Wireframe 00:10:11.750 | #4: Trending Button - Provides quick access to 00:10:15.021 | trending content. Page Seperation - Duration and Min Rating on 00:10:18.922 | separate pages for easier navigation. More Button - An 00:10:22.498 | expandable "more +" option for Platform and 00:10:25.099 | Genre selections. Navigation Bar - Displays user progress 00:10:29.025 | across criteria selections. Retained from Wireframe #5: Tap to Enter 00:10:34.202 | - "Tap to Enter" feature, evolving from 00:10:36.547 | the "click to begin" prompt. Black Hole Theme - The 00:10:39.380 | central black hole visual theme. New Additions for 00:10:42.306 | Wireframe #6: Browse and Filter - A hamburger menu 00:10:46.185 | for quick access to filter settings. Back, Reset, 00:10:49.738 | Continue - "Back," "Reset," and "Continue" buttons within the selection 00:10:53.779 | process. Radial Percentage Loader - Displays progress during recommendation generation. 00:10:59.515 | Simplified, Expandable Results - Initial display of three 00:11:03.368 | recommendations, with a "See More" option. Toggle 00:11:06.433 | Results - Switch between "For You" and 00:11:08.569 | "Trending" pages for customized discovery. Wireframe #7 - 00:11:12.913 | Wireframe #7, Universe. New Additions for Wireframe #7: Tap 00:11:18.255 | To Enter Arrow - The "Tap to 00:11:19.878 | Enter" feature now includes the downward 00:11:21.891 | arrow (↴) in replacement of a right arrow, better indicating 00:11:25.104 | the action of clicking the black hole for entry. 00:11:27.567 | Menu Enhancements - The menu is updated 00:11:30.073 | with a black hole graphic 00:11:31.350 | for added visual interest, alongside menu elements such 00:11:34.670 | as “Universe,” "Trending," and "Browse and Filter." Generate Button - 00:11:38.990 | The "Reset" button has been removed in favor of a 00:11:41.355 | fixed "Generate" button, simplifying user choices. Moreover, a new 00:11:45.863 | "Generate" button appears on hover over the 00:11:47.928 | black hole. Skip Button - Allows users to bypass criteria 00:11:51.835 | if needed. Tutorial Feature - Introduces users to the generate 00:11:55.826 | button and the navigation bar. Visual Feedback and Selection Indicators 00:11:59.961 | - Color indicators now highlight selected options, providing clearer 00:12:04.093 | visual feedback to users. 00:12:05.902 | These indicators also signal when enough 00:12:08.063 | criteria have been filled to proceed, clarifying when actions can 00:12:11.848 | be taken. Content Navigation - The interface for navigating between 00:12:16.097 | "Trending" and "For You" content is streamlined, replacing previous 00:12:19.716 | buttons with side-by-side navigation and an added underline 00:12:22.789 | for the active page. Filtering Interface - Introduces a static 00:12:27.013 | "Apply All Filters" button for quick customization. Test - Evaluate 00:12:31.426 | Solution Effectiveness: 00:12:32.934 | Wizard of Oz Evaluations: We conducted Wizard-of-Oz evaluations, based on Wireframe 00:12:38.483 | #7, to simulate the platform experience 00:12:41.502 | and gather real-time feedback. Evaluation Methods: Email Interaction - 00:12:46.189 | Engaging end-users via email, Vineet and I 00:12:48.883 | asked them to choose criteria for generating movie recommendations. Based 00:12:53.136 | on these choices, tailored recommendations were provided for feedback. Manual 00:12:57.848 | Simulation - In alignment with a suggestion from 00:13:00.679 | Mauricio, our project mentor, we 00:13:03.161 | utilized a third person 00:13:04.514 | simulated system responses, allowing us to observe user behavior during 00:13:08.879 | live sessions. Key Learnings: Criteria Sufficiency - Users found 00:13:13.266 | the filtering options effective. Min Rating Insights - The Min 00:13:16.934 | Rating feature was less 00:13:18.071 | significant to our users, who generally bypassed 00:13:21.024 | this option or defaulted to selecting the highest rating. Demand 00:13:24.531 | for Detailed Recommendations - Users requested more information about 00:13:28.591 | recommendations. Diversity in Recommendations - Users preferred English-language 00:13:33.562 | suggestions, prompting a need for language settings. 00:13:36.789 | Following insights from our Wizard-of-Oz evaluations of Wireframe #7, we 00:13:41.636 | developed Wireframe #8, which optimizes filtering options and provides 00:13:46.285 | more detailed recommendations to better 00:13:48.354 | align with user preferences. Wireframe #8 - 00:13:51.785 | Wireframe #8, Universe. Key Enhancements in Wireframe #8: Expanded 00:13:57.454 | Movie Details - Clicking a movie reveals its title, rating, 00:14:01.449 | duration, genre, and direct streaming links. Back 00:14:04.906 | Button for No Results - We've integrated a "Back" button 00:14:07.857 | to improve user navigation, especially in instances where no results 00:14:11.854 | are shown, enabling users to backtrack and refine 00:14:14.730 | their choices without needing to restart their search. Counter Indicator 00:14:18.562 | for Hidden Options - A counter indicator has been 00:14:21.298 | added to inform users about the number 00:14:23.276 | of selections made within hidden options. 00:14:25.530 | This feature activates when users, having selected from expanded "More 00:14:29.496 | +" lists, opt to go back, ensuring they remain informed 00:14:33.260 | about their hidden choices. Platform Icons in Navigation Bar 00:14:37.093 | - Displays selected platforms as icons. 00:14:39.972 | Further User Testing: With Wireframe #8, Vineet and I focused on improving 00:14:45.004 | the user experience through targeted testing. Our goal was 00:14:48.117 | to identify key improvements and develop a more refined final 00:14:51.558 | version, resulting in Wireframe #9, which reflects the feedback 00:14:55.925 | we gathered. Evaluation Focus: Handling No Results 00:14:59.639 | - We observed how users reacted to 00:15:01.606 | situations where no search results appeared, indicated 00:15:04.886 | by the message "No results. Please try again." This helped 00:15:08.346 | us improve the system's support for adjusting search 00:15:10.947 | criteria. Overall Usability Assessment - We evaluated 00:15:14.802 | the platform’s usability, step relevance, and overall utility to 00:15:19.116 | identify meaningful areas for enhancement. Methodology: We conducted in-person sessions 00:15:24.670 | with four users, observing how they interacted 00:15:27.387 | with the interface to generate movie recommendations. These sessions 00:15:31.150 | gave us valuable insights into user behavior and preferences. 00:15:34.888 | Key Learnings: Preference Adjustment Feature - Users wanted the option 00:15:38.836 | to easily remove streaming platforms. User Interface Enhancements - A 00:15:43.378 | hover effect on the "Generate" button 00:15:45.197 | improved usability and engagement. Recommendation Relevance - 00:15:49.001 | Users found the recommendations valuable and appreciated the detailed descriptions 00:15:53.373 | and "Trending" section. Overall Satisfaction - Feedback confirmed the 00:15:57.482 | system's readiness for broader use and alignment with user 00:16:00.431 | expectations. Wireframe #9 [Final Prototype] - Wireframe #9 00:16:06.400 | [Final Prototype], Universe. Key Enhancements in Wireframe #9: 00:16:11.299 | Deselect Platforms - Allows users to remove platform choices. 00:16:15.662 | Hint for No Results - To aid users in scenarios 00:16:18.612 | yielding no results, we introduced a specific hint: "Hint: 00:16:22.467 | Choosing a higher duration value (e.g., 100+ mins) and 00:16:26.825 | a smaller min rating value (e.g., 3.0 stars) 00:16:30.988 | will yield more results." This advice aims 00:16:33.447 | to guide users in modifying their choices to enhance 00:16:36.354 | the likelihood of obtaining relevant recommendations. 00:16:39.417 | Hi Fi Prototypes: While refining wireframes, I created high-fidelity prototypes for final 00:16:45.434 | testing, offering a clear view of the 'Universe' platform's 00:16:48.686 | design and functionality. Final Hi-Fi Prototype, 00:16:52.191 | Universe. Final High-Fidelity Prototype - Above are high-fidelity prototypes 00:16:56.972 | of the "Universe" flow, designed in Adobe Illustrator and Figma, 00:17:00.759 | showcasing my work in both design and 00:17:02.793 | development, guided by our team’s user research. Deliver - Design 00:17:07.077 | Thinking: Implement: 00:17:08.587 | Front End Implementation: Final Front-End Implementation Video - This video 00:17:13.391 | showcases the fully implemented front end of 00:17:15.753 | the "Universe" flow, translating the 00:17:17.882 | high-fidelity prototype into a live experience. I handled 00:17:21.472 | the design, coding, and streaming API integration, with the project 00:17:25.930 | shaped by insights from our team’s user research. 00:17:28.740 | User Interface: I developed the Universe user interface by balancing functional 00:17:33.430 | design and branding, including logo creation, typography styling, 00:17:38.051 | color palettes, iconography, and UI components. I also produced 00:17:42.720 | a demo video using Adobe After Effects 00:17:45.110 | to showcase the product. 00:17:46.643 | Logos: Primary - Universe, Primary Logo. Secondary - Universe, Secondary 00:17:52.937 | Logo. Logo Treatment - Ideal logo treatment is a 00:17:56.344 | black logo on a white background. Other treatments include 00:17:59.713 | a white logo on a black background. 00:18:01.990 | Typography: Primary: Helvetica Neue 00:18:05.172 | Color Styles: Primary: #FFFFFF. Secondary: #000000 00:18:11.816 | Product Showcase Demo: Showcase Demo Video - Above is 00:18:15.495 | the final showcase demo video of 00:18:17.423 | "Universe," created in Adobe After Effects. It 00:18:20.673 | showcases the project from problem to solution, featuring 00:18:24.190 | the fully implemented front end, which I designed and coded 00:18:27.368 | entirely. I also contributed to user research and led 00:18:30.754 | the design process, with insights 00:18:32.826 | from each team member reflecting our collaborative effort. 00:18:35.823 | Next Case Study: Guerin New York - Front-end, Branding, Product
Role
From September 2023 to January 2024, as a UI/UX Engineer, I led the development of Universe, a streaming service recommendation platform. I engineered the core recommendation system, integrating multiple streaming APIs to enhance content selection and accuracy. Working closely with my team, we conducted contextual inquiries and created affinity diagrams to inform the design process.
I guided the development of wireframes, from low to high fidelity, leading to a fully functional prototype. I also implemented the front-end using HTML, CSS, and JavaScript. Leveraging tools like Figma, Balsamiq, Adobe Illustrator, and Adobe After Effects, I contributed to both design and technical aspects, bringing the project to completion.
UI/UX Engineer: Chase Guerin.
UX Researcher: Vineet Bhardwaj.
Software Developer: Shahana Nandy, Jeremiah Flom.
5 months, (Sep 2023 to Jan 2024)
UI/UX Design, Front-End Development, Affinity Diagramming, Contextual Inquiry, Wireframing, Wireflows, Storyboarding, User Testing
Figma, Balsamiq, Adobe Illustrator, Adobe After Effects
Universe is a movie recommendation platform that delivers personalized recommendations from various platforms such as Netflix, Hulu, Apple-TV, and more. It offers streamlined navigation with key filters like Platform, Genre, Duration, and Min Rating.
The platform gathers data from various streaming APIs to deliver personalized content recommendations, with options for deeper insights and direct streaming access. Features like trending views and customizable filters make it easy to navigate, positioning Universe as a go-to hub for tailored streaming content.
Challenge Our target users, frequent streaming platform users, face choice overload due to the overwhelming amount of content available. This indecision and frustration highlight the need for a streamlined recommendation system that provides users with tailored content choices quickly and intuitively.
To design a robust recommendation platform that helps users easily decide what to watch across multiple streaming platforms.
The competitive analysis found that JustWatch and Reelgood lead with extensive libraries and aggregation but lack personalization and interface clarity, causing user overload. Universe can focus on improving user experience and expanding content while navigating competition and third-party API reliance.
Our contextual inquiry involved a diverse group of individuals, reflecting a broad spectrum of streaming service users. The participants are excluded for confidentiality.
Key Insights
Choice Overload All participants reported struggling with deciding what to watch, indicating a widespread problem of choice overload among streaming service users.
Importance of Recommendations Decisions were often based on recommendations from friends, popular trends, or platform-generated top picks, underscoring the value of curated suggestions.
Privacy and Data Security There was a clear demand for data privacy, with users willing to share their watching history for personalized recommendations provided their information remained secure.
Multi-platform Usage Users frequently navigated multiple streaming platforms, highlighting a need for a unified recommendation system that aggregates content across services.
I developed user personas based on insights from the contextual inquiry to reflect key user segments. Based on research data, these personas represented our target users and assisted in customizing the design to suit their specific needs and behaviors.
Using affinity diagrams, we synthesized research data to validate our hypothesis about choice overload and the need for better content discovery.
During the ideation phase, we created four unique storyboards, each exploring different approaches to delivering the Universe platform.
1.] Mobile App
Pros Easy access with many features in a solid framework.
Cons Requires more tech support and user installation effort.
2.] Browser Extension
Pros Lightweight, adding simple functionality.
Cons Limited in feature scope.
3.] Smart Watch App
Pros Convenience with easy access.
Cons Presents technical hurdles and requires many permissions.
4.] Web App [Selected]
Pros High accessibility, reliability, and ease of development make it a strong choice.
Cons Less user-friendly compared to native apps.
We chose web app development for its accessibility, ease of implementation, and broad feature integration, without requiring app installation or specialized hardware. It was the most feasible option within our timeline, with its advantages far outweighing the drawbacks.
We iteratively developed several wireflows, refining the user flow based on design insights.
Wireflow #1
Established key filtering criteria (Platform, Genre, Duration, and Min Rating). I designed a user flow where individuals input their preferences across these criteria, culminating in a "For You" page that presents filtered options.
Wireflow #2
Jeremiah Flom introduced the black hole interaction concept to make the selection process visually engaging.
Wireflow #3
Building on Wireflow #2, I refined the flow of Wireflow #1 by integrating the blackhole concept. This version preserves the original criteria while adding an engaging blackhole click to initiate the process.
Wireflow #4
Jeremiah, Vineet, and Shahana proposed an alternate approach, initiating the flow with an immediate recommendation or a "customize" option. This version featured a floating navigation bar to display selected criteria, initially showed limited options with an expandable interface for more, a "next" option when selecting criteria, and introduced a trending movies feature.
Wireflow #5
Building on Wireflow #3, I merged the duration and minimum rating criteria into a single interface, included an option to expand genre selections, and added a filtering feature on the "For You" page post-recommendation generation.
Transition to User Testing
Given that Wireflow #5 synthesized elements from the initial concepts while Wireflow #4 represented a distinct pathway, we presented both to users for feedback. We sought opinions on combining duration and rating criteria, the overall flow, the inclusion of trending features, and the customization options, aiming to refine the current design based on these insights.
During user testing, we gathered feedback on Wireflow #4 and #5 to refine the design further.
Wireflow #4
Wireflow #5
Wireflow #5 featured a central black hole, combining duration and minimum rating criteria on a single page, whereas Wireflow #4 offered a more segmented layout without a black hole, separating Platform, Genre, Duration, and Min Rating onto separate pages.
Key Takeaways from User Testing
Navigation and Layout Users preferred a simple, intuitive flow with fewer steps.
Button Design and Functionality Clearer differentiation between “Generate” and “Next” buttons was needed.
Recommendation Quality Users emphasized the importance of accurate and relevant content suggestions.
Filtering and Customization Strong demand for more extensive filtering options, such as by runtime, genre, and MPAA ratings, to allow for more personalized recommendations.
Streaming Platform Selection Users prioritized a smooth, straightforward process for choosing streaming platforms.
Feature Enhancement Desired additions included detailed movie summaries, cast information, trailers, and recommendations for similar content.
Final Page Design Users favored a simplified final page with fewer options to prevent choice overload.
User Preferences Memory The idea of the platform remembering past selections for easier access to new recommendations was well-received.
Based on this feedback, we developed Wireflow #6 and later Wireflow #7, which included improvements like a "Generate" button on hover, an interactive black hole feature, and a trending content toggle.
Wireflow #6
Retained from Wireflow #4
Trending Button Provides quick access to trending content.
Page Seperation Duration and Min Rating on separate pages for easier navigation.
More Button An expandable "more +" option for Platform and Genre selections.
Navigation Bar Displays user progress across criteria selections.
Retained from Wireflow #5
Tap to Enter "Tap to Enter" feature, evolving from the "click to begin" prompt.
Black Hole Theme The central black hole visual theme.
New Additions for Wireflow #6
Browse and Filter A hamburger menu for quick access to filter settings.
Back, Reset, Continue "Back," "Reset," and "Continue" buttons within the selection process.
Radial Percentage Loader Displays progress during recommendation generation.
Simplified, Expandable Results Initial display of three recommendations, with a "See More" option.
Toggle Results Switch between "For You" and "Trending" pages for customized discovery.
Wireflow #7
New Additions for Wireflow #7
Tap To Enter Arrow The "Tap to Enter" feature now includes the downward arrow (↴) in replacement of a right arrow, better indicating the action of clicking the black hole for entry.
Menu Enhancements The menu is updated with a black hole graphic for added visual interest, alongside menu elements such as “Universe,” "Trending," and "Browse and Filter."
Generate Button The "Reset" button has been removed in favor of a fixed "Generate" button, simplifying user choices. Moreover, a new "Generate" button appears on hover over the black hole.
Skip Button Allows users to bypass criteria if needed.
Tutorial Feature Introduces users to the generate button and the navigation bar.
Visual Feedback and Selection Indicators Color indicators now highlight selected options, providing clearer visual feedback to users. These indicators also signal when enough criteria have been filled to proceed, clarifying when actions can be taken.
Content Navigation The interface for navigating between "Trending" and "For You" content is streamlined, replacing previous buttons with side-by-side navigation and an added underline for the active page.
Filtering Interface Introduces a static "Apply All Filters" button for quick customization.
We conducted Wizard-of-Oz evaluations, based on Wireflow #7, to simulate the platform experience and gather real-time feedback.
Evaluation Methods
Email Interaction Engaging end-users via email, Vineet and I asked them to choose criteria for generating movie recommendations. Based on these choices, tailored recommendations were provided for feedback.
Manual Simulation In alignment with a suggestion from Mauricio, our project mentor, we utilized a third person simulated system responses, allowing us to observe user behavior during live sessions.
Key Learnings
Criteria Sufficiency Users found the filtering options effective.
Min Rating Insights The Min Rating feature was less significant to our users, who generally bypassed this option or defaulted to selecting the highest rating.
Demand for Detailed Recommendations Users requested more information about recommendations.
Diversity in Recommendations Users preferred English-language suggestions, prompting a need for language settings.
Following insights from our Wizard-of-Oz evaluations of Wireflow #7, we developed Wireflow #8, which optimizes filtering options and provides more detailed recommendations to better align with user preferences.
Wireflow #8
Key Enhancements in Wireflow #8
Expanded Movie Details Clicking a movie reveals its title, rating, duration, genre, and direct streaming links.
Back Button for No Results We've integrated a "Back" button to improve user navigation, especially in instances where no results are shown, enabling users to backtrack and refine their choices without needing to restart their search.
Counter Indicator for Hidden Options A counter indicator has been added to inform users about the number of selections made within hidden options. This feature activates when users, having selected from expanded "More +" lists, opt to go back, ensuring they remain informed about their hidden choices.
Platform Icons in Navigation Bar Displays selected platforms as icons.
With Wireflow #8, Vineet and I focused on improving the user experience through targeted testing. Our goal was to identify key improvements and develop a more refined final version, resulting in Wireflow #9, which reflects the feedback we gathered.
Evaluation Focus
Handling No Results We observed how users reacted to situations where no search results appeared, indicated by the message "No results. Please try again." This helped us improve the system's support for adjusting search criteria.
Overall Usability Assessment We evaluated the platform’s usability, step relevance, and overall utility to identify meaningful areas for enhancement.
Methodology
We conducted in-person sessions with four users, observing how they interacted with the interface to generate movie recommendations. These sessions gave us valuable insights into user behavior and preferences.
Key Learnings
Preference Adjustment Feature Users wanted the option to easily remove streaming platforms.
User Interface Enhancements A hover effect on the "Generate" button improved usability and engagement.
Recommendation Relevance Users found the recommendations valuable and appreciated the detailed descriptions and "Trending" section.
Overall Satisfaction Feedback confirmed the system's readiness for broader use and alignment with user expectations.
Wireflow #9 [Final Prototype]
Key Enhancements in Wireflow #9
Deselect Platforms Allows users to remove platform choices.
Hint for No Results To aid users in scenarios yielding no results, we introduced a specific hint: "Hint: Choosing a higher duration value (e.g., 100+ mins) and a smaller min rating value (e.g., 3.0 stars) will yield more results." This advice aims to guide users in modifying their choices to enhance the likelihood of obtaining relevant recommendations.
While refining wireframes, I created high-fidelity prototypes for final testing, offering a clear view of the 'Universe' platform's design and functionality.
Final High-Fidelity Prototype
Above are high-fidelity prototypes of the "Universe" flow, designed in Adobe Illustrator and Figma, showcasing my work in both design and development, guided by our team’s user research.
Final Front-End Implementation Video
This video showcases the fully implemented front end of the "Universe" flow, translating the high-fidelity prototype into a live experience. I handled the design, coding, and streaming API integration, with the project shaped by insights from our team’s user research.
I developed the Universe user interface by balancing functional design and branding, including logo creation, typography styling, color palettes, iconography, and UI components. I also produced a demo video using Adobe After Effects to showcase the product.
Primary
Logo Treatment
Ideal logo treatment is a black logo on a white background. Other treatments include a white logo on a black background.
-
Helvetica Neue
regular
- Thin
- ExtraLight
- Light
- Medium
- Regular
- SemiBold
- Bold
- ExtraBold
- Black
- ExtraBlack
- Thin Italic
- ExtraLight Italic
- Light Italic
- Medium Italic
- Regular Italic
- SemiBold Italic
- Bold Italic
- ExtraBold Italic
- Black Italic
- ExtraBlack Italic
AaAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
-
#FFFFFF
HexRgbCmykHsl
-
#000000
HexRgbCmykHsl
Showcase Demo Video
Above is the final showcase demo video of "Universe," created in Adobe After Effects. It showcases the project from problem to solution, featuring the fully implemented front end, which I designed and coded entirely. I also contributed to user research and led the design process, with insights from each team member reflecting our collaborative effort.
-
Venture Copilot
-
Universe
-
Guerin New York
-
Year Visualized
-
Abolish
-
Digitip
-
Ln Huis
-
Core
-
Project X
-
Chase Guerin
-
Zoom University
-
Omni
-
Theia