493

How We designed the new UI of OxygenOS

  1. Gary C. OxygenOS Operations Staff Member Aug 17, 2018

    Gary C., Aug 17, 2018 :
    Preface

    Have you experienced the latest OxygenOS beta on OnePlus 5/5T? Let us tell you how the new design came about.

    Background

    OxygenOS draws on the Android-native feel, because that’s what our users want. To find that out, we started off with what people like about Android. Do they really like the stock design? What do they like about it? How much do they like it? Why do they like it? In the middle of 2017, we discovered that you want a clean, stylish system that’s easy to use.

    What is the design ethos of OnePlus? What is the brand value of OnePlus? The best Android experience – that’s what. It’s the value we always aim for, because we believe good design should be intrinsic and effortless.

    So, we shelved our old designs and started from scratch. We dipped into psychology and user needs to solve problems.

    How did we go about the design process?

    With key words

    Our aim was to know our users. What do they want? What are their pain points? What do they think a good OS is? We redefined our user groups, put out surveys and conducted interviews. Then we analyzed the results. That’s how we pinned down key words that lit the way forward.

    Flat & Minimal, Reduction, Bold & Clean

    Flat & Minimal

    We went for a slimmed down, minimalist design so users could focus on the important things. Why? Because we believe less is more.

    oos3.0.1.png

    Reduction

    By reductionism we mean the fundamentals of good design, aka natural rather than cool.

    [​IMG]

    Bold & Clean

    Bold and clean focuses on the scale and words of the interface, so users know that we’ve nailed what’s important to them.

    oos.3.0.2.png

    Trial & Tests

    We started our design based on the direction our key words took us in. It wasn’t easy, but it was worth it. Now we have a new version of our visual style with a special font and new icons for a truly OnePlus feel. Individuality is at the heart of what we do. That’s what we want to give you through the OnePlus construct.

    oos3.0.3.png

    But, during our initial review phase, things didn’t go as smoothly as we hoped. Some members of our team flagged issues with the new design. Is that really the theme? Why red? What’s with the square? What does the design say? Why is the avatar on the right?

    oos3.0.4.png

    There wasn’t time to overthink – we started to improve the design organically. With a demo ready to go, we launched a second round of surveys. And boom! Users liked it. Because of your suggestions, we put aside what we thought we knew and went with what you said. We also know it’s true that there’s a gap between paper design and how things work in the real world.

    oos3.0.51.png

    Feedback from users

    Around 80% of beta users preferred the new design. That made the striving and effort over the last year worthwhile.

    oos3.0.6.png

    There are still people who don’t like it…but we take that on board and keep trying for perfection. We want to give you the best Android experience. That’s why we say “Never Settle”.

    When you tell us that we heard your voice, we say that’s because we’re on this journey together. So, thank you.

    Never Settle!

    UI design team.png
     

    #1
  2. Majuran thas Honeycomb Aug 18, 2018


    #2
  3. Kartik Birajdar Eclair Aug 18, 2018


    #3
  4. the_reckoner Ice Cream Sandwich Aug 18, 2018


    #4
  5. NovinDavis KitKat Aug 18, 2018

    NovinDavis, Aug 18, 2018 :
    Appart from the status bar Icon's, I have loved all the changes that has come with the recent updates.

    Suggestions :- make OnePlus 5/5T Alert Slider change animation same as OnePlus 6
    Make power button animation same as OnePlus 6.
     

    #5
  6. izzykasha KitKat Aug 18, 2018


    #6
  7. lokesh_sharma Eclair Aug 18, 2018

    lokesh_sharma, Aug 18, 2018 :
    time for you t ocreate a now keyboard app icluding the same cutstomization ideas of oxygen os !!!
     

    #7
  8. NoInspiration Honeycomb Aug 18, 2018


    #8
    J6toes, L30nF. and sundeepkrtiwari like this.
  9. rohitanand Jelly Bean Aug 18, 2018

    rohitanand, Aug 18, 2018 :
    Clean and minimalistic that's what i want... and a black version of it too... :)
    Will look forward to get the new UI on my OnePlus 6.

    Kudos to Design Team...
    Awesome.. keep it up.
     

    #9
  10. Yashvendra_Singh_Raghav Ice Cream Sandwich Aug 18, 2018

    Yashvendra_Singh_Raghav, Aug 18, 2018 :
    thats cool...
     

    #10
    G_Patel_Bhargav_GlHw likes this.
  11. badulla.p Gingerbread Aug 18, 2018


    #11
    sundeepkrtiwari likes this.
  12. sathya durairaj Froyo Aug 18, 2018

    sathya durairaj, Aug 18, 2018 :
    In OnePlus 3T, ever since oxygen os 4.5 I didn't like the UI for contacts, messages, etc; Please bring the new UI to your beloved OnePlus 3T devices soon. Wanted to experience the full screen caller ID and other UI designs implemented now.
     

    #12
  13. Zaphodrocks Ice Cream Sandwich Aug 18, 2018

    Zaphodrocks, Aug 18, 2018 :
    It's nice to see the faces of the designers who have put in a shitload of work on something we interact with everyday. I don't have the new UI yet but I'm looking forward to it.
     

    #13
  14. shabs_88 Froyo Aug 18, 2018

    shabs_88, Aug 18, 2018 :
    @Gary C. I haven't used open beta but it looks flawless and soothing. I would rate it excellent. Will this be a part of future of OTA?
     

    #14
    V1534993839732 likes this.
  15. Umar Haroon Gingerbread Aug 18, 2018


    #15
  16. varunkatoch Cupcake Aug 18, 2018


    #16
    T1523998373990 likes this.
  17. Sidharth Shrivastav Gingerbread Aug 18, 2018

    Sidharth Shrivastav, Aug 18, 2018 :
    please increase the colour customization n setting scroll right to left and give app junk clear system default and alert option harmful theart change notification right or left corner in screen
     

    #17
  18. Sidharth Shrivastav Gingerbread Aug 18, 2018


    #18
    Subhadip Mistry and deevil like this.
  19. G_Nestoras_Sotiriou Froyo Aug 18, 2018


    #19
  20. michaelrayn Eclair Aug 18, 2018


    #20