Day 1 of 100: A minimal, easy to do sign up form for Jumia.com
UI design challenge with context and a process
I took up a daunting challenge to design 100 UI elements in 100 days by @DailyUI. I was initially disturbed about just making up UI screens considering I don’t want to end up contributing to the “dribbblisation of design” — Designing without context and no real problem. But thankfully, a unique approach came.
For every day of the challenge, @DailyUI assigns us a UI task to design. My unique approach is to subject every design challenge to a real life scenario and use a “Google design sprint-like” process to tackle the problem.
My unique approach is to subject every design challenge to a real life scenario and use a “Google design sprint-like” process to tackle the design problem.
( I love Google design sprints and since it can be adapted to fit any design challenge, I decided to see if it will work out for me in this unique case).
So the first day was to design a Sign up form. And what did I do? I chose to redesign the “Customer registration sign up form for one of Africa’s largest online malls — Jumia.com”
What was the ultimate goal?
A minimal, easy to do sign-up form for all users willing to create an account on Jumia.com
Just like in any design sprint— I started by setting an ultimate goal for the project which is to design “a minimal, easy to complete sign up form for all users willing to create an account”. Even though I am doing this alone but I tried as much possible to ask lots of questions by wearing different hats. So I started by asking lots of questions:
- How can we simplify the signup form for Jumia.com?
- Does the current form feel intimidating or too tiring to fill for new users?
- If I am the CEO of Jumia and was made to fill the form as a new customer, what will my reactions be?
- Does anything appear like a marketing trick that can be detected by new users?
- Can the number of fields be reduced to half the current?
- What one thing can I do to make this form more interesting to fill?
- and many more questions also passed through as thoughts :)
Mapping the journey
Even though I was designing just a single screen I still tried to create a mental map of how users sign up or login into apps before continuing their journey on the site.
Research
So I did some research on what makes great signup forms and some of them were relevant to this redesign:
- Eliminating as many fields as possible that is not needed at the onset.
- Grouping of similar fields logically.
- Offering social sign-in options.
- Clear and straight forward prompts and instructions.
- Reducing distractions.
- Sign up forms should not take time to complete no matter what.
- Customers already have a myriad of usernames and passwords to remember and don’t want to create an entirely new account on new sites — so they want the quickest way to complete forms.
- and many many more :)
Also I reviewed the current Jumia sign up form and noticed a lot of issues with it.
- 2 click throughs required to get to the sign up page :- Why separate the sign up page — social sign up and form sign up form? Placing them side by side or having the social login above and the sign up form below can make a new user’s life easier, who would love to spend less data for data is still expensive in Africa.
2. Required fields instruction text below the form? If my teachers during my school days had put our examination instructions on the 34th page ( last page ) of our question papers, then I doubt if anybody will be able to graduate from school. This should at-least come above every field to allow the user, at a glance, know what is the most important information on the page. Unless this is another marketing trick to force people to fill all fields before realizing the optional ones. (:
3. Many unnecessary fields for a first time customer who wants to be done with the sign up and engage in buying stuff immediately. Gender? Birthday? ( not necessary and not formatted well)
4. Marketing tricks played out too — Please the newsletter subscription can happen somewhere else in the site. Do not disturb users again for they have seen this same request in almost all the websites they have accessed today.
5. Automatically checking form fields for users is not a good practice — it’s just like forcing someone to drink poison and pretend as if you are not the originator. It is not a good practice to automatically check fields for users.
6. Great use of whitespace but the page at-least needs a little formatting, cleanup and “make up” :)
Asking the “How might we” questions
So after analyzing the Jumia sign up page, user maps, previously asked questions, I came up with some “how might we” questions that will decide what I should focus on and run with.
SKETCH!!! SKETCH!!! SKETCH!!!
So after figuring out the most important thing to work on, I took my pen and started sketching lots and lots of likely UI screens and kept validating my questions.
As I kept destroying my notebook with lots of sketches I arrived at my EUREKA moment in meeting my ultimate goal.
- I was able to reduce the number of fields from 10 to 5.
- Merged the social sign in option and signup page to form a single page.
- Stripped off optional fields that can be completed later by the user.
- There was no need for required fields any longer. Added more social login options since some prefer their Facebook account( which Jumia only used as their social login option) to be private. Someone like me would rather use my twitter for social logins and not Facebook.
- No need for the “keep me logged in” checkbox for that can be handled behind the scene and a visible logout button provided incase the user wants to opt out anytime.
Did any prototype emerge? Yeeeeesss :)
So after many variations using Bohemian sketch app,
I was able to come up with this final prototype which is very minimal, easy on the eye, very simple to fill, contains the basic requirements anybody will be happy to fill out, when registering a new site especially on an e-commerce site.
DISCLAIMER: I represent myself and myself alone and not any company or secret agency trying to mar or destroy Jumia’s online image. I am just a learning designer trying to improve, by looking at real life design scenarios. And I intentionally avoided branding the final prototype since this is meant for educational purposes only.
Thank you so much for reaching the end of this article. Please your feedback through comments will be highly valued and will help me in becoming a better designer and don’t forget to “recommend” and “share” the article for others to learn just like you :)
Check out DAY 2 of the 100 days UI challenge — Card checkout UX flow- from Diamond bank online to Interswitch’s WebPay
References:
Should registration be optional on an e-commerce site?
Ways to Improve Your eCommerce Registration Process
12 Ways to Create a User-Friendly Website Registration Process
10 pillars for a successful eCommerce user experience
3 UX examples from innovative e-commerce companies
