The Bare Essentials — A Minimal Design Intervention
Heuristic Redesign of a Bus Travel App [A Case Study]
After the last redesign of Ecocline in 2016, I think it’s more than time again. My plan was to stick with the current design as much as possible and just change what is needed for better usability and accessibility. But even small changes can have a huge impact on the information output and how the story of the whole bus journey is told.
The App
Ecolines is a bus travel company consisting of a fleet of 200 buses in 22 countries. Unfortunately, their mobile application is a perfect example of bad usability. There is a lot of room for improvement. To gain some practice, I wanted to fix as many small issues as possible in 5 days. That’s why I chose it.
The Idea
Our job as UX/UI designers is to make things functional and usable[…]
My plan was not to reinvent the app or to restructure it in general. What I tried to do is to stick with the current design as much as possible and just change what is needed for better usability and to avoid confusion. I focused on heuristic bug fixing, a slight simplification of the information architecture, and better accessibility.
Preparation
In order to address smaller issues in the UI, there was no real need to test assumptions with hand sketches or low-fidelity wireframes first. So, I chose to work exclusively in high fidelity. As a paper-pencil person, it was quite unusual not to create sketches, but in this case, it saved a lot of time. Before I started, I had to analyze every screen first, highlighting every problem with a red box.
Header
Problems: The current header is combined with a white status bar, leading to poor contrast. The logo is prominent but hard to read, and its colors don’t match the app’s overall theme. The login button is large, blurry, and unclear in its purpose.
Solutions: I darkened the color of the status bar and changed the login icon to a more common one. It’s always a difficult step to touch the design of the branding, but in this case, the logo needed better readability. To stick to the former logo, I tried to pick up the line.
Navbar
Problems: The navbar has no boundary with the whitespace above, and there is no reference to the section you are currently in. The icons have varying weights, and there are more icons than necessary. Additionally, a clear indicator of the icons’ meanings is missing.
Solutions: The navbar now features a grey bounding line to separate it from the white space above, and a yellow line indicates the selected icon. A brief text description has been added to help understand the meaning of the icons immediately.
Eliminate Unnecessary Screens
The landing page of the current app employs an additional screen for each input field. To streamline the architecture, I chose to reorganize the landing page and work exclusively with dropdown suggestions, a common approach seen in other travel apps.
Why Small Changes Can Make a Huge Difference
Sometimes, even small changes can provide context, allowing information to begin telling a story. It informs us about what we need to know, what actions we can take, and what we are supposed to do. I employed two approaches to achieve this. Initially, I focused on creating a visual hierarchy through font size and color, ensuring that crucial information is presented first. Additionally, I incorporated arrows to guide the users’ eyes while reading information/content in a certain order.
Example: The existing app shows the travel information quite linearly, so it looks like a single bus ride with several stops. In my version, the travel is visually subdivided into three sections: the first bus ride, the change/waiting time, and the second bus ride.
Key Learnings
- It’s very difficult to stay consistent in the design.
- I should never change things just because I better like it.
- Assumptions are just assumptions.
- It doesn’t matter how exact I show the screens in original size on my computer, to get a realistic impression I need to show it on the device it’s built for.
Thank You for Reading
If you enjoyed this case study, feel free to clap or leave a comment. For more articles and projects, follow me or take a look at my website.
