December 2013 – February 2014 – Melbourne, Victoria

My Employer: Deloitte Digital (Melbourne, Australia)

The Brief

The Australian Deloitte Tax group had released a first version of their iOS app, tax@hand, in February 2013. The app enables users to view Australian tax news, as well as tax consultants within Deloitte Australia to contact. They approached Deloitte Digital with the intention of releasing a second, major version of the app, with the following improvements:

• refresh the design from iOS6 to iOS7
• lots of new functionality and screens
• ability for users to personalise the app
• globalise the app, including 10 countries in the initial release
• expand the platforms from just iPhone to also iPad, Android mobile and tablet, Blackberry mobile, and responsive web

The project was scheduled to run for a year, with the UX/BA phase running over two months. As the lead UXer on the team, it was my role to create the screen and user flow, interaction design and detailed functional specification ready for development.

My Role and Process

I began by reading the client requirements for the new app, and exploring the current app. I downloaded a lot of different news-style apps on the different platforms and devices, and studied their design, experience and interactions. I was especially interested in looking at existing examples of personalisation (setting up relevant news feeds via onboarding and in the app), internationalisation (switching between countries as well as languages), and content features (increasing text sizes, voice, bookmarking). This pattern and functionality research was a constant activity throughout the project.

After I had familiarised myself with the project, I began working on the screen flow with another UX colleague, sense checking that the flow was logical and complete, and that platform and device conventions were kept. This also brought up edges cases and error states, as well as scenarios the client hadn’t considered. This activity also brought out the information architecture of the app, and the appropriate labeling of the sections.

We completed the screen flow and initial architecture on the whiteboard. Following this, I hand-sketched the home screen, before wireframing it in Axure. I changed the positioning of the article images in the Axure version due to the scroll bar potentially becoming flush with image colours. 

After this activity was complete, I began wireframing the iPhone app, following the iOS7 HIG, and looking at examples where existing apps had refreshed from iOS6 to 7. Working with the project manager, who was new to mobile interaction design, I guided her on completing iPad wireframes, whilst I continued with Android smartphone and tablet in Holo design.

Challenges Along the Way

There were a few complex puzzles to work out. The biggest included the internationalisation of the app, with the app supporting content from different countries and in different languages. Whilst the main news feed was personalised by country and topics by the user via an onboarding process, we also wanted the users to be able to view content from all countries, but still in a filtered view. I did some pattern research, and found a pattern on the News Flash app for iPhone, using a flag carousel. During this search, I also looked at how to do tagging of content, of which News Flash also used a carousel.

The tablet version of the news screens contained a grid-view layout, to take advantage of the screen size. I also worked out the interactions for all UI elements, with the example above for the carousel.

Whilst the flag carousel was a good visual example of switching between content, we couldn’t use a carousel for the article articles, as it was also a linking mechanism to related articles, and this was how users could search for a topic throughout the app. I decided to display these as tappable chips, that would display on various screens, linking articles to each other.

Another puzzle we had was also around showing users all articles of the app, but then also showing the personalisation that they had applied. We wanted to distinguish between ‘subscribed’ and ‘non-subscribed’ for countries and topics. I created hierarchies throughout the app, depending on screen. The World News section had a country hierarchy, with countries subscribed or not subscribed to having a visual distinction on the flag carousel itself. The Resources section, which was grouped by topic (e.g. fringe benefit tax, small business tax), had the hierarchy of countries (with the country subscription distinction), then the topic subscription status, and then the list of topics themselves. We used visual cues and filtered lists in order to show personalisation throughout the app, ensuring the user could access their content easily, as well as accessing more general content they hadn’t yet subscribed to. The hierarchy for the Topic screen included the country subscription carousel, and the content type, being news, resources, or contacts, which were then ordered either chronologically (news and resources) or alphabetically (contacts). The messaging for the empty data states also had to be carefully written, ensuring it was contextual to the correct hierarchical level.

The hierarchy of the three screens can be seen by the carousels and segmented controls

The third challenge was with the interaction design of the iOS apps. iOS7 had just been released two months prior, which made finding examples of screens and interactions difficult. While the native apps had been updated, they didn’t contain all of the UI elements that we required for our app. When the visual design phase commenced in March, a few more apps had been released, and so the iOS7 refresh was able to be fully released in this phase.

Learnings

This project taught me many things, namely:

• working out the hierarchies within the different sections, and how they interact and look
• enabling personalisation, and how to distinguish between subscribed and non-subscribed content for the user, and also how to easily change the subscription status for a country or topic
• deciding on how to use icons that had the same understandings across the different countries the app was going to be released to, particularly on the article pages.

Results

The apps were released over a staggered time frame between October 2014 and February 2015, due to a very small development team. The iOS and Android apps were released on the respective stores, with the Android code being ported for Blackberry. I had looked at Blackberry apps and worked on a ported project before and thus knew that the UI elements on the Android wires had to be compatible. The responsive website also went live, being based on the mobile wireframes and designs.

Responsive website: http://www.taxathand.com/

More information: http://www2.deloitte.com/global/en/pages/tax/articles/deloitte-tax-at-hand-mobile-app.html