100 Days of X
So this blog began in a rather abrupt way.
I created this website as a way to have my portfolio easily accessible online, but with that done, I figured it would be nice to use the blog function for something – but what?
A friend of mine, Steph, started the 100 Days of Code challenge a few days ago and suggested I join in, either to code or for something else. We had a conversation and after bouncing several ideas, she mentioned the Daily UI Design Challenges on Dr. Angela Yu’s Web Development Course Resources.
Daily UI will send out a daily email for 100 days with a theme for the day’s challenge. This sounds like a good idea. I can go straight to tackling the challenge itself instead of planning for different challenges to take on daily for 100 days.
I felt that this would also be a good and fun refresher into UI and the whole Human-Computer Interaction topic; something I haven’t touched on in a while.
While Daily UI didn’t set out specific rules for their challenge, I found that most 100 Days of X Challenges followed several rules.
- Work on it for at least 1 hour daily
- Tweet your progress daily
- Encourage at least 2 people in the challenge every day
We are also free to adjust them to fit our situation. So in my case, I set out to:
- Work on it for at least 1 hour daily (only on weekdays as Daily UI encourages us to enjoy our weekends)
- Blog my progress daily
- Encourage others to take on their own 100 Days of X Challenge as and when the opportunity arises
As it’s a daily challenge with the expectation of around an hour’s work, I try not to overthink it. My goal is to create quick daily prototypes and not create full design systems over 100 days.
So with that, I begin the first Challenge.
001 – Sign Up
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.
For this Challenge, I’d like to create a sign up page for a running event.
We would need these
- Event they’re signing up for
- Participant’s particulars
- Legal/indemnity forms
- Payment
I am also going to design this with a mobile experience in mind.
For this, I used Figma and based my dimensions on an iPhone 11 Pro Max.
Not so social media
Many services today would have the option to complete your sign up in a single step by linking it to your social media account of choice. For the purpose of this exercise, let’s assume that we don’t want to do that.
My focus here isn’t to create a cool logo for the event or do any kind of designs to promote it. Going back to the day’s challenge of a sign up page, my focus were on
- Color: Thematize the event with a selection of suitable colors. I selected it to be primarily green to go with the trail running theme.
- UI/UX: This is a mobile experience of a webpage. It should reflect the best practices and limitations of what you can do with a typical web form. I also went with a multi-page approach to make the process seem more manageable (I believe that there’s also a study that shows that a multi-page form improves usability but I can’t find it at the moment).
Again, the aim here isn’t to create a polished sign up page, but to quickly churn one out within a short time.
Landing Page
I wanted the event’s name to be a cover for every page of the sign up form. I feel that this helps to create consistency between pages. For the final product, this could be an image with the event’s logo.
For the Landing Page, I wanted to start with a countdown towards the event. This creates a sense of urgency especially for people who access it close to the event date.
I didn’t want this page to look like a typical web form. I believe a page that looks simpler and less formal would lower the barrier to entry for the user to want to begin.
The two things they can select here: Event type and distance would be enough to let the user commit to a particular event that they might be interested in without having to reveal any personal information yet. Again, lowering the barrier to entry.
Personal Details Page
After selecting an event and a distance, the user will be brought to the Personal Details Page. This is where I departed from the informal looking page and start using a typical web form format.
There is a progress bar at the top. I believe that this is important to give context on where the user is at and how much more there is to go. I kept it at 4 points to make it feel manageable.
I kept it to only the important information:
- Full Name: To identify the participant.
- Email Address: To send the receipt and any updates, also potentially for mailing lists.
- Phone: Ease of contact, especially on event day (participants are likely to bring their phone, but we can’t be sure that they have reliable internet access).
- Address: To mail the t-shirt to.
- Date of Birth & Gender: For statistics, but also to assign the participants to their age group and gender.
- T-shirt Size: For the finisher t-shirt.
I initially collected the user’s ID but I did a quick check on an upcoming running event and they don’t collect that now. It could be changed due to the Personal Data Protection Act.
At the bottom of the page, the user can navigate back to the previous page at any time but they can only advance forward once the current page is correctly filled up.
Legal/Indemnity Page
I guess this is the boring page that has to be here for legal reasons. To make it feel more interactive and feel more useful, I moved the Next of Kin details to be done on this page since I felt it was somewhat relevant.
Other than that, the bottom half is pretty standard stuff where you have to acknowledge that you read the terms and conditions (but you probably didn’t).
Again, buttons to navigate between pages at the bottom of the page.
Payment
And finally, the Payment Page. This page summarizes the user’s choices and details. After all, if you think about it, it is an ecommerce transaction and there are established standards to it.
For simplicity’s sake, I only allowed payment through debit/credit cards. I feel that this page should be simple to make it as transparent as possible to the user. Too much clutter and unnecessary details will only serve to make it look less professional and, dare I add, somewhat dodgy.
Being the final step, I wanted the Checkout button to stand out from the previous steps. Much like the large buttons on the Landing Page, I went with a large one here too to give a sense that the user had come full circle and that this button carries a bigger weight than the previous ones they used to navigate between pages.
When placed with the previous button in this page, the Checkout button is placed higher to show the hierarchy between the two buttons.
If I were to amend this page, then I would create an edit button beside the Summary header to allow me to jump to the Personal Details Page.
Conclusion
So that’s my take on day 1 of the Daily UI Challenge. It was fun and I hope you enjoyed reading it and possibly learned something new.