I want to compare the design decisions taken in presenting data on a web site, and a mobile app.

The example I am using is www.bestCourse4Me.com.

This is a charitable site aimed at Sixth Form students and their advisers, to allow students to make informed decisions about University courses, and the A levels needed for their degree course. It has data for every student at every UK university on:

• qualifications held by students entering university,
• degree courses taken,
• level of degree achieved,

This is combined with sampled data on employment status on leaving – career taken and salary, and the ONS Labour Force Survey, giving sampled employment status and salary over the lifetime.

Some students may know exactly what they want to do in life, and simply need to know how to achieve this – what degree subject and University to choose, and the A levels subjects and grades that will give them the best chance of being accepted onto their chosen course. Many will have no idea of what they want to do, and need to explore the possibilities from their current position.

The web site can make use of large screen area to present a lot of data, and to compare selections. The mobile app needs to present a smaller amount of data in a more task centred way. While it would be ideal to have a common design and code base for the 2 presentations, their constraints were so different that I decided it would be worth having different designs.

With this in mind, the web design shows a chronological flow through the options and outcomes.

BC4MeWebImage

The earliest stage of life is at the left, and the outcomes at the right. Users can move in either direction through the pages, trying options, then moving right to see the outcomes, or left to see the requirements, For example, a student may be interested in a degree course in Forensic Science, from this she could move right to the university tab to see the universities offering this course, then further right to see the careers taken by previous graduates in Forensic Science, or she could move left to the Alevel tab to see the A levels required for this course. This design allows users to explore the data from any point in the decision process.

There is a considerable amount of useful information available to users, to indicate previous outcomes of the options selected by user, which is not easily explored – this was too useful to leave out, but too confusing to show on the single browsing (selection) pages, so this is all included in a single summary page on the right. This also makes a useful printable summary page for careers teachers to give students to take away.

The web site had been in use for several months before work started on the mobile app. An app, rather than mobile web site was selected to ensure a responsive experience. Since the target users were not expected to have the latest phones, I could not assume the phone would have a SQLite, or any other database. This limited the amount and structure of data held in the app.

I also had to allow for the limited screen space of low-end phones, and the reputed short attention span of reluctant teenagers.

I set up a few questions that the user had to be able to answer in the minimal number of screens:

• With my A levels, what can I do?
• I want Career xxx – what degree do I need?
• I’m interested in Subject xxx – what can it lead to?
• What A levels do I need for Subject xxx at University yyy?

This led to a few obvious data presentations – selection lists for each of the main objects (Alevels, Degrees, Universities and Careers), and graphs of answers such as pie charts of degrees taken by students with a selected A level subject.

Adding a few extra links to allow progress between related screens, such as from A levels to Degrees to Careers, led to the final screen structure.

This is a really nice example, of trying to present the same data, for the same users on different platforms. The critical design decision was to use the freer environment of the website to encourage exploration of the data, whilst using a rigorously task focused approach in the more constrained environment of the mobile app.