App Redesign: Via Eurasia
During my time as a student with CareerFoundry, I was given a real-life scenario that I would experience as a designer - a redesign. The client, Culture Routes Society (NGO), had a recent acquisition that provided an extra budget to revitalize their MVP.
I was given the task of updating their app’s design. I would decide on which elements worked in the past, and also provide suggestions to areas that can be improved upon. A copywriter was hired to clean up the app’s copy, and I’ll be working alongside them to implement user feedback into the new design.
Problems
Since the MVP had been out for awhile, the client was able to receive valuable user feedback:
Navigation within the app is confusing.
There are more screens than necessary.
The branding and color feel dated and unsophisticated, and they don’t follow accessibility guidelines.
As you can see from the image above, the users were correct that the app’s layout is a little confusing. However, before the redesign could start, we were also given notes from the Creative Director that would help the design process.
More Problems…
The app’s “Home” page looks like a legal document and is uninviting. Experiment by moving the sponsor logos and information to the “About” page. The layout of the “About” page should then be reorganized to make it more visually appealing.
Once all the legal text and sponsor logos have been removed from the “Home” page, design a new logo and create an impactful “Welcome” page (to replace “Home”).
Remove the “Check Before You Go” page and replace it with a new menu that includes the same 3 button topics (Route Updates, Weather, Guide Book).
Via Eurasia’s brand typeface is Inter, which you shouldn’t change. You can, however, adjust the size and weight of the text on each page to create a better hierarchy and improve accessibility.
Not every Frame needs a complete redesign, but they should all be improved from an accessibility standpoint. You might choose to keep the same layout for “Routes,” “Route Detail,” or “Points of Interest” and just update the brand colors to comply with accessibility best practices, for instance.
Plan of Action
With all the information given, it was time to break down the project into manageable chunks so that it could be finished in a quick and professional manner. The three main items that needed to be addressed were: accessibility, color palette, and user flow. But the first thing to do was to visit their website and learn more about them.
Process
Visiting Via Eurasia’s website I was able to learn more about the company and to take notes about the differences between their site and their app.
Right away, I noticed the colors that they chose for their website were different than their app. One being the color orange, it was not found on their website but was one of the main colors in their app.
After looking through their website and taking notes of the colors they used, I was able to come up with a more modern and cohesive color palette.
If you noticed, I didn’t choose to use the purple from the website as I felt that it was too overpowering of the other colors and wouldn’t be great for accessibility. By keeping colors simple, I was able to make sure the users weren’t overwhelmed by what they were viewing - leading to a better overall experience while using the app.
Now that the color palette was updated, it was now time to focus on the next big thing - accessibility.
I took the time to research traveling apps to see how they laid things out for the users. One app that I settled on for inspiration and layout was the hiking app, AllTrails. I felt that this app had a clean layout that the Via Eurasia app could benefit from and make their layout more accessible for their users.
As you can see, I took certain aspects of the AllTrails app’s design and incorporated them into Via Eurasia’s design. It allowed for a more familiar feel when using their app. One thing I noted while updating the main screen for the app was the original app did not have a “main screen.” You would click “Select route” and then be taken to a page full of routes. A purely functional design, nothing wrong with that, but a part that could be improved upon.
As you can see with the updates, I’ve addressed all the problems brought up by the Creative Director and users.
The home page is more inviting and actually a landing page for users.
There is a clearer layout for users. This allows for easier navigation of the app.
The about page now has its own screen that is organized and visually appealing; and updated with new copy from the copy writer.
The “Check Before You Go’ has been replaced with an actual submenu on the route detail page.
There is typographical hierarchy being used through the app which allows for easier accessibility.
The color palette is more accessible for users, while bringing a modern feel to the app.
Reflections
As this was my first time doing a redesign, I was able to take away a few things.
Through research, I was able to build a more cohesive branding of their product. It was important to make sure users knew that this app was connected to their website.
When doing the redesign, certain parts don’t need to be altered, and can be just be used in more creative ways.
And lastly, I enjoyed updating the app’s overall visuals. I was able to learn from the previous design and get a feel for what the initial designer was portraying. I was able to get a better grasp of what designers go through while developing a MVP.
