Cross-platform mobile app design (Android & iOS)
Design System (Styleguide)
After returning from MetroDesk, I joined the mobile app team to lead a re-design. With the app initially having been built by an external agency, the plan was to use newly available technology (Xamarin Forms) to make handling the development of two native apps simpler. This presented an opportunity to undertake a UX review of the app, make optimisations, update and refresh the interface and create documentation in the form of a styleguide.
In order to better understand the product I would be redesigning, I spent time reviewing data from Google Analytics, the reed.co.uk database (via the BI tool Looker) as well as reviewing and categorising the in-app feedback from users in order to understand what could be achieved within a very tight deadline - the development team would be starting the rearchitecting work whilst I was designing.
After reviewing the in-app journeys it became clear that the app had been designed as a recommendation engine with existing website users in mind. As acquisition continued to be focused on existing users of the website, it made sense to give signing in a heavier weighting on the landing screen. Although there was stakeholder pressure to implement a registration wall, I spent time explaining why this would hurt both the user experience and overall conversion, showing examples of real world registration walls as well as the results from tests we had run on MetroDesk. With everyone happy with the explanation we made the small change to the landing page detailed in the second sketch below. The result was a rise of signed in users which meant the stakeholders were happy and most importantly we were able to provide a better service to our users.
The first step in the five step search journey had the lowest conversion rate - 81% compared to 93-97% for each of the other steps. I hypothesised that this might be due to the fact users were unable to skip entering a job title - which is possible on the website - or perhaps because the pop-up alert interrupted the flow and caused confusion if you tried to continue after entering only one job title. However, when testing these assumptions in a round of exploratory testing, it became clear that users were getting confused between what were suggestions and what were saved job titles.
Below are the original designs.
Below is an quick prototype I made in Pixate (RIP). I moved the messaging from the pop-up to the start of the flow and turned it into a tutorial style pop-in. I reinforced the difference between suggestions and saved job titles with some clearer messaging and a small UI tweak. Whilst users were clearer on what this page was for and the benefit of adding more than on keyword, the UI tweak wasn't enough to distinguish between suggestions and saved keywords.
These are the final designs, where the suggestions have been made clearly distinguishable from the saved job titles. Using the native styling for a search box on each platform has aided the usability, the function of the search box is now much clearer and consistent with other apps on the platform.
You can click/tap any image to enlarge it.
After testing the existing app with users over the age of 35, it became clear that there were a number of people who weren't familiar with the modern "Tinder" style interface. As reed.co.uk has such a large and varied audience I felt it was extremely important that we took this chance to better the onboarding process, reaffirming each action with clear messaging in a progressive and contextual manner.
Following on from the learning that people weren't universally enamoured with the swiping interface, I proposed that we should also allow users to view results in a simpler list format, as well as letting them switch between the two in order to decide which view they preferred. Working with one of my UX colleagues who's focus was on the reed.co.uk website, we were able to run some tests on the mobile site to determine what was the optimal amount of information to display on a list item, and pair those learning with previous qualitative feedback from users.
Designing the app to be cross-platform presented a chance to move the navigation to a bottom bar - which had recently been adopted as standard practise in the material design guidelines. The previous design was awash with blue, almost rendering colour useless as visual indicator as well as making the app look dated, so I took this opportunity to give the app a cleaner and more modern visual aesthetic. In the process of the redesign I was also able to make some small but important optimisations, such as adding labels to the navigation and adding a notification style job counter to the saved jobs section to help re-engagement.
As there had not been an opportunity for any sort of handover when I joined the team - and therefore no assets or documentation - I decided to create a styleguide whilst redesigning the app. Loosely basing it around the principles of atomic design, the idea was to create modular elements that were reusable, aiding the consistency and overall usability of the app.
The small coloured dots on the designs refer to text classes, which you can find at the foot of the second page; this was a system I came up with in order to mitigate handover problems with the development team. Whilst this was novel solution to the problem at the time, it took an inordinate amount of time to complete and it's because of this that I championed the use of - and transition to - tools such as Sketch, Zeplin and Inspect from InVision within the wider design team.
Originally designing the app in Photoshop I have since moved to Sketch rendering the need for a document of this nature irrelevant - meaning some of the designs in are now out of date. However, I wanted to include it here as a show of my commitment to doing whatever is necessary to work with the team in realising the product vision - who in turn were very grateful to have this as reference.