Say Hello.
New Product Development

Mobile Wizard Design Forms – UX Case Study

In this UX case study, I will describe my process, how I’ve designed forms for Mobile App.

Free Download WordPress Themes
Premium WordPress Themes Download
Free Download WordPress Themes
Download Best WordPress Themes Free Download
download udemy paid course for free
download karbonn firmware
Download Best WordPress Themes Free Download
udemy paid course free download

Task

Design forms for mobile App.

Worked with

  • CEO, CTO,
  • Lead Mobile Developer
  • IOS Developer
  • Android Developer
  • API Developer
  • Customer Care Executive
  • Scrum Master

My role

  • Understand the Problem
  • Sketch
  • Workflow
  • Wireframes
  • Create Prototypes
  • User Testing
  • User Interface
  • Interaction Design
  • UI Kits
  • Assets

“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

Result

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.