Cecilia Huster, User Experience Designer

 W Download Resum√©      in LinkedIn Profile

Responsive Design and Mobile First

Login, Sign Up and Set Up

This is a redesign of an existing login/signup flow. Around 15% of users to the site access it on mobile devices. These are mostly iPads and Android tablets. The majority of users return less than 6 times per year. These analytics mean that the ROI for a suite of mobile apps isn't there, but a responsive design could increase engagement.

I took the opportunity to test the Mobile First hypothesis: If you start your design with the smallest screen size, and work up, the result will be easier to use at all sizes. As iPhone version 4 and older is usually the smallest supported screen, that's what I used as my starting point. The designs are based on internal measurements of Safari, the most common browser on all versions of the iPhone. In the wireframes below I've used the background from Safari from an iPhone 5 but I'm also showing the fold for the smaller screen size of older iPhone versions.


On the login screen, I made sure that the top of the legal text shows above the fold for all iPhone versions in portrait format. This is a financial services site so the legal text is more prominent than it would be for less regulated industries. Unfortunately it wasn't possible to fit the legal text above the fold in landscape format.

The other differences between the portrait and landscape versions are subtle: The logo bar expands to the full page width but takes up less vertical space. Furthermore, the link to the sign-up page has floated up to the same level as the "Forgot password" link. I made sure that it fits, even on older iPhones.

Sign up

I reduced the number of fields in the current sign-up page by breaking it apart into a sign-up page proper and a set-up flow. This has the advantage that the user can get an account without setting up every little thing.

Set up 1/3

The first set-up page contains the fields from the original sign-up page. It's using a very simple "1/3" in the headline to convey that this is the first page of 3 in the set-up process. Hopefully users won't balk at the three pages in the set-up process. If testing or analytics show that do, we may have to consider adding a Skip button.

Inventory of original flow

Before I started my design, I inventoried the page elements in the existing flow.

Inventory of new flow

Here are the page elements I'm keeping in the new flow. Some will not be shown at all sizes.

< Back