162
#PMChallenge - Reworked OxygenOS Experience

  1. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 20, 2019

    Its.Leandroo , Feb 20, 2019 :
    [​IMG]

    Hi friends,

    Over the years, software has changed quite a lot. From feature-improvements to design overhauls. I have seen the industry move their focus from features to looks, and back.

    Android and Oxygen OS have come a long way, with Android being more mature, and Oxygen OS having it's own identity while not moving far away from the Android we know from AOSP releases. The past years have been very exciting, with the introduction of many features, like full control over accent colors, gaming and reading mode, gestures and more.

    I want to take things a step further, however. Finding the balance between features and design is one of the most important aspects of a phone, because we interact with it uncountable times a day. I wanted to create a consistent, fluid and burdenless experience that makes the user feel in control, while being focused on the things that actually matter.

    What's the problem?

    In today's world, we have people from all ages using modern technology. The issue here is, that most technology has never been made with all ages in mind. Take computers for example; older people often struggle because it's not clear how to interact with it. Younger people take it for granted that you need to click on English to change the language, older people won't. Technology has become technical in the areas where it shouldn't. The same applies to smartphones, how do you explain that pressing the volume button and the power button simultaneously triggers a screenshot, and what is a screenshot? This needs to be solved.

    Who are the users?

    The new "experience" will be suitable for everyone, of all ages. It will be more pleasant for younger people, and easier to understand for less-technical people. It also brings new possibilities for more technical people, like easier theming, customizability and personalization.

    Nobody should be left behind, which is why this experience will be available on the OnePlus 3 and newer. No hardware changes are required to implement this new experience.

    User Value

    This experience will be valuable for everyone who finds it important to have a user experience that is as optimal as possible, while keeping all the important and fun features. It's more consistent, customizable and most importantly, easy to use.

    Existing features, and why this is better.

    Many companies focus on design and usability. We have seen Samsung releasing their OneUI, Microsoft implementing Fluent Design and Google making their product line consistent with Material Theme. They all have their advantages and issues, but they are all used in different places.

    The advantages of this new Oxygen OS experience exists out of a few parts: Consistency, usability, customizability and: easy to implement as a developer.

    All of this will be done, while keeping the current identity of Oxygen OS.

    Consistency

    We all have had that moment when we use or device, and think: Wait, wasn't that other arrow different than this one? Or: Why does the Windows Explorer look different than any other program? This is an industry-wide issue. No more for Oxygen OS: this experience will solve that for good. Consistent color-usage, corner-radii, font sizes, and more.

    This will make the experience for users more pleasant, as they don't have to adjust their selves when you go to a new screen, everything will feel familiar.

    Usability

    As a result of consistency, the usability will be dramatically improved. Basic interactions like swiping, long-pressing and tapping always needs to be consistent so users will not be surprised that something unexpected happened because they thought something else will happen. A good example of this is a back button. Does it really go back? does it go to the home screen? Does it go to the homepage of an app, or just the previous step in a process? You'll never know.

    Customizability

    This is something many users will appreciate, customizability. Because of the consistency in design, it will be easier to say: those elements need to be blue, these need to be white, and this always needs to be red. This should also help with Dark Mode, because there are only so many colors, all used very consistently.

    Easy to implement

    Development takes time. Design takes time. And it just so happens that time is money. One of the most important things to take care of, is making it easier for the development team to implement new features and design. How? Let me explain.

    When using X amount of different elements, with a consistent styling, developers are able to re-use components instead of creating new ones, saving time. The same applies for new features, you only have to think about how the feature will work, because the design is already there for you to use. This will drastically improve development times, something that is important in today's world.

    Showcase

    Before I explain on how to implement this new experience, let's go through some of the basic principles. It's impossible for me to fit it all inside this thread, but I created a gallery for you to go through everything in detail after we're done talking about the basics and implementation.

    Note: There is a maximum of 20 images in a thread, click here to show all designs

    Let's dive in.

    [​IMG]

    Starting with when the user turns it's phone on for the first time. Currently, you're being greeted with a blue screen, with little to no text on it, neither does it have a welcoming illustration. Something needs to change here.

    As seen in the picture above, you'll be greeted with a welcome message, giving you the instruction what you should do, and what will follow next. This welcome message is strengthened with a illustration of a person holding their phone. At the bottom for the screen, there's a "continue" button. Pressing it will take you to the next step; choosing a language.


    [​IMG]

    Instead of assuming that people know you need to tap on English to get a list of languages, you'll get a nice list of the languages you can scroll through and choose from. Providing users the same experience in all languages is a key aspect of how people feel when they use a product. Once you're done choosing your language, tap on continue.

    You probably notice the trend here, a blue header, with the part of the boarding process you're currently in, with the title of the step below it. Then, there's a description/explanation of what the current step is about, and what you should do.


    [​IMG]

    These days, a phone is nothing without internet. It's important to guide people through the process of setting up their connection, so they can connect to services and download apps later on.


    [​IMG]

    With so many parts of people's life happening online, security has become an important factor these days. Today, there are many different methods so get access to a phone; passwords, drawings, voice, or even your face. Some features are more secure than others, but above is an example of how the first screen of the face-unlock process will look like.


    [​IMG]

    People want to feel unique. We all like to wear our own style of clothing, we walk differently, we all live different lives, even though we are living in the same world, together. Having the option to personalize your phone is one of the aspects Android and Oxygen OS are known for. Many of these features aren't in plain sight, however. With the new setup process, people will be asked to choose their favorite color. This will then be used throughout the interface, giving their phone a personal feel, because it fits their lives. This principle could also be used in areas like fonts, themes and icons.


    [​IMG]

    There are two groups of people, ones that love to have many built-in features, and ones that prefer a clean phone without the apps they don't like or need. This is why the option to choose which apps to install is a great addition to the current setup process. It gives everyone full control over which apps to install, eliminating the need of polls to decide on whether or not ship a phone with certain apps.

    Please note: Apps will be delivered through the Play Store to be able to update them separately from Oxygen OS itself. This will speed up fixes that apply to either the apps or Oxygen OS.


    [​IMG]

    Phones often are just glass, metal and other materials combined together. What if, we could make a phone more personal? Asking users to enter their name, will give us the ability to personalize the experience even more later on. For example, when you start up your phone the next time, after the boot animation, it will say "Hi there, Ruby", for example. These little touches make the experience and engagement so much better, and it's something you won't find on any other phone.


    [​IMG]

    OnePlus is all about the community, getting people together and having the time of their lives. What more can you ask for than a letter from Carl after you're done setting up your phone? With the OnePlus 5, a letter from Carl was included in the box. Thanking users for choosing the OnePlus 5, and inspiring them to take the best pictures they could. Let's welcome everyone to OnePlus, by including a letter in Oxygen OS.


    [​IMG]

    Sometimes a glance at your screen is enough to know what's going on. At the same time, power efficiency is important, too. Lifting up your phone will reveal the time, date, notification icons and the fingerprint indicator. Tapping on the screen will show the messages of those notifications, while pressing on the fingerprint icon will unlock your phone directly, and bring you to the home screen. (Full images in the gallery).


    [​IMG]

    Productivity. Given that I'm working 10-12 hours a day, it's important to me that information can be accessed and actions can be triggered in a breeze. Introducing, the reworked Shelf. With the new design, a lot of space is saved by removing unnecessary paddings and margins. Removing the icons next to widget names helps to remove clutter, while keeping a very consistent color usage.


    [​IMG]

    The same applies for when you're trying to be productive in the evening. Oxygen OS will have 4 themes. Colorful, Light, Dark and Amoled. Some people prefer having a grey background, so the interface is more consistent with Google's apps. Others prefer a pure black interface to save battery. The best option here is to provide both. (All color possibilities are visible in the gallery).


    [​IMG]

    To keep your apps organized, there's the new app drawer. Not only has it gotten a redesign, it also has new features, like sorting, folders and recommended apps. Recommended apps are clearly separated from the rest, giving a clear indication of what the suggested apps are.

    The wallpaper does shine through at the top, giving a more immersive feel. When on the home screen, you can swipe up, with the drawer title, options and suggestions fading in on a different speed than the card with apps, creating a joyful parallax effect. When scrolling down on the drawer, the card with apps will scroll up on top of the suggested apps and title-bar.


    [​IMG]

    To create a consistent experience, all default apps should get a rework to match the setup and launcher designs. As you can see, the extensive use of cards, brightness differences and white-space creates a clean-looking interface, which is also easily modifiable to match the system theme colors.


    [​IMG]

    Every once in a while there's that moment when you want to record a part of that favorite song of yours to share with your friends, to keep them busy. It has been redesigned to match the new look, while keeping the recognizable colors from before.

    I have replaced the three dots with two icons, left for settings, right for showing all recordings.


    [​IMG]

    Just like with the other apps, the Gallery has been reworked to be able to provide consistency across apps. You'll still have the ability to pinch your fingers to change view modes, but by default more pictures will fit on the screen, giving a better overview of your carefully taken pictures.


    [​IMG]

    Pay close attention to the colors here. In this case, the user has chosen for a Dark Theme, instead of the Amoled Theme. This means black parts of the UI will be replaced by dark grey. This should also help identify the borders of an image that has black objects or edges.


    [​IMG]

    Not much was needed to make the Community app consistent. The slider has now been put into a card, while the preview images of threads have been rounded off. The position indicators have been rounded aswell. The background has been made a little bit darker than pure white, to create a contrast between the feed and tabs at the bottom.


    [​IMG]

    Currently after taking a screenshot, depending on what Oxygen OS version you're on, you will see either the screenshot fill almost the whole screen, or it will shrink into this little view in the bottom right. To keep the interface consistent, this preview has been rounded off, with a button underneath that will trigger the expand feature. If you look closely you'll see that the text "Expanded Screenshot" has been replaced by just "Expand", to remove the clutter and increase the font-size. Making it easier to read from a distance, or when your eyes aren't in an optimal condition.


    [​IMG]

    The quick settings panel has probably got the most controversy over the years, from discussions about how many icons there should be, what information it should provide, and many more.

    In this design I chose for a clean look that provides the user with the info need often need. The current carrier has been removed, given that you probably already know which carrier you have, so seeing that name all the time is pretty unnecessary.

    I have moved the settings icon to the top right, to give the card itself a cleaner look. At the bottom of the card, a pill is visible to indicate you can expand that card into a larger view, showing more options (account switcher, network status and toggles).

    Implementation

    The idea behind the design was not not only improve the user experience, but also to make it easy for developers to implement. There are a few rules to follow:
    1. There should only be a few font sizes, in my designs I used a total of around 6 different sizes, in a consistent manner.
    2. Icons in apps should always be the same size, wherever they are located.
    3. There should one be a few variations of each component. For example: a button with a background and a button without a background.
    4. Empty screens should always contain a title, description and illustration.
    5. All apps should respect the 4 themes: Colorful, Light, Dark and Amoled.
    6. Descriptions should always be clear to the user, and explain what to do, for example: Press continue to customize widgets.
    7. Components should be able be re-used. This will not only make it easier down the road to develop new features, but it will keep the code base clean and consistent.
    Every app has the same looks, but they all have their own accent color when the system theme is set to colorful. Then you set the theme to any of the other 3, the accent color that the user chose will be used in all apps.

    Guidelines and resources

    As it's really hard to create a user-flow inside a thread, and include all designs (42) in one thread, I have created a web-page showcasing all screens including a description.

    Click here to show all designs

    I have created all mockups inside Adobe XD, which you can download the .zip file here. In case you don't have Adobe XD, I included exported versions of the designs as .png, aswell.

    If there are any questions, please feel free to post them below.

    Never Settle.
     
    Last edited: Aug 9, 2019

    #1
  2. FlixbusLennart
    The Lab - OnePlus 6 Reviewer Feb 20, 2019


    #2
  3. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 20, 2019

    Its.Leandroo , Feb 20, 2019 :
    Hahah! I couldn't stop writing. I wish I had more time but that would result in writing a book.
     

    #3
  4. mahyunk
    Froyo Feb 21, 2019

    Last edited: Feb 21, 2019

    #4
  5. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 21, 2019

    Its.Leandroo , Feb 21, 2019 :
    Thank you! I'm glad you like it
     

    #5
  6. 100percent
    Eclair Feb 21, 2019

    100percent , Feb 21, 2019 :
    This will be awesome if the developers add this kind of design into their software system. Good job bro!
     

    #6
    amitay1307, Chiliry, hany13 and 2 others like this.
  7. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 21, 2019

    Its.Leandroo , Feb 21, 2019 :
    Thanks! I appreciate it
     

    #7
    Rohith47 and Shivang Joshi like this.
  8. David Y.
    Global Community Manager Staff Member Feb 25, 2019

  9. FlixbusLennart
    The Lab - OnePlus 6 Reviewer Feb 25, 2019


    #9
  10. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 25, 2019


    #10
    David Y. likes this.
  11. Venky61
    Jelly Bean Feb 26, 2019

    Venky61 , Feb 26, 2019 :
    I love your attention to details... Leaving this contest aside, with your design expertise you can be given the project to create the startup help for the upcoming OnePlus phones... :) Kudos
     

    #11
  12. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 26, 2019

    Its.Leandroo , Feb 26, 2019 :
    Thanks a lot Venky! It would indeed be something I'd love to do.
     

    #12
    elitegenius and Venky61 like this.
  13. ArcadiyKulchinskiy
    Froyo Feb 26, 2019


    #13
    hany13 and Its.Leandroo like this.
  14. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 26, 2019

    Its.Leandroo , Feb 26, 2019 :
    Hahaha, you got it right! Thanks a lot btw ;D
     

    #14
  15. alessiodales
    Gingerbread Feb 26, 2019


    #15
    Its.Leandroo likes this.
  16. Moin2200
    KitKat Feb 26, 2019

    Moin2200 , Feb 26, 2019 :
    This is definitely one of my favorite suggestions. The presentation and the illustrations are very well made and so pleasing to the eyes.
    It reminds me of Samsung's oneUI which is a good thing.
    Well done dude, i wish i had seen it before but it seems to be have been swallowed by all the other threads going about.
    I agree that OxygenOS could use something that would set it apart from other stock android experiences, something that would be more pleasing to use.

    It probably won't go far, but i'm still happy you took your time to show off this idea.
     

    #16
    Bintang12, superplus, snapjag and 6 others like this.
  17. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 26, 2019

    Its.Leandroo , Feb 26, 2019 :
    Thanks! Now that I look at it, it does have some aspects that are comparable, but in the end you can't make it all unique.

    Yeah, I posted my thread 2 days before the deadline because I spent so long correcting a few things and building the OOS animation for the website.

    Thank you! It took me a while to figure out how to present them. It's always a challenge when you have limited space ;P
     

    #17
    superplus and snapjag like this.
  18. alessiodales
    Gingerbread Feb 26, 2019

    alessiodales , Feb 26, 2019 :
    Smoother than mine :p
     

    #18
    Its.Leandroo likes this.
  19. Its.Leandroo
    The Lab - OnePlus 6 Reviewer Feb 26, 2019


    #19
    alessiodales likes this.
  20. alessiodales
    Gingerbread Feb 26, 2019

    alessiodales , Feb 26, 2019 :
    All of your images and rendering are smoother than mine. I like it. Next time I'll try to do better :)
     

    #20
    Its.Leandroo likes this.