In this UX case study, I will describe my process, how I’ve designed forms for Mobile App.
Design forms for mobile App.
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
First I’ve started to analyse the desktop forms. I chose to examine the form pattern from the following modules:
Checking the content of the forms, it helped me to determine the direction of designing forms for mobile App.
Desktop. Step2. Create Reading List Content.
Desktop. Step3. Create Reading List. Assign Staff.
Desktop. Step1. Replace a policy.
Desktop. Step2. Upload policy.
Desktop. Step3. Enter details.
Desktop. Step4. Replace a policy.
I’ve started to think about new user flow for the mobile App forms.
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.
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
I’ve selected 16 participants to test the “wizard form” prototype. As measurements, I’ve chosen task completion time.
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.
Validation
Step 1
Step 2 and Step 3
I’ve chosen the same participants to test “accordion forms”
User testing report of Prototype 2.
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.
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.
Create Reading List User Flow (Latest)
Step 1
Step 2
Step 3 and Preview
I’ve chosen the same sixteen participants (from”accordion forms” and “wizard form” testing) to test “option 3”)
User tesging report of Prototype 3.
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
I've learned how effectively test the prototypes, and how important it is to understand users experience filling the forms on the desktop app.
I look forward to starting work on a tablet app forms.