Discovering User Needs 

When I first saw the original design, I had already spotted some missing misplaced functions:​

• "Group Manage" doesn't work

• Cannot delete existing passwords

• Cannot organize existing passwords

• The search bar takes up a lot of space​

​

I also conducted some simple interviews with a few of my coworkers​ and concluded their pain points using the original design of the app:

• Confused when opened the app --> didn't know what to do next

• Didn’t understand the functions for a lot of the icons 

• Easy to confuse multiple pages together --> cannot tell the difference between different pages

• The interface of the app, such as the colors and the fonts, did not look attractive --> not much incentive to use the app again

Define Requirements

With all the obstacles the users faced, I defined a few requirements that would meet their needs:​

• Make sure the menu is clear and without ambiguity 

• "Search" should be hidden if not using, "sort" options should be clear

• Any changes to a password should be warned --> deleting a password could be dangerous!

• Make sure not too many functions are cramping in one page 

• Define a design rationale for a consistent look 

• Have a function that groups password without ambiguity

Sketches and Wireframes

Before changing the whole UI of the app, I decided to use the UI for the original design and improve the functionality of the app first. The changes I made include:

• Reduction of the space "search" takes up

• The ability to re-arrange passwords

• Clear options for "sort" in Group Manage and Data Center

• Default options for titles forming a new group in Group Manage

• A "quick-add" function when adding a password to a group

• A warning when deleting a password

• The delete function was changed to a "swipe" motion delete

​

The wireframes are shown below.

High-fidelity Prototype

After brainstorming using wireframes, I created high-fidelity prototypes for the three pages, including the changes I made.

Limitations to "Group Manage"

After solving some issues the users encountered when experiencing with PassKanTan, it became clear that Group Manage is an unnecessary page for the following reasons:​

• Every time a user creates a password, they have to manually go into the Group Manage page to add the new password to an existing group or a newly created group

• Thinking of group titles can be a hassle. Similar group titles could also be created without noticing if a user creates a lot of groups --> defeats the purpose of organizing passwords

​

Instead of using groups to organize data, I decided to use a "tag system" instead. However, there are two kinds of tag systems: formated-tag system and free-tag system. 

• formatted-tag system

  • there are a few default tags a user can tag​.

  • pro: increase consistency of the tags

  • con: users cannot create their own tags

• free-tag system

  • users are allowed to create their own tags, provided with some suggested tags​, and reminded with similar tag names when typing in.

  • pro: users can create their own tags without creating a lot of similar name tags

  • con: loss of consistency of the tags

​

The wireframes and high-fidelity prototypes below demonstrate these two systems. 

Making a Decision

I went back to those I interviewed at the beginning and showed them the two tag systems. The overall feedback I got from them is that they would want to create their own tags. The suggested tags are useful to them because they are pretty detailed already. Therefore, they wouldn't create new tags frequently, but it feels safe to have them. 

​

Taking the feedback I got from the interviewees, I decided to go with the free-tag system. 

Design Process Stage 2

Limitation to Original UI

While using the original UI can resolve a lot of issues surfaced experiencing with the app, there are still some limitations to the design, such as the aesthetic of the app and the similarity between all of the pages. It still can be confusing when switching from one page to the other, and that is one of the pain points of the users. 

​

I spent about 5 days researching and brainstorming some concepts of a new UI for the app. My goal is to have a consistent look, but different designs for each page. Below are some sketches I made for the concepts of the new design. 

User Journeys

To better resonate with users and have a clearer glimpse of the new UI design, I created some user journeys.

1. Signing in/logging in

2. Filtering passwords by selecting the "Finance" tag

3. Checking the "sort" function

4. Quick-accessing PC options

5. Editing the information about the Instagram password

6. Saving a new Password for Instagram and adding some tags to it

7. Searching a password by tags

8. Locking a PC in the Connect to PC page

9. Deleting an account on a connected PC 

10. Sending a direct message to a connected PC

​

The high-fidelity prototypes below are shown according to user journeys.

Impact​

I introduced Figma to the company and helped C-suite executives familiarize the tool. After the redesign, I added 10 new features to increase app adoption and tested with team members to get feedback. This internship shed more light on this app that has been put aside by the company due to other continuing agendas.

Reflection​

What went well:

• The new design gave the app a whole new look that the interviewees liked it a lot.

• The tag system breakdown narrowed down and gave clarity to the original "Group Manage" function.

• Spending a week exploring other app designs was needed for generating the whole new look.

Opportunities for improvement:​

• Interviews could be more thorough, such as asking more specific questions about certain functionalities of the app.

• There should be more user testings during the design process to prevent the users not liking the final design.

• Since I was the only person completing this project, I could recruit more people to design the app with me in the future. Teamwork not only cut down some work but also generate better and better ideas throughout the process.

Back to all projects