Mission to Mars mobile form

Project Introduction

This is a self-initiated project to build a mobile-first application form design for users to apply to a (fictional) training programme for a Mars Mission.

As a huge fan of Carl Sagan (astronomer, cosmologist, astrophysicist, astrobiologist, author…) I invented a commercial space programme influenced by the popularity of Mars programmes in the media (SpaceX, Mars One) and called it the Mars Sagan Programme. The form would be for would-be astronauts from around the world who wanted to apply for the programme.

 

“Mars has become a kind of mythic arena onto which we have projected our earthly hopes and fears.”

– Carl Sagan

 

Design Focus

I wanted to use the project to focus on:

1. Focus on UX design with forms

As one of the most common types of user interaction on the web, any users should be able to complete forms quickly and without confusion.

 

“Usability problems on forms really 
hurt business.”
– Kathryn Whitenton

2. Inclusive/accessible design from the get-go

Following web standards, to ensure the form was easy to use for everyone, including people with disabilities.
While not all applicants will be eligible for the Manned Mission to Mars, any person who wishes to apply, irrespective of any functional limitations (physical, sensory, or brain-based, could be second language or casual users) should be able to use the form to do so.

3. To design and communicate a form design that will be seen in various states (ideal, empty, warning etc.)

 

Project Goals

User Goals

An accessible, integrated designed form to apply for the programme to become part of the (fictional) Mars Sagan training programme, sending pioneers to Mars.

 

Business Goals

1. Initial screening of applicant to ensure meet minimum standards

2. Obtain key information from applicants so they can progress successful ones into the assessment journey

3. Create a metric for the applicants applying for marketing department.

 

Balsamiq Wireframe

After determining assumptions, and sprint questions, I worked on narrowing down the optimal information to ask for in the form. It needed to get some key details to ensure an efficient screening process but not demand to much of the user that they would leave the form incomplete.
I then devleoped this into a quick wireframe in Balsamiq in order to test the questions and answer format.

Balsamiq wireframe of form

Balsamiq wireframe of form

User testing

Using the Balsamiq mockup I did some user testing to analyse the design and find any flaws within the question content and answer formats.

Some of the feedback that I included in the next design iteration was:

 

Use one column design

Use one column design

To ensure all content is in a single column (answers in a second column were often missed)

 

Tiny radio button

Tiny radio button

Some users thought they had to click on the tiny radio and check buttons and felt were too small, so needed to ensure they had a larger area to click

 

Need for feedback

Need for feedback

The user also needed clear feedback of action when they clicked the ‘apply’ button so they knew that the form had been submitted. I also included a specific time by which they would hear back to reduce uncertainty for the user.

 

Visual Design

As I wanted to focus on UX, iterative design and designing for different visual states within the form, the visual design was an important step in the design process.
Here is the final visual design with notes to my design descisions and how they related to the business and user goals.

No burger menu

UX researchers have found that burger menus don’t give a great experience as they hide the options. Instead I chose the two important menu options, and moved the rest into a ‘More’ drop down box. Also showing clearly visually which page is currently selected. The red line and dark background would show those using adaptive technology which link is selected.

Show user selection

The selected field would be clearly visually outlined, the contrast darker and a dropshadow to enable those with difficulty differentiating between colours to still clearly see what point they are at on the form.

Error notification

Ticks would show when fields are filled and in an accepted format. Crosses, red outline and red background would show (a mix of visual clues for a visually impaired user) when there is an error along with a detailed-as-possible description as to the problem (helpful to someone using a screenreader), with careful wording to ensure the user is not made to feel to blame.

Show user progress

I designed a clear visual to show users their progress through the form.

Large clickable areas

Although some of answer fields are small radio and check boxes, the user can click in a large area to select their answer.

Field labels & borders

Field labels are placed above and close to entry fields, so users can read them quickly, they don’t disappear when the user starts typing, and it is easy to see which answer fields they relate to. The form input area has a border so is clear where the user should be inputting information.

Font styling & colour

For UX and inclusive, accessible design, the text styling has been given high importance to the design. This includes using sentence case, at least a minimum contrast (meeting the standards of a contrast checker), a mimium size of 16pt, and a typeface (Noto Sans) chosen for its legible design and access across different platforms and languages.

Group related information

I’ve grouped related information next to each other, and in a logical order.

Action buttons

There is a clear visual distinction between the primary ‘apply’ button and secondary ‘cancel’ button.

Feedback for form submission

I have designed a modal popup to display when the user hits the ‘apply’ button, to ensure it is clearly communicated that the form has been sent.

Full mobile form

Full mobile form

Form feedback popup

Form feedback popup

Screen design for Mars Sagan programme application mobile form

Screen design for Mars Sagan programme application mobile form

Bibliography

I did a lot of reading through some amazing resources for this project. Here is a list of some of the articles and sites I found most useful for designing a form with accessibility and UX in mind:

Colour and contrast

http://colorsafe.co/
http://webaim.org/resources/contrastchecker/

Legible fonts (typeface and sizing)

https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/
http://accessibility.psu.edu/legibility/fontface/

Error messaging

http://baymard.com/blog/adaptive-validation-error-messages
https://material.google.com/patterns/errors.html#errors-user-input-errors
https://www.nngroup.com/articles/error-message-guidelines/
http://babich.biz/mobile-ux-design-user-errors/

Accessible design

https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.fqd00asjz
https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/

Form design

https://uxplanet.org/designing-more-efficient-forms-structure-inputs-labels-and-actions-e3a47007114f#.y8iy3368q
https://design.atlassian.com/product/components/forms/ https://uxplanet.org/designing-more-efficient-forms-structure-inputs-labels-and-actions-e3a47007114f#.448tzxgtg
https://www.usability.gov/get-involved/blog/2009/10/online-form.html
https://uxdesign.cc/design-better-forms-96fadca0f49c#.wykyv0vmu
https://www.usertesting.com/blog/2013/04/04/42-form-usability-resources/#mobileux
http://alistapart.com/article/sensibleforms

Ooh also – Nasa creative commons images

(as used in design) https://www.flickr.com/photos/nasacommons/

Form screen for Mission to Mars form project

Top of form

Next project: Wakeyuppy alarm app