Buddycare App Pt.2 — Redesign(Wireframe level)

Redesign of the top 3 problems found in the usability evaluation


Buddycare is a platform where parents whose child would have an outpatient surgery can get instruction about how should they get prepared for their child’s oncoming surgery, and at the same time the nurse at hospital is able to keep track of parents’ preparation.

After accomplishing all the user testing sessions, we prioritized the founded problems based on the consideration from both expert evaluation and user testing. We don’t have time to propose solution suggestion during the course period, but now I’ll try to come up with redesign alternative plans for the top 3 problems that we found:

Problem Redesign

1. The vague navigation in “Info package”

In the original design, Buddycare is using bottom tab bar as the navigation in “Info package”. Without text indication, it is difficult to tell the meaning of the four icons. Therefore, they are not exactly showing the relation between different parts of surgery information (basic information, before the surgery, day of the surgery, after the surgery). 
In my opinion, the core of this problem is overusing icons (or overusing minimalist design style). Despite the aesthetic effect, this design dramatically increases the difficulty of recognition for users (all of the users in test session had trouble understanding those icons). At the same time, since the universal navigation is also displayed by bottom tab bar, it would cause confusion if the info package is displaying by another set of tab bar.
So I would prefer only use text at this point. Even though the aesthetic effect would be sacrificed, the usability could persist. Only when the full text is shown, the relation between different information categories can be revealed.

The original design:

The interface of “info package”, using icon-based navigation instead of text navigation

My redesign:

Using text to navigate facilitates the recognition

2. The confusing instruction for users to start using the app

For the user who opens this app first time, they need to use the activation code to create their own “surgery account” and use their phone number/email to sign up. And for the user who already has their account in the app and want to follow their surgery preparation, they need to log in with their contact information. The difficulty here is that these two types of user have to start from the same page. But current version of Buddycare landing page has a confusing phrasing so the user doesn’t have a clear idea which button they should click on (4/6 users in the test sessions had this problem). Because for some users, the activation code could also mean some kind of “existing account”. Also, after clicking “use activation code”, there are two buttons in the following page: “continue as new user” and “continue as existing user”, which is also confusing to the user.

So in my redesign of the landing page, I use the term “create surgery account” and “continue with surgery care” to avoid vague meaning (at the same time I cancelled the button of “try demo”, which interfere the user’s attention, and put it as text in the bottom right corner instead). Also in the following page, I use one single button “next” so the user can clearly recognize this is the button they should click.

The original design:

My redesign:

An more radical redesign solution for this problem can be even remove the so called “activation” process, but just providing one “log-in” code that the user can use every time they want to access their account. But only showing the password setting process when the first time a “log-in” code is used.

3. Password format

5 out of 6 users in the test sessions created a password which doesn’t fit the format requirement, before they can actually see the requirement. So it would be better that the user can see the requirement when they are creating the password. In my redesign, the pop-up layer emerges when the user click on the text input area of creating password. And user can manually close the pop-up by clicking on the small round icon on the right.

The original design:

Indication of invalid password setting shows after inputting

My redesign:

Pop-up layer is visible when user is inputting

Thanks for reading!