A new Fabulous journey in the mobile world
It has been over a year since our Material redesigned Fabulous Android app got the Material Design Award from Google Design team, and today I am really happy and proud to announce our new app release for the iOS platform. When we first started Fabulous 4 years ago, we simply didn’t have enough resources to build the app for both mobile platforms (and of course our personal love towards Android), this is why we decided to build the MVP with Android, iterates with it, and once we are confident enough (and having the right team), we will tackle the iOS version of Fabulous.
Fundamentally similar but a new experience in iOS
We are extremely proud of our Fabulous Android app — it (still) looks gorgeous with all beautiful pieces from Material Design. This is why when we first started having the conversation about the iOS version, we were slightly struggling because we weren’t sure whether we should be designing iOS version from the ground up, or bring over all the tried-and-true interfaces from the Android version.
At early 2017, we started to have some very early mocks with fundamental iOS UI and interactions — while it does feels like home to the iOS platform, but we felt that there is something more that we can do to provide the best experience to the iOS users.
Fast forward to June 2017, when Apple announced iOS 11, it was a well-timed and inspiring event, at least for us. While the core iOS experience doesn’t change much in iOS 11 compared to the previous version, but there are many visual changes that are much bolder (big title, bigger font sizes, solid icons etc.) and provides depth (card shadow in Apple Music and App Store, for example), we know that it’s going to be an opportunity for us to relook at the iOS app design and fit these missing pieces into it.
(Actually back in mid 2016, when Apple Music app has a complete redesign, we sense that there is a potential visual refresh in iOS, but since it was only in Apple Music app, it’s pretty hard to predict how it is going to affect the visual language of the entire system)
At that time, the app was already 70% developed based on the early design, and a redesign will definitely going to affect the release date. However, the whole team has a strong feeling that it’s the only way to provide the best Fabulous experience for the first version of iOS app, so everyone is so readily committed to it and trying really hard to make this happen before 2017 ends. And surely, we did it! We soft-launched it during December 2017 and since then we were thrilled to be featured as App of the Day in US App Store when we officially launched it at the start of 2018.
Rethinking the Navigation Interaction
In the current Android version, we use the conventional navigation methods as outlined in Material Design guideline (navigation drawer, tabs, and in-context navigation), so in the early stage design of the iOS version, the navigation model is all quite similar to the Android version.
I am a huge fan of the Gestural Navigation implemented by the Inbox team, and I thought that it will be interesting to use a similar navigation pattern in iOS version (though to be fair, in iOS there is a native gestural back navigation with edge swipe). Good thing is that the content hierarchy in Fabulous is pretty simple and shallow (most of the time they have Parent and Child hierarchy with 2 to 3 levels) unlike app like Google Play Store where you can go really deep since there are many links for navigating deeper.
I went on to do some researches to see what UI pattern would fit in our use case, feels native to iOS as well as resembling a ‘card’ when the child content is showing up since we use card elements a lot in Fabulous app, so I wanted to make sure the visual continuity is there during the navigation. I then came across the newly redesigned Apple Maps in iOS 10 which has quite some improvement compared to the previous version, and I am totally in love with it’s vertical sliding card UI and interaction.
Heavily inspired by it, I decided to adapt and turn all the conventional content navigation into this card model, and it turns out to be pretty good! We tested it with some early users and the feedback was overwhelmingly positive, so we decided to stick with it and perfecting it for the release.
Besides this new navigation interaction, we also use tab bar in iOS (similar to bottom nav bar in Android) and removed the hamburger menu (navigation drawer in Android) for efficient navigation.
The new design
There are a couple of design details in the iOS version that are I think worth mentioning:
Iconography
In iOS 11, Apple has finally moved away from the outline-styled icons into solid-styled icon (although there is study showing that it doesn’t really matter in terms of usability), so along with the new navigation model, I also took the opportunity to adapt the new icon style for all the icons in the app since the outline style just doesn’t cut it (it feels too light and unattractive for some reason), so approximately ~200 icons are all adapted to the new style even before iOS 11 official release.
The app icon also underwent some visual tweaks to better reflect the gradient nature of the colors in the iOS version.
Card and Button
In Fabulous, we used a lot of card component for various content like Letters and Goals, and in Material Design, card component is very comprehensively covered, so it’s great to have when we first building Fabulous. In the latest iOS 11, there are a couple of nice card component examples directly from Apple such as the new App Store and Apple Music app, we decided to use that card visual style as a base and adding a few more visual details to better fit them into the Fabulous environment, for example the gradient nature of the card, as well as the colored shadow based on the card color (so the card material is slightly translucent rather than a completely solid card).
Similar visual treatment is also made on all the important buttons, as we think that they deserve the similar attention as the cards from the user.
Speaking of gradient, thanks to Grant McAllister for his collection of little design tips by Steve Schoger which made me realize how we can easily generate a loveable gradient with just a single color input by adjusting the hue, and we are able to come up with a gradient style that is fabulously (pun intended) delicious.
Bold Title Style
When Airbnb had their product redesign with their newly introduced Design Language System, I am totally in love with the design details like extra white space, bold title and minimalist design approach, and with the introduction of the new large title style in iOS 11, it encourages me to re-look at the design of the main screens, and eventually we opt for a clean top bar with bold title, which allows the content such as the cards shines during the app usage.
Not all screens have new design though — some of the less frequently accessed screens like Settings, Create New Ritual, they are all deliberately made having the same look and interaction patterns as the native iOS UI elements since they should be really straightforward and iOS users should be able to get it on the first time (with the benefit of easier implementation!).
And of course, the iPhone X
As mentioned, the work on iOS design of Fabulous started in early 2017, and when Apple announced iPhone X in September, there is an ‘uh-oh’ moment in me. While the new iOS design, for the most part, should fit just nice and beautiful into the new screen, the tab bar is not looking that hot due to the disappearance of the physical home button, and obviously when I designed it, I am taking the bottom edge of the screen as the constraint.
So in order to make the app look beautiful on all the iPhones, we went ahead and spent some time to redesign the launch button — we ended up making it a fully rounded button. We also colored it with grey just like the inactive tabs instead of the Fabulous pink because we have some user feedback about the confusion on the active tab (since the active tab icon color and the launch button color is very similar) during our brief user testing.
Personally, I am glad that this launch button redesign happened — it feels like we have finally found the missing piece for this new iOS design.
What’s next?
While I am really proud and happy for what we have now, obviously there is still so much more to look forward — further design tweak in details, more features from the Android version, new form factor etc. Exciting time ahead! And we are just getting started :)
I would like to take this opportunity to thanks the entire Fabulous team for their hard work in making this happen and believe in the importance of design, and the grand vision of Fabulous. Thank you, team!
Download Fabulous at Google Play Store
Download Fabulous at App Store
We are hiring! We are now actively looking for QA Engineer, Android and iOS Engineer as well as Growth Manager — join us on this Fabulous journey!
