Daily UI #1 Designing a Sign-Up Page

The Daily UI Challenge provides prompts for designers allowing them to practice visual design and showcase their work. I signed up for the challenge months ago but I didn’t have enough time to compete each activity. I have a bit more time now.

I find it tough designing in a vacuum so for this challenge I’m creating backstories for each asset I make. I recently visited a tailor to get some pants and a jacket mended. Therein lies the inspiration for Daily UI #1.

The Challenge’s first prompt was to create a sign-up page but I revised it a bit and made a pop-up on the homepage. I see pop-up boxes as an underused element in website design because they were so overused in the early 2000's. Everyone has experienced bad pop-ups but properly implemented they can be an effective tool for identifying prospects and creating email lists. Many successful sites use them. The key’s are to provide relevant information at the right time.

The popup should only be triggered when a visitor has sufficiently understood your website. This is the key to determining the best timing — and it varies site by site.

The pop-up I designed is meant to generate a couple of minutes after a person had entered Tailormade’s website. Detailed analytic data should be used but it’s probably a safe assumption they’ve visited a number of pages after being on a site for 2 minutes. They probably have a firm understanding of what the company is about and are interested enough to learn more.

Before the use clicks or hovers over anything

After the user fills in the fields and hovers over the button

I created 2 pages, one before a user enters their information and one after they completed the form. I strove for uniformity. A few subtle changes let the user know they have completed or are about to complete an action. When people enter in their own info the outline of the text box and the text inside the box turns black. There is also a change to the button when the cursor hovers over it. The text changes to blue, the background changes to white, and a blue border appears around the exterior. Although these actions are small they let the user know what’s going on and provide feedback to any actions they made.

That’s about all I have for the first Daily UI. Thanks for reading! Let me know what you think of my designs on Twitter, Facebook, Medium, or at Zfichmanklein@gmail.com.