An ordinary weekday, nothing was breaking my office routine when my business partner decided to prove that dreams really do come true. He bought a Jaguar car and was pleased with it every waking day. Yet, something was off. After some use, he could not help but mention how odd the Jaguar app looked and functioned. It took some time to get used to and still I heard him sigh after every other ride.
Being perfectionists at work, and in life, we decided to take a look at the app together. Lo and behold, we ended up having a chat about what the app could look like. Eventually, I thought it would be interesting to visualize our design ideas and this led to a 3-4 hour redesign, improving upon the existing app UI.
Now, by no means do we wish to set our visions on a pedestal and degrade Jaguar developer and designer work on the app. This article is a map of how we would picture an iOS Jaguar app, from both design and user perspectives.
What would be the point of a design that does not consider user needs and experience? Clearly, we base our redesign ideas on a real-life Jaguar car user and their perceptions of how the interface could be made easier to use. To set your mind at rest, and add validity to the grounds of this redesign, we referred to both Android and iOS user reviews of the Jaguar app.
We focused on the layouts and visual aspects of the design. Here are several things my coworker found important or upsetting, and some users in the reviews did too:
- Easy access to journey and mileage data
- The interface being more intuitive
- The UI matching the vehicle status
After a few sketches, it was time for a makeover!
After signing into the app, the first thing a user sees is the overview page. Let us start by looking at the color use. The first change that meets the eye between the original (left) and our redesign (right) is of course the switch from dark to light mode. The contrast is much greater and the black-on-white text becomes clearer to see. Instead of having dark frames across the screen sections, we opted for softer color divisions, giving the screen a slick and intuitive look. Considering the app reviews discussed earlier, I thought it would be logical to give a nod towards Jaguar’s brand identity and include its logo (top left) and the burgundy color. You can easily find it in the icons and navigation markers, which now stand out against the pure white background.
The next page is the Remote Climate control, where a user can quickly set a desired temperature and precondition their car. Now, the point of the redesign is not to simply make it ‘pretty’ but also structurally adequate. Bearing in mind that this is a mobile app, all important buttons should be toward the center of the screen or lower, in other words within the thumb-range. That is exactly what I did in the redesign, placing the Start button in the middle and situating other information in the order of its importance.
For an app with a 4+ age range, it does lack the intuitive aspect many of the reviews talked about. Here we see the Journeys page, which shows a summary of the user’s travel details including the distances, date, time, and locations. While we kept the general concept intact, this page had quite a few changes.
To make the page navigation more intuitive, we gave the Journeys section a filter tab. This allows information to be viewed in portions, rather than a long table, and find data based on the day. Secondly, we added a new subsection, Places, where the user can revisit saved locations and plan their trips. Thirdly, I thought it would be a good idea to provide a visual preview of the latest journey rather than having to open the trip map separately. Finally, the journeys can be deleted without leaving the screen with a very handy edit button in the shape of a pencil.
On the whole, this redesign is one of many ways of visualizing the Jaguar app, but I am sure this design would brighten my coworker’s road trips. Mind you, this is not to say that Jaguar isn’t doing a great job, and our design is not intended to discredit the original. We simply wanted to bring our visions to life, at least for a moment, and share these ideas with you.