A Different Sort of Password Generator

When it comes to passwords, people inevitably cut corners by reusing or storing them in insecure ways. Password managers are one possible solution, but since they save your information, they require you to entrust your sensitive data to a third party. What if there were a way to have a separate, strong password for every single account without needing to memorize more than one password, and without entrusting your information to a third party?

That’s the idea behind hashphrase. Hashphrase is a native mobile app that uses a standard algorithm called OPLOP (short for “One Password - Lots Of Passwords”) to generate unique passwords using a master password and a simple nickname for each account.

UX Design

The app itself is straightforward, but we still went through a full-fledged design process.

This included:

• User interviews
• Feature Discovery using the Kano Model
• Low and high-fidelity prototypes (paper, Figma, etc.)
• Continuous iteration based on user feedback

One of our primary goals throughout these design cycles was to make the flow of the user’s journey through the app as seamless as possible.

To illustrate the way that this drove our process, let’s look at a seemingly small feature that required a lot of thought: a button to clear the device clipboard.

In the app, once the user has created a password, the password is then copied to the device clipboard to be pasted into other apps or forms. Some of our more security-conscious users requested an option to clear the clipboard manually from inside the app, which is why we added the button.

At first, we included this as an eye-catching button on the final screen. However, once we started testing this design with users, we found that they felt compelled to tap that button immediately, before they had used their password elsewhere. That meant that they would need to go through the whole password creation process again. Not ideal.

We then deemphasized the appearance of the button, making it look more secondary. Even then, users had to think too much about whether they wanted to clear the clipboard right away. As an additional complication, the final screen that housed the button was a modal-- if users exited the modal without choosing the “clear clipboard” option, the button would disappear.

We then decided to move this button to the main screen. This solved the disappearing-modal issue, but it still competed too much with the other on-screen elements. We tried replacing the text button with a less obtrusive trash can icon, but the connection between that symbol and the action it performed was not universally obvious.

Finally, we settled on a low-emphasis text button on the main screen. It is styled more like a link than a button, which keeps it from competing with the button on the screen that is used to generate a password.

Tech Stack

We built hashphrase as a native mobile application using Expo and React Native, which allowed us to take the JavaScript ecosystem we know and love and convert it directly into native iOS and Android with ease.

React Native lets us develop mobile applications quickly by reusing code and design across web and native versions of an application. Aside from that benefit, it also allows us to leverage our existing tools and knowledge for developing and testing web applications directly into the mobile space. Pipelines for continuous integration and deployment enable us to build native apps with the same agile workflows that we’ve always used for web applications.

To Conclude

Creating an elegant and purposeful design does not happen overnight, even when an app concept seems simple. Cycles of UX design thinking, feature development, and user feedback were essential to hashphrase-- they not only ensured that we were continually delivering value and improving upon the product, but also prevented us from working in design vs. development silos. This cyclic and fast-paced strategy, called Lean-UX, is the way we prefer to work at Vermonster.

We hope that you enjoy the hashphrase app, and that you reach out with feedback for the next version.