App User Management

Making life easier for app developers

The Problem

One of the developers I work with had created a sweet service that made adding social login and managing your app’s users a breeze. (It’s normally a huge pain and takes even the most experienced developers days to implement.) Getting started using the service was still confusing and tedious, though, so I was brought on to design a better experience.

UX Design
User research
Web design

My Role

As the lead designer on the project working with some of our most senior developers as well as a product manager, I saw the project from initial concept through to completion. At the outset we had the technology and a rough idea of how users would expect to interact with a service like this, and by the end we had a web interface that developers could use to connect their apps to our service. The end result was a setup flow that guides a developer through the process, rather than making them do the hard work for themselves.

whiteboard
userflow

Research

In order to get started, I needed a basic understanding of the technology, so I worked with our user research team to interview developers about how they currently implement social login and manage users. From our research, we created personas and then got our team together to identify our user’s major pain points and needs, preparing us to create a valuable experience for them.

Throughout my research, I encountered a multitude of words that were unfamiliar to me: authentication, authorization, connection ID and secret, etc. I kept a running list of words I didn’t understand and would ask our developers and lead architect to define them for me. This taxonomy turned out to be an invaluable resource: it allowed me to communicate effectively with stakeholders and leadership, and it forced our team to align on which words we were using. Most importantly, I used this to inform the copy in the end product to help explain potentially unfamiliar terms to our end users.

wireframesketch
wireframefinal

Information Architecture

We also worked closely with the developers currently designing the service to create our user flow. The current setup process was disjointed, had no clear starting point, and required knowledge beyond what our average user would typically know. We worked to combine all the moving parts into one linear flow that was much more streamlined, and identified ways we could help the user throughout the process.

Using our new flow, we designed a form system that would guide users through the setup process. Since our solution relied heavily on animation to communicate progression, I built a prototype for the entire app in Flinto, starting with hi-fidelity wireframes. Though tedious, this helped us get more valuable feedback in user testing sessions, and helped me communicate with our development team.

We worked closely with our user research team to do testing along the way, starting with the wireframes, and incorporated our users’ feedback. Our users could see where they were in the process and what they had done so far. Through a series of tooltips, we educated users on our vocabulary, and helped them if they were confused about a step. Most importantly, we made the process quick: what would have taken up to a week now only took minutes.

Created at the IBM Mobile Innovation Lab in Austin, TX.