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
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.)
An accessible, integrated designed form to apply for the programme to become part of the (fictional) Mars Sagan training programme, sending pioneers to Mars.
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.
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.
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:
To ensure all content is in a single column (answers in a second column were often missed)
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
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.
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.
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.
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.
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
Legible fonts (typeface and sizing)