SBB Mobile App Prototype Created with Framer X. No React Code
SBB or the Swiss Federal Railways is the national railway company of Switzerland and probably the best company of its kind in the whole world. The SBB mobile app is part of their success and the most used app in Switzerland.
About a year ago i heard some not flattering comments about the SBB app. That got me thinking. Then Framer X was launched in beta and a few months ago the stable release of Framer X was released. If you don’t know Framer X have a look on their website. In a nutshell, Framer X is an app for designing and creating interactive prototypes for digitals products.
For comparison, this is a quick look (YouTube video) on the SBB App available on the App Store as of mid January 2019.
I did some prototyping with the Framer classic for the WordPress iOS app but i wanted to try Framer X and see what I could come up with for a real-world app. The goal was to keep it simple and iterate fast. No fancy animations. No flashy interactions. Just a new concept via an interactive prototype build with Framer X.
I spent about 4 days thinking and designing the prototype. Another week went by tweaking the UI and UX. I am currently doing some informal UX research with positive results so far.
Before you continue reading i want to address the elephant in the room. This is a prototype based on my assumptions, a little research and some established industry standards. I don’t have the amount of data neither the resources SBB has. This post is not about bashing the hard work the SBB app team did and continues to do.
I hope this fragile, new idea will turn into something tangible that can improve the lives of millions of people. Hopefully this prototype can start a conversation about making the SBB app even better.
If you want to see how the SBB app looks right now scroll all the way down to the bottom of this post.
Design is not just what it looks like and feels like. Design is how it works
Steve Jobs
The Starting Point
The SBB app has a unique UI with some quirks. It definitely stands out but at the same time it feels outdated and out of place on iOS 12. The familiarity of iOS is almost absent. Navigation can be tricky, especially with one hand on bigger smartphones. Discoverability can be problematic, requiring multiple swipes or taps. Overall, the UI and UX feel more complicated than they should be.
The prototype was created with 5 goals in mind:
- Familiarity with iOS UI and UX and industry standards
- Ease of use with one hand, especially on bigger screens
- Improved discoverability of features and core functionality
- Adaptive design that works on different screen sizes
- Design with added value for users and business
The Tab Bar
This is a new navigational paradigm for the SBB app. The goal is to improve the user experience and non-intentional communicative intent. Basically “talking to” the user without the user realizing it.
What is happening now
The SBB app uses a unique navigational design with multiple scrollable blocks of content. The user needs to tap or swipe to discover content in hard to reach and uncomfortable areas of the screen. Yes, i’m talking about the thumb zone and the ever increasing size of smartphones.
The new idea
The Tab Bar is a standard iOS UI and UX element used by 2 billion users. This familiar design can be found in many iOS apps. Phone, Photos, Music, Mail etc. A few icons appear at the bottom of the screen with each one representing a distinct functionality.
Adding a Tab Bar not only feels more familiar. It helps users navigate through the app more easily with one hand even on larger smartphones. Most importantly the Tab Bar promptly communicates which are the most important functions and features of the app. The Tab Bar sets the user’s expectations straight without the user even thinking about it.
The sliding sheet is a new element introduced in the app. This new area is easily accessible with one hand and expands to reveal more information like upcoming trips or different trip routes when the user searches for trips.
This nes concept works well with the ever increasing smartphone screens and it’s already familiar through apps like Google Maps, Apple Maps and more.
The SBB News Feed
This is a straight forward feature with tremendous value for users and the SBB business. The idea is for users to discover new destinations, trip ideas and SBB related news right in the SBB app.
What is happening now
SBB email marketing campaigns are already a thing that is called the “SBB Newsletter”. Clicking on an email link in the SBB Newsletter opens the browser and asks the user to complete the purchase via the browser. No deep links. Extra effort is required for logging in or jumping back to the SBB app and type the desired trip information.
The new idea
The SBB News Feed is based on the idea of the information feed. The same concept that billions of users are familiar with on Facebook, Instagram, Pinterest and many other apps.
Integrating the feed in the SBB app adds great value to users, simplifies the purchase process significantly and reduces user frustration. Users discover new destinations and buy tickets faster. SBB sells more tickets and helps our little blue planet by reducing the transportation environmental footprint while increasing the app’s usage and engagement.
The SBB news feed will be updated with new content when new content is available. The app settings should let the user decide which and if any push notifications will be sent for new content in the SBB news feed. A few examples might be:
- Push notifications for new destinations
- Push notifications for train schedule changes
- Push notifications for discounted trips
The Settings
App settings usually end up being a bunch of things no one but the user gets to see when they really need to. Settings are usually neglected and can make or break the user experience.
The inside of the phone we spent so much time on and it’s something that 99% of you will never see-because it’s the right thing
Jony Ive
What is happening now
The SBB app settings are hard to use. A bunch of nested menus in a sliding pane requiring unnecessary multiple taps and guessing.
The new idea for SBB app settings
A simple design with high contrast and good readability which fits any screen size. The new design is a list of items in full screen. The user can scroll and see all the available items at once. Everything is a tap away.
Instead of hiding behind the ambiguous hamburger menu, the new settings design uses the user’s SBB photo. The photo, which is available to and used by SBB in SwissPass, appears instead of the hamburger menu. This proposed design is based on two concepts:
- A design commonly used in many apps
- The user will be potentially triggered to tap on their own little photo
The SwissPass
The SwissPass is a unique feature of the SBB app. The SwissPass is more than just a public transport travel card, offering access to numerous third partner services like car rental, access to ski areas etc.
What is happening now
SwissPass is currently available through 3D Touch and Haptic Touch on the apps icon or via a hidden information tile on the upper part of the screen.
The new idea
The new design for SwissPass places the function right in front of the user. The 3D Touch and Haptic Touch features are still there but for people not aware of this, SwissPass is now more accessible than ever before.
The Favorites
The Favorites section is a straight forward concept. It borrows the familiar idea of favorite items from social networking apps but with a twist for tickets.
What is happening now
The SBB app offers some customization through a quirky touch interface and a few quick shortcuts for special types of tickets and favorites.
The new idea
Thew new favorites section is easy discoverable and easy to use. A list of predefined and/or user selected trips and tickets. The UI and UX offers unlimited options for each every user to add as many or as little items to the list.
The History
The SBB already offers a list of past trips but the UI and UX can be streamlined and improved in terms of readability and discoverability.
What is happening now
The list of previous trips is available through a title on the top right part of the app (not a thumb friendly zone) under the vague label “Trips and Tickets”. When tapped, the UI lists the upcoming tickets (if any) and some of the past trips.
The new idea
There are two important improvements for this section of the app. First, the history is accessible in the Tab Bar making it easier to access with the thumb (think one hand) and clearly labeled. Secondly, the list of old trips integrates contextual information for the date of the trip, making it easier for heavy users to find what they are looking for.
Conclusion
Framer X has proved instrumental into building this prototype. It was fun, fairly easy and fast. Very fast. Everything is built using Framer X design tools and standard animations. No React JS code was used at all. The only time i used “code” was for an override in the sliding sheet of the main screen of the prototype.
It’s almost magical how Framer X can transform a digital product and make an app better for both users and the business. That’s how i feel about it 🙂
I’m currently working on version 2.0, adding a second level of information and screens into the prototype. I wish Framer X iOS app will soon support offline viewing like the good old Framer did. That will make UX research so much easier.
A few things about this prototype.
- This is a prototype, a fun experiment, not a polished product
- All icons need optimization and OS specific design
- The person appearing in SwissPass is not real, neither any of the data
- All the content appearing in the prototype (images, news, names etc) is fake
- The SBB logo and logo design belong to SBB and was recreated as a button for the purpose of this prototype
- The SBB name is a trademark of SBB
- The images in the SBB Feed prototype are fetched in real time through Unsplash – which is a little bit tricky to get it work properly with images filters