iHeartRadio: Login / Signup Gate (App)
ROLE: UX/UI
Brief
I was given the requirements for the login and signup screens. I made a user flow and created designs that were adaptable for both iOS and Android, portrait and landscape, mobile and tablet. I cut assets, made specs, and performed UAT to make sure the designs worked as expected.
PROCESS
Based on requirements, I revised the current app's login / sign up screens. I made a user flow to illustrate what was expected by the product owner.
Sample user flow for login for first time users
Collaborating with developers, we assessed the best way to build each feature, while flagging any limitations I should be aware of from a development standpoint. I created high fidelity mockups starting with Android.
Detailed user flow for Android Sign Up screen
Once the designs for Android mobile portrait were finalized, I adapted the designs for landscape, making an effort to keep sizes between orientations as consistent as possible. I then created the designs for 7-inch and 10-inch tablet devices.
Design inventory for the Contextual Sign Up screen for Android landscape orientation
Android designs were then adapted for iPhone, with changes to accommodate the different native behaviors and styles of iOS platforms. Designing for the latest mobile device at the time (iPhone 5), I kept in mind how the designs would be impacted on the smaller screen of an iPhone 4. The challenge of this design was fitting all of the content on one screen without making the user scroll.
When visual designs were complete, I provided development with specs and assets. Once in development, I would make sure the designs were implemented properly by checking each build and giving feedback to the developer. Full specs and flow samples here
Specs for the Sign Up screen's Social Connect section