The Adobe XD team created a Dribbble playoff, challenging folks to create a sign-up form utilizing some of their new features: Stacks, Scroll Groups, Repeat Grids, and more!
- Explore best practices for sign up forms
- Pick focus of site
- Sketch out options
- Create low-fidelity prototype
- Design key graphics and components
- Create hi-fi prototype
Exploring Best Practices
I found a few articles that helped guide my approach to designing a form:
- Website Forms Usability: Top 10 Recommendations by Kathryn Whitenton (Nielsen Norman Group)
- 5 Registration Form Usability Guidelines by Jenna Erickson (Usability Geek)
- Placeholders in Form Fields are Harmful by Katie Sherwin (Nielsen Norman Group)
- Password Creation: 3 Ways to Make it Easier by Katie Sherwin (Nielsen Norman Group)
The ideas I wanted to keep in mind as I designed were:
- Form simplicity: Only ask essential questions
- Registration Options: Provide the option of social signups in addition to the typical email signup for ease
- Adaptable placeholders: Ensure that the user always knows what the fields they need to complete are (i.e. don’t make the entry field label disappear when the user begins typing)
- Visible password criteria: Help the user know what criteria their password must meet upfront rather than letting them know once they don’t meet the criteria and recieve an error message
- Show/hide password: Enable the user to easily verify that they typed in their password correctly without making them reenter the password
Picking Focus of Site
I decided to create a sign-up form for a site that helps writers find a group to workshop their writing with.
I spent some time debating whether I wanted to do a design for mobile or a desktop application and tried a quick sketch of both.
I ultimately landed on creating a sign-up form for a desktop experience because of the focus of my site. Writers might communicate with their writing groups via a mobile app at times but writing and reviewing someone else’s work generally takes place on a computer not a mobile device.
Creating Low-Fidelity Prototype
I choose to create a low-fi prototype to test out some of the adaptable entry fields and think about whether I wanted to showcase the password strength or other criteria.
After testing it out, I opted not to show password strength and instead specify that the password must be at least 8 characters and let the user know when they’d met that number (see hi-fi prototype for implementation). With the limited space, this addition felt more actionable.
Designing Graphics and Key Components
I wanted to challenge myself to create a fun, relevant graphic for the sign-up page. I sketched out what I was hoping to create, and then utilized Adobe XD to design it. This was a time when it would have been helpful to have Illustrator skills – definitely on my list to dig into soon!
I also designed a few components to ensure I could easily make edits across my screens if needed.
Creating Hi-Fidelity Prototype
Finally I jumped into my high-fidelity prototype! I spent a fair amount of time on the first screen to determine my color palette, but after that, hooking up the different screens was fairly quick.
Addition of New Screens
When I started this project, I was focused on creating simply the sign-up form and leaving a minimal number of fields to meet my simplicity goal; however, the challenge asked designers to utilize the new features Adobe XD released. When I realized that I needed to introduce more screens in the flow to fully meet the challenge criteria I had to pivot a bit. I was short on time, so I did a quick sketch then jumped right into the high-fidelity prototype.
I still think a user could be signed up for the site without needing to specify their location, writing preferences, and priorities, but it was good to work with a few requirements/constraints for the project.
The last step involved posting my rebound to Dribbble. This was my first time using Dribbble and there was more of a learning curve than I’d expected. I wish I’d known:
- Dribbble only lets you post a video if you have a Pro account.
- Videos can’t be more than 24 seconds long.
- Videos must have a 4:3 ratio. I was glad I’d learned how to create a photoshop mockup in this project! Although the video quality was unfortunately a little low, I at least didn’t have to scrap the project entirely.
- Image size and resolution – The final sizing/quality of my screens wasn’t ideal, so I’d like to learn more about how to appropriately size and mock-up UI screens.
But I finished and posted it – woo hoo! Check out the final post here.