Redesigning apps, 1
Application: dBus, app to check bus timetables
About me
Welcome to my first post ever! Before anything else, let me introduce myself. My name is Julen and I’ve recently finished my master’s degree in Application and Services Development for Mobile Devices.
Through my life, I’ve been using a ton of applications and I’ve always wondered why some of them don’t update their UI to keep up with the latest trends. This leaves us, the users, with applications that haven’t updated their interface in years, which gives the feeling of being outdated.
I like to think how those applications would look with an improved UI, so that’s what I’ll be doing through this post. I’ll be analyzing an app and trying to develop the improved-UI iOS version using SwiftUI. In addition, I’ll make the code available on GitHub.
The application
The application I’ll be redesigning is the official app to access the public transport of the city I grew up in, San Sebastián. The name of the company is dBus, and the application can be found in the App Store and the Play Store. Their web-page is www.dbus.eus.
I’ve been using this app since its release and I think it hasn’t been redesigned ever since, just receiving some performance updates. I feel like it was designed for the iPhone 6 — because it requires iOS 8 — and it hasn’t been adapted to other screen sizes. I use the app on my iPhone 7 Plus and the application is just a zoomed version of the app, thus elements are excessively big. I can’t try the app on all-display iPhones (like the iPhone 11) but I bet that it will show the gorgeous top and bottom black bars/stripes.
The application shows information about the time left for the bus to arrive at a specific bus station. You can also check the timetables of the buses and their routes. Moreover, it has a many other functionalities that I don’t use so often and feel like most people don’t use at all. Thus, I’ll reorganize these functionalities since I feel like the bottom tab bar has too many elements (10!!!), which can be a bit overwhelming.
The visual elements that are being used in the application are not necessarily outdated but I feel like they don’t follow the design trends that are being used through the OS.
The colors used by the company are dark blue (#0D3F7A) and green (#72BF44).
Redesigning the app
The first thing to do is deciding how I want to organize the functionalities of the app. I will use a tab bar with just four or five buttons/tabs. If this was an Android app I’d use a Navigation Drawer to give access to the rest of the services of the app, however, even though is commonly used, Navigation Drawers aren’t part of the Apple’s designing principles.
The sections of the app are:
- A map that shows all the bus stops.
- Timetables and bus routes.
- Get directions.
- Set alarms (this is useful to avoid missing the bus).
- Recharge the transport card.
- A video tutorial on how to use the app.
- Read QR codes at the bus stops.
- Search with AR functionality (opens Layar application).
- Settings.
- Information.
- Favorite stops (at the top navigation bar).
Taking into account the purpose of the app, I think that the main functionality is checking the expected time of arrival of a bus to a bus stop, alongside with the timetables and the routes. The favorite stops could also be an important feature for locals. I think that the option of setting alarms is very useful, but I don’t think that it’s going to be used as often as other services, since you can set an alarm once and set it to repeat every day.
I’ll start by creating the Tab Bar with the following sections: map, timetables and routes, favorites, directions and others. To do so, the first step is to create the project using Xcode and selecting SwiftUI. Once the project is created, it shows the typical “hello world” text, which we have to replace to develop the app.
The Tab Bar code looks like this:
TabView {
Text("Map")
.tabItem {
Image("bus-stop-icon")
.resizable()
.clipped()
Text("Map")
}
Text("Saved stops")
.tabItem {
Image("bookmark-icon")
Text("Saved stops")
}
Text("Bus lines timetables and routes")
.tabItem {
Image("bus-icon")
Text("Bus lines")
}
Text("More information")
.tabItem {
Image(systemName: "info")
Text("Info")
}
}.accentColor(Color("bus-green"))
}The used assets can be found on GitHub. I’ve used icons from iconmonstr for the Tab Bar.
The code above will show four tabs, but, for now, the associated views are just text placeholders, which will be replaced one by one. The Tab Bar looks like this:
Now it’s time to start creating the views. In order to do that, I recommend doing it in separated files, one for each view. To create a file we have to click on File>New>File… and select “SwiftUI View”. Give it a name and select the path. After creating the view, we can replace the Text element on the TabView with the corresponding view, for example:
TabMapView()
.tabItem {
Image("bus-stop-icon")
.resizable()
.clipped()
Text("Map")
}For the map view I’ll be using the default Apple’s map service. It seems like there’s a new Map element in the new SwiftUI version (WWDC 2020) but it has not been officially released yet (august 2020) so I need a workaround. I will follow this tutorial to implement the map.
I’ve decided to make the map occupy the whole screen so I have to explicitly tell the view to ignore the above safe area. The map will be in a ZStack in order to overlap other elements like buttons. Take into account that this is just for design purposes, so all of the data shown is fake data and doesn’t reflect the reality in addition to some buttons that don’t have actions associated (in case you decide to check out the GitHub code).
The map will show pins where the bus stops are, so, instead of using the default pins on Apple Maps, I prefer to use some that reflect that those pins represent bus stops. I’ll use the colors of the company to color the pins for light and dark mode.
To show the expected time of arrival of the buses, I’ll use a bottom sheet, just as Apple Maps does. I’ll follow this tutorial in order to implement it. Here are the results of my version of the map comparing to the original app.
The next view to develop is the one that shows the bus stops that the user has marked as favorites. They originally used a list to show the stops and so will I. I decided to follow a similar design but using my icon of the bus stop and adding the bus lines of each stop. This way the users have a more visual way of knowing which stop they have to look for in case they don’t know the name or the number of the stop.
For the view with all the bus lines I’ll be using a list too. The design is very similar to the original one but I’ll use the circular indicators as I did in the previous views.
Finally, the last tab is called “Info” and has a list of the rest of the functionalities of the app which I think are used less often. This tab could also be called “More” with a three-dot icon. I made two different views for this last tab, one following a more typical iOS design pattern, using forms and sections and the other one following a card design for each feature (and a gradient using the colors of the company just because). You can see both of the designs in the next picture:
I won’t be implementing the rest of the functionalities as this is just to propose a design change for the app by trying to reorganize all of the information that they offer. I know that the design that I’ve shown might not be revolutionary but just adapting the app to bigger screens and removing all of the functionalities from the tab bar is one big step forward to a better usability.
In conclusion, I think there are some services that the app offers that the users won’t be using and could be removed from the main screen. Besides, in an attempt to give the user more useful services, I’d add a Siri implementation so the user could ask Siri directly the time of arrival of a bus. Another interesting feature would be the possibility to recharge the transport card without leaving the app (the current one takes you to another webpage) or, in Android, let users recharge or pay using NFC. Additionally, I’d add animations to the app. Of course, adding the logo of the company would be necessary.
Let me know what you think, how would you improve the design and tell me if you want me to redesign another specific app.
If you have read to this point, thank you very much! Here is the GitHub repo:
