“Don’t make me think, just tell me what to do next.” - User
The Challenge
-
Our user persona is not tech-savvy middle age women. My task is to design easily filled forms for mobile App for our user persona.
User persona
The Process
-
First I’ve started to analyse the desktop forms. I chose to examine the form pattern from the following modules:
- Create a new Reading List
- Replace a policy
Checking the content of the forms, it helped me to determine the direction of designing forms for mobile App.
Create a new Reading List
Desktop. Step2. Create Reading List Content.
Desktop. Step3. Create Reading List. Assign Staff.
Desktop. Replace a policy.
Desktop. Step1. Replace a policy.
Desktop. Step2. Upload policy.
Desktop. Step3. Enter details.
Desktop. Step4. Replace a policy.
User flow
-
I’ve started to think about new user flow for the mobile App forms.
The Wireframes for "wizard form"
-
I’ve created detailed wireframes using UI Kit from previous my designs.
Step 2. Add Content.
Step 1. Reading List Title.
Step 1. Reading List Due Date.
Step 2. Validation.
Step 2. Search results.
Step 2. Browse by categories.
Step 3. Assign Users.
Preview screen.
Preview screen.
Design interactive prototype for "wizard form"
-
I wanted to test and see how users were filling the forms.
This “wizard form” was very similar to our current desktop user flow.
Step 1
Step 2
Preview
User testing for "wizard form"
-
I’ve selected 16 participants to test the “wizard form” prototype. As measurements, I’ve chosen task completion time.
Iteration. The Wireframes for "Accordion Forms"
-
Based on the “wizard form” prototype users testing results I’ve designed another wireframe using the accordion approach.
Step 1.
Step 1. Validation.
Step 1. Completed.
Step 1. Enter Title.
Step 1. Select Custom Date.
Step 2. Select Days.
Step 2. Browse by Category.
Step 2. Select Single Policy.
Step 2. Completed.
Step 3. Assign Team.
Step 3. Assign User.
Step 3. Completed.
Design Prototype for "Accordion Forms"
-
Validation
Step 1
Step 2 and Step 3
User testing for "Accordion Forms"
-
I’ve chosen the same participants to test “accordion forms”
User testing report of Prototype 2.
Include an additional wizard step "Preview"
-
Based on the user testing results I’ve designed an additional fourth step – “Preview.” In the fourth step, the user confirms all information completed in the previous steps.
Iteration. The new Wireframes for Option 3.
-
Step 1
Step 1. Validation.
Step 1. Completed
Step 2
Step 2. Validation.
Step 2. Completed.
Step 3.
Step 3. Validation.
Step 3. Completed.
Select Single Policy
Select Subcategory
Search
Select Due Date
Select Policies
Step 4. Preview.
-
User flow
-
Create Reading List User Flow (Latest)
Design interactice prototypes for Option 3
-
Step 1
Step 2
Step 3 and Preview
User Testing for Option 3
-
I’ve chosen the same sixteen participants (from”accordion forms” and “wizard form” testing) to test “option 3”)
User tesging report of Prototype 3.
Analyse results
-
Based on testing data, we’ve decided to go with option three.
User tesging prototype of Mobile APP.
User testing results. Notes with user feedback.
User testing report of all 3 Prototypes