DailyUI Day 1 of 100: Create a sign up page

5 min readJun 13, 2021

Hello guys! 👋 I am taking part in #DailyUI over the next 100 days to improve my UI design skills and hopefully, emerge with a better eye for design as well!

Day 1: Create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can image.

I decided to create a sign up page for Books Beyond Borders (BBB). They are a social business that aims to fight poverty and illiteracy by selling secondhand books and donating all remaining net profits to provide learning opportunities for children in rural areas. Do check out their impact and if you would like a $5 coupon for yourself to get a book and support their mission, click here!

I have not designed for social enterprises so this dimension would add to the challenge and the learning experience. Moreover, it is often social enterprises and non-profits that could benefit from better design but are faced with budget constraints. Hence, the opportunity to improve here is huge!

Inspecting the existing user interface

I began by inspecting the existing user interface, as there is one.

I started off with a little exercise of What’s missing from this? which is inspecting the existing design and identifying what is lacking in the existing user interface. You might discover many missing components and it would be useful to organise them by importance.

Here, I compiled a list of missing components and used the 10 Usability Heuristics for User Interface Design as a high level checklist for the high priority components.

ability to sign up/sign in with other platforms (e.g. with Google, with Facebook) [High priority — Flexibility and efficiency of use]
communicating form validation to the user (e.g. strength of password, invalid email) [High priority — Visibility of system status and Error prevention]
ability to toggle between showing password and hiding password [High priority — Consistency and standards ]
aesthetic design (which triggers the “halo effect” a.k.a heightened perceived usability when done right) [Medium priority]
terms and conditions disclosure [Medium priority]
communicating the value of signing up (think in the shoes of WIIFM?) [Medium priority]

After that, I also assessed what could be tweaked.

single column rather than two column form fields (because its easier for the eye path to move top down versus a Z formation)
size of the ‘create’ and ‘sign in’ button in visual hierarchy

With that, I got straight to designing.

Designing the interface

The tool I am using to create the improved user interface is Figma!

Earlier, I focused mostly on UI and UX principles of the sign up page. At this stage, I am bringing in the context of the BBB business and impact to the user interface design that I am creating.

Style

I chose ‘Manrope’ for the font which is close to what BBB uses but with a more modern touch. I stuck to the existing brand colours for consistency.

Aesthetic & purpose of sign up page

For aesthetics, I felt that an illustration works well because the sign up page should have a visual that communicates what the user can get out of their membership. For BBB, the purpose of the sign up page is to encourage customer loyalty a.k.a buying secondhand books, by offering benefits such as perks and discounts. Hence, I selected an illustration that captured the essence of getting more books.

Blend of UX copy & marketing microcopy

If you managed to read until here, I will now be dropping a huge confession. I genuinely struggled with this area.

For any sign up page to be effective, the value to the user needs to be communicated before they consider going through with the steps. (In that sense, I see that marketing copy comes before UX copy because you need the actor to desire the action first before being able to guide the actor.) For BBB, their sign up page was missing marketing copy and this caused a lack of clarity when users ask What’s in it for me?

I referred to a post by Toptal about the value of UX copy as a starting point. In the end, I came up with this:

Layout

If we jump back to the existing layout, we can see that the sign in and sign up is aligned to the center. The space would be better utilised by adopting the 2 column layout with the visual design on the left and the sign up or sign in card on the right. Especially now that we have our blend of UX copy and marketing microcopy, that can go on the left column since we read from left to right. The user navigation flow is now cohesive with UI, UX and the business goals.

The final product

That’s a wrap for Day 1! 99 more days to go. If you enjoyed this, I would really appreciate it if you could like it on Dribbble and follow me on this journey! I would also love to hear your comments and feedback so shoot me a message! Check out my past projects here.

🔗Let’s connect!

Behance

Originally published at https://heysuen.com on June 13, 2021.