UX Design — Redesigning iOS App (Dogged) Hi-Fid User Flow

Dog vectors designed by macrovector / Freepik

About Dogged

Dogged is a budgeting app for dog owners to plan and save for their dogs. The app provides the estimation costs of having a dog and aims to help dog owners fulfill their dogs’ needs.

Version 1.0.0-beta

some screens in version 1.0.0-beta

The Problems

After being released in testflight, there was a lot of feedback given by testers. There are many problems were found, especially in the UX Design. The application does not provide the user with a good journey and flow, thus resulting confusion for first time users and new dog owners.

When the application opens for the first time, there is no onboarding screen and the user arrives to the overview screen. This case make the user confused about what to do in this application. Not only that, the steps that must be taken are quite long so that users can add saving for their dog.

the steps that must be taken to add saving for dog

When adding a dog, the user must fill in the dog breed and bio, for experienced dog owners it may not be difficult to fill in the form, but for new dog owners it will be very confused. Not only add dog form, add plan also confusing for new dog owners.

add dog and add plan form

The Redesign — For First Time Users

The objective of this article is to improve previous version hi-fidelity user flow especially for first time users.

Opening the application for the first time

Flow 1 — Goal : Add a dog

1. User tap the Dogged icon.
2. User arrive at onboarding screen as first time user.
3. User surf the onboarding screen by tap NEXT or slide the screen.
4. User tap START to add a dog.
5. User arrive at page 1 of add new dog screen and start filling dog biodata form.
6. User tap NEXT when finished filling out the dog biodata form.
7. User arrive at page 2 of add new dog screen to select dog breed.
8. User explore dog breeds by sliding the collection view.
9. User tap on the selected dog’s breed cell.
10. User arrive at dog breed detail screen.
11. User explore the screen by scrolling.
12. User tap SELECT button on the bottom of the screen.
13. User arrive at page 3 of add new dog and start filling dog size form.
14. User tap NEXT when finished filling out the dog size form.
15. User arrive at the last page of add new dog and make sure the dog’s information is correct.
16. User tap FINISH button.

Flow 1 — Goal : Add a dog | Dog vectors designed by macrovector / Freepik | Dog images by Unsplash

Flow 2 · Scenario A — Goal: Add saving plan with suggestions

1. Refer to flow 1.
2. User arrive at add plan onboarding screen.
3. User tap START to add plan.
4. User arrive at page 1 of add new plan screen and start searching to select dog.
5. User tap on selected dog cell.
6. User arrive at page 2 of add new plan screen and start browsing suggested categories by scrolling.
7. User tap on selected suggested category cell.
8. User arrive at category detail screen.
9. User tap SELECT button on the bottom of the screen.
10. User arrive at page 3 of add new plan screen and start exploring the places and costs of the selected plan category suggestions.
11. User tap on selected suggestion cell.
12. User arrive at page 4 of add new plan screen and start filling saving plan target time or amount of savings per certain period.
13. User tap Set Amount to switch to amount of savings per certain period and vice versa.
14. User tap SET button on the bottom of the screen.
15. User arrive at the last page of add new plan and make sure the saving plan is correct.
16. User tap ADD PLAN button on the bottom of the screen.

Flow 2 · Scenario A — Goal: Add saving plan with suggestions | Dog vectors designed by macrovector / Freepik

Flow 2 · Scenario B — Goal: Add saving plan without suggestions

1. Refer to flow 1.
2. User arrive at add plan onboarding screen.
3. User tap START to add plan.
4. User arrive at page 1 of add new plan screen and start searching to select dog.
5. User tap on selected dog cell.
6. User arrive at page 2 of add new plan screen.
7. User tap Skip on top right of the screen.
8. User arrive at page 3 of add new plan screen and start filling plan information form.
9. User tap DONE button on the bottom of the screen.
10. User arrive at page 4 of add new plan screen and start filling saving plan target time or amount of savings per certain period.
11. User tap Set Amount to switch to amount of savings per certain period and vice versa.
12. User tap SET button on the bottom of the screen.
13. User arrive at the last page of add new plan and make sure the saving plan is correct.
14. User tap ADD PLAN button on the bottom of the screen.

Flow 2 · Scenario B — Goal: Add saving plan without suggestions | Dog vectors designed by macrovector / Freepik

Flow 2 · Scenario C — Goal: Add saving plan from overview screen

1. Refer to flow 1.
2. User arrive at add plan onboarding screen.
3. User tap SKIP at bottom left of the screen.
4. User arrive at overview screen.
5. User tap on Add Plan button on the middle of the screen.
6. User arrive at add new plan screen.
7. Refer to Flow 2 Scenario A, step 4 –16.
8. Or refer to Flow 2 Scenario B, step 4 –14.

Flow 2 · Scenario C — Goal: Add saving plan from overview screen | Dog vectors designed by macrovector / Freepik

Flow 3 — Goal: Add saving

1. User tap the Dogged icon.
2. User arrive at overview screen.
3. User tap Add Savings.
4. User arrive at page 1 of add savings screen and start searching to select plan.
5. User tap on selected plan cell.
6. User arrive at last page of add savings and start filling the add savings form.
7. User tap ADD SAVINGS button on the bottom of the screen.

Flow 3 — Goal: Add saving | Dog vectors designed by macrovector / Freepik

Summary

From above redesign process I gained new skills in thinking about the better user flow and better undestanding on user flow. Through this process I learn that user flow can help visualize how users will move through the application ensures everyone is on the same page which allows for a more productive and rewarding work environment.

Dog vectors designed by macrovector / Freepik | Dog images by Unsplash

• Vectors: https://www.freepik.com/
• Images: https://unsplash.com/