KiwiOS is a revolutionary SmartTV operating system that empowers users with seamless control using their smart devices. Our mission is to solve the problems that users face with traditional smart TVs and elevate their entertainment experience.
With extensive research and three rounds of user testing, we’ve implemented critical improvements to ensure KiwiOS is truly a game-changer in the industry. Discover the journey we've taken to create this masterpiece.
For this project I was the Lead UX Designer.
I was responsible for establishing the design system, managing components, advanced prototyping based on user flows, user testing and implementing user testing insights. I often led a lot of the design thinking exercises such as identifying trends and patterns from user feedback, understanding how our product fits into the market, and defining the research questions that would propel our work.
I was also responsible for managing our product schedule, organizing meetings, delegating work, maintaining documentation of our process, ensuring our team was in alignment and coordinating our pizza parties :)
KiwiOS is a passion project provided by a strong team of 5 talented individuals who made this experience possible. A special thank you to Gayathri Ramesh, JP Martinez, Aayush Jain and Ray Wei!
Initial research phase helped identify major pain points.
Weeks of an iterative design process
Team pizza parties
Rounds of user testing for constant improvement.
The 8 US household has
When it comes to purchasing a new SmartTV, users are provided with many options. Each OS has a different features and unique user experiences that can influence a user’s buying decision.
83%
Of US household have at least one SmartTV in their home
Navigation
takes too much effort and input
sometimes doesn’t get to the desired content
Bloated UI
useless information clutters dashboard and makes it
difficult to access favorite content
to better understand what users find frustrating with their current smartTV, we started by interviewing our loved ones, reading internet forums and SmartTV Reviews and found three main paint points in regards to the user experience (Not hardware related: i.e number of HDMI ports or color quality).
Searching
takes too long
would rather do a Google Search
Navigation
takes too much effort and input
sometimes doesn’t get to the desired content
Bloated UI
useless information clutters dashboard and makes it
difficult to access favorite content
Provide an easier way to navigate menus and screen
Finding a way to reduce user input on remote control that would be easy to adopt by building on a mental scheme that users may already be familiar with in their everyday life.
Provide a convenient and enjoyable way to search for content
Conducting a quick Google search smartphones is a fast way to find which platforms house specific content, but that requires two devices: Smartphone to search and SmartTV to stream. What if there was a better way to do this all on the SmartTV OS?
Provide a simple modern UI design with usability and accessibility in mind
Find a way to reduce the amount of "bloat" on the users screen to reduce cognitive overload. Also make it easier for users to access their favorite apps and content without having to deal with
Take inspiration from the best and incorperate it into our own design
Analyze the user experience behind similar technologies have approached this idea and implement the best features and user flows into our design.
How might we...
empower users to manage and watch diverse entertainment content and provide an enjoyable user experience?
Our team has created a game-changing Smart TV OS that challenges the market with its innovative approach to content discovery, providing users with a unified platform for managing and enjoying all their favorite movies, TV shows, music, and games, and wow-ing them with its convenience and efficiency. And it can all be controled from a smartphone
Onboarding
Onboarding is simple and easy to complete! Filled with large buttons and minimal text input, setting up your KiwiOS TV should be a breeze!
Easy Download.
KiwiOS allows the users to download their favorite applications from one screen during onboarding. This helps eliminate the navigating a SmartTV app store to household favorite streaming platforms.
HDMI Naming.
Users can also associate their HDMI ports with connect devices such as gaming consoles, no more reaching behind the TV to find out where which HDMI port the PS5 is plugged into.
Multiple Profiles.
Sharing a TV with family or roommates in the same household? With multiple user profiles, keeping your profile preferences independent of each other on a single device has never been easier. No more dealing with your roommate's true crime obsession impact your recommended feed of super hero movies.
KiwiOS is a One Time Setup.
The best part is that all with your permission, KiwiOS can remember your streaming services log-ins information, meaning that as you add KiwiOS TVs to your household, onboarding is as simple as logging in and having your dashboard look just like you like it!
One Stop Shop.
Navigating has never been easier! Having access to all your cross platform content on dashboard means having access to all of your recently watched shows without having to open each app individually
Tailored Content.
Customized carousels are powered by AI to help understand your tv viewing habits more and provide content that is relevant to you overtime. Whether it's exploring new content or rediscovering you favorite childhood movies, KiwiOS has you covered.
Touch Screen Controls.
Thanks to touch screen capabilities, there is no more clicking the right button 30 times to find your desired content, typing on the keyboard is much faster,
Powerful Product Pages.
Product pages tell you exactly where your favorite shows and movies are available, along with a trailer and being able to see what others are saying to help you make an informed decision! If content is not available to any of your current services, you can add it to your "notify me" list and be given a notification when the content switches platforms and becomes "free" to you!
Quickly switch between TV and Smartphone.
Imagine watching a movie on your phone and wanted to put it on the big screen, with KiwiOS you can do that with just a few clicks! You can also stop watching a movie on the TV and switch to your smart device if you need to make some popcorn or take the pizza out of the oven!
Media Controls.
Easily adjust playback speed, toggle captioning, or even set a sleep timer for those nights where you need some background noise to go to bed!
Kick off meeting
My team and I met to discuss our strengths, expectations and vision was for this project. We figured we would start off by asking our loved ones about their experience with SmartTVs to get a better idea of their behaviors and user experience. In the mean time, we did a few ice breaking exercises to get to know each other!
Synthesizing
After getting some data, quotes and ideas from our users, we organized our findings and feedback into themes and found three main pain points:
Searching: When we asked users how they searched for their favorite shows when they did not know where they were available, most users reported that they would pull out their smartphone, conduct a short google search to get their answer. We dug deeper and asked why they did not use the SmartTVs built in search engine it boiled down to a few reasons. Simply put, users said typing on the TV took way too long, loading search results felt sluggish and sometimes the content that would appear was not relevant nor provided enough information about where to stream, therefore, it was much easier and faster to use their smartphones. Others stated that their TVs did not have a searching function,
Navigation: Users reported that navigation required a lot of clicks and presses, a few users mentioned that they loved how the scrolling gestures on the AppleTV remote allowed them to skim items very quickly, especially if they did not know what they wanted to watch and were "window shopping".
Complex UI: Some users felt that their screens were bombared with too much information, too many ads, too many irrelevant content. Roku users mentioned they loved the simplicity of an app menu that made it easy to jump into their favorite streaming apps
We started thinking of how we could provide these experiences. We got a few ideas that involved using the smartphone as a primary remote control device for the SmartTV
We figured that a Landscape mode phone app to control the SmartTV (similar to casting, except it would be real time screen mirroring) would allow the user to use their devices native features such as an on screen keyboard for faster typing, touch screen gestures for easier navigation, mobile app style dashboard to make the user feel familiar with the UI layout. Kiwi Touch was the most interesting, as it would be supplement for a lack of physical controls like a tv remote.
Not having tactile buttons like a traditional remote meant that we would have to be creative with how we designed the navigation aspect of the project, and we also wanted to make sure we highlighted some of the benefits using a handheld device to control the TV.
Searching
takes too long
would rather do a Google Search
Navigation
takes too much effort and input
sometimes doesn’t get to the desired content
Complex UI
useless information
difficult to access favorite content
Searching: When we asked users how they searched for their favorite shows when they did not know where they were available, most users reported that they would pull out their smartphone, conduct a short google search to get their answer. We dug deeper and asked why they did not use the SmartTVs built in search engine it boiled down to a few reasons. Simply put, users said typing on the TV took way too long, loading search results felt sluggish and sometimes the content that would appear was not relevant nor provided enough information about where to stream, therefore, it was much easier and faster to use their smartphones. Others stated that their TVs did not have a searching function,
Navigation: Users reported that navigation required a lot of clicks and presses, a few users mentioned that they loved how the scrolling gestures on the AppleTV remote allowed them to skim items very quickly, especially if they did not know what they wanted to watch and were "window shopping".
Complex UI: Some users felt that their screens were bombared with too much information, too many ads, too many irrelevant content. Roku users mentioned they loved the simplicity of an app menu that made it easy to jump into their favorite streaming apps
We started thinking of how we could provide these experiences. We got a few ideas that involved using the smartphone as a primary remote control device for the SmartTV
We figured that a Landscape mode phone app to control the SmartTV (similar to casting, except it would be real time screen mirroring) would allow the user to use their devices native features such as an on screen keyboard for faster typing, touch screen gestures for easier navigation, mobile app style dashboard to make the user feel familiar with the UI layout. Kiwi Touch was the most interesting, as it would be supplement for a lack of physical controls like a tv remote.
Not having tactile buttons like a traditional remote meant that we would have to be creative with how we designed the navigation aspect of the project, and we also wanted to make sure we highlighted some of the benefits using a handheld device to control the TV.
💡
Universal remote on phone
💡
KiwiTouch (inspired by Assistive Touch)
💡
Horizontal mode (similar to TV)
💡
Use touch response & keyboard
Initial Sketches
We then did crazy 8s to quickly visualize our ideas. I really appreciated the amount of diverse ideas we got from one another in the span of a few drawing sessions
We then digitalized them and continued to up the fidelity and get informal feedback about our designs
We asked for feedback on our designs and found some growth opportunities. Since this was not a functional prototype, we did not consider it to be "user testing". This led to us moving to mid-fid for our design. We decided on a design system (typography, color palette, layout choices and more).
We began our testing by sharing a few images of our initial digitialized designs (lofi v1) and it worked! It seemed that users really enjoyed the idea but the confusion with certain UI elements.
The illusion of this "digital experience" was broken by the lack of connectivity between screens, and users were unsure about where content would be offered.
Unclear whether it would take me directly to Netflix?
Where will I watch this content?
We organized our feedback for each screen and identified areas for actionable feedback. Essential our goals were:
- Make the user flow more realistic using information architecture
- Decide on a design system for more consistency
- increase the fidelity
Taking inspiration from others
While having a unique idea or concept sounds great, we felt that there is always every design choice and idea is related to something else in some way. We hit a roadblock when it came to trying to create something that was a viable product that had never been done before. This challenge of trying to be different, yet remain something that people would want to use was a huge pain.
There is no such thing as a new idea. It is impossible. We simply take a lot of old ideas and put them into a sort of mental kaleidoscope. We give them a turn and they make new and curious combinations. We keep on turning and making new combinations indefinitely; but they are the same old pieces of colored glass that have been in use through all the ages.
- Mark Twain
Eventually we realized that when we framed our product as an opportunity to learn from other products and see what they did well and how we could incorporate those ideas into our own product to make something that was derived from the best of the best, it make working on this project so much easier and more fun!
We did a comparative analysis to see how different services handled certain pages like Home, Product, Search Result pages and more. We learned so much from streaming services like Amazon Prime, Netflix, Hulu, Rakuten, Crunchy Roll, HBO Max, Paramount Plus and more. We discussed what we liked about each version of those ideas and decided to move forward with our favorite ideas
We did a comparative analysis to see how different services handled certain pages like Home, Product, Search Result pages and more. We learned so much from streaming services like Amazon Prime, Netflix, Hulu, Rakuten, Crunchy Roll, HBO Max, Paramount Plus and more. We discussed what we liked about each version of those ideas and decided to move forward with our favorite ideas.
Huge Design Decisions
While we did implement our user feedback from the first round of feedback, we really wanted to have something special to show people before we put it out for testing. We decided to iterate again to create a more realistic prototype and had to make a few huge design decisions. There were not easy decisions but felt that they were necessary
🔄 Switching to Portait mode
We genuinely desired to stay horizontal since the typical SmartTV possesses an aspect ratio of 16:9, making it easy for the smartphone to directly reflect the SmartTV's content.
However, we realized that typing horizontally is something out users were not familiar with and the vertical design is more in line with what most streaming mobile apps use for their layout.
❌ Removing KiwiTouch
We spent several weeks with iOS's "assistive touch" to understand what it would feel like to have KiwiTouch live on our smart devices. We found that it was always in the way and our users did not really understand what the KiwiTouch button was meant to do. We do believe in the idea of find somewhere to include additional controls to compensate for the lack of tactile buttons but we will need to find a better way to execute this idea. We presumed that maybe adding a small menu dock on the bottom of application would be a good place to house these control but we have yet to user test this idea.
✨ Aesthetic Choices
✅ Got rid of the gradients
because it distracting from the main focus (shows, apps, and movies) and it would help reduce eye strain and cognitive load.
✅ Made the content less repetitive
Helps the application more fully realized and less "Lorem Ipsum".
✅ Renamed the main carousel headers
Made the carousel headers more appealing and personalized based on what users might find important
Testing
Testing was done in three rounds over the course of 4 weeks. It took a lot of time to get here but we felt that we wanted a more functional product to get more feedback on the usability and user experience of the design.
User Tests involved asking the users a few short questions about their SmartTV usage and then were asked to complete a series of tasks that we felt were representative of actual tasks that SmartTV users complete relatively frequently.
In total we conducted over 28 user tests between the 5 of us. Most were moderated others were done via UserTesting.com
Going into testing with a plan provided a lot of great feedback, but we definitely had to have a meeting or three to discuss the parameters of how we would test our design
Defining Our Tasks
For all of our tests we decided to ask users to complete tasks that we felt were realistic and somewhat informed by our users behavior based on our initial research.
These included task that targeted:
- Onboarding,
- Searching for content
- Playing Shows
- Casting to SmartTV from Smartphone
- Deleting shows from watch history
Defining Our Research Questions
We wanted to understand: what worked, what didn't, what was confusing and what would users change. We wanted to know where the differences were between the user's expectation and the current status of our prototypes.
Testing round one reveals a lot of insights about the user flow of the application
Pictures
Insights
We had a System Usability Score (SUS) of 83.3. Our three most common themes for feedback were about: onboarding, deleting shows, and media controls.
I wanted to see some sort of animated completion message that onboarding signified was complete
Onboarding.
Provide more delighters in UI for satisfaction during onboarding
Deleting Shows.
Make it easier to access the modal and update language to be more clear. Add new way to delete shows
Media controls.
update icons to be more clear and make “episode” modal collapsed by default.
Iterating
We had a System Usability Score (SUS) of 83.3. Our three most common themes for feedback were about: onboarding, deleting shows, and media controls.
Testing round one reveals a lot of insights about the user flow of the application
Pictures
Insights
A System Usability Score (SUS) of 83.3
As a mother, I’d like to control what ratings my kids can watch
Delete Show Flow:.
Several users thought delete to delete a show by clicking on the account icon. Built out this flow for next round.
Product Page.
It was difficult to navigate task. Some Buttons had to be reworked and others added. Made sign-in process easier.
Kids mode.
onboarding should have more control with rating restrictions and age ranges, restricted access to app store
#of participants,
Pictures
A System Usability Score (SUS) of 83.3
Insights
A System Usability Score (SUS) of 88.3
“The experience is simple and direct, akin to numerous other operating systems out there.”
Delete Show Flow:.
Users found this task to be much easier now that we gave them the option of deleting shows, instead of forcing them to do it how we initially intended by using the small (…) dots on each videos thumbnail
Full screen mode
Users loved the idea of being able to switch the video playback between their TV and Smartphone but they did not like that it was not currently possible to watch full screen video in landscape mode. Unfortunately switching phone orientations in Figma's prototype mode is currently not possible, thus is a limitation we can not necessarily build out.
Screen time for kids mode.
Parents loved the idea of being able to limit the content that is readily available to their children, and they want to be able to control how much time their child is watching tv. This would be difficult to
Overall
It seems that a lot of the feedback was positive in nature and a lot of the actionable feedback was oriented towards building out new features and functionality! This is great because we were worried that users would provide feedback about how certain aspects of the prototype are broke, yet no negative feedback was provided by users.
Final Designs
Development
KiwiOS is was one of my favorite projects to have ever worked on! It required coordinating, planning, thoughtful designing skills and a lot of team work to make this project possible. This is my reflection part of the UX Case study, where I talk about the behind the scenes
Timeline + Feature Prioritization
Creating a project of this scale in a short period of time was not an easy task. There were so many late night group calls, people working long hours to make this project what it is today. I thank everyone for their contributions. In terms of understanding and prioritizing what we wanted KiwiOS to be as a minimum viable product meant us discussing what features and screens we wanted to build out. This meant there were a lot of great ideas or flows we wanted to build but there was just simply not enough time nor resources to do it.
Technical Limitations
Sometimes we wanted to pull off some crazy ideas but learned that Figma's current state (May 2023) would not allow for certain functionalities. For example, being able to rotate the screen to enter full screen video on mobile is currently not possible because Figma does not allow for orientation changes to occur mid-prototype. Being able to simulate the casting experience was a difficult task and required a lot of creative thinking, we made a version that simulated what it might look like but it was not a fully realized experience. We also wanted to show what scrolling on the smartphone would look like in terms of how the TV mirror the user's inputs. This is possible in other softwares like ProtoPie but we did not get enough time to check that out due to time constraints.
Cooperation
As UX Design Lead, I really wanted to feel like a leader and not a manager, I did not want my team to feel like I was over working them or asking them to do anything I was not willing to do myself. I did my best to make this group feel like a safe learning environment where experimentation was encouraged and failure was seem as one attempt closer to finding the right solution. Being able to make everyone feel like their input and ideas were valued was not as easy as I thought. Saying "no" to a great idea that would push back our timeline and cause us to miss deadlines was not an easy thing to do. I did sit and chat with my team multiple times for constructive feedback to be a better leader and it was eye opening how much I could improve. I think being friends with your group is more important than skill in terms of creating a project that reflects all the passion and talent of the people working on it.
Future Steps
KiwiOS has so many domains to grow! I have divided our future steps into three phases. Short term is immediately implementable, mid term requires some strategic thinking and the long term would take years of research and development to become a reality.
Short-Term
Stage 1
More functionality
and features
Add tooltip tutorials
Mid-Term
Stage 2
Multi Device Support
Smart Home Integration
Long-Term
Stage 3
AI to improve UX
Community voting to improve UX