Follow the 100 Days of UI design with context and a process in mind [Chimdindu Aneke]

[chimdinduaneke]

Hi everyone,

Shouts out to @bendaniel10 who encouraged me to be a part of this great community-Radar. I have gone through and seen quality discussions happening ( I love the design section too ) . Greetings too to everyone here for I am enjoying every bit of what’s happening.

I embarked on 100 days of UI challenge but with a very different approach.

I am more interested in the creative direction/process than pixel-perfect looking screens but I will do my utmost best to create something that fits in well. So you will see that I write about my process and always have context in mind.

Even though I am using the challenge to learn but also encouraging great designs in the ecosystem and plead for us all to start advocating for quality designs in the region.
And since I am Nigerian and based here, I am making all designs local and surely you will get to learn my design process and how I approach the challenge uniquely.

PS 1: I will be posting all designs on this single thread and won’t multi-post - for easy reference and feedback

PS 2: Apologies to all who hate clicking on a link to read full gist. I have already started documenting the daily challenges on Medium.com and will have to write summaries here with a link to read full design process.

PS 3: Since I am using one single thread I will quickly post the past 8 days here and will continue adding to this thread for the upcoming designs.

PS 4: To organize and keep feedback neat, please respond to specific designs which appear as “replies” to this post.

Thank you all and please your constructive feedback (positive and negative) is highly welcomed. We are all in this to learn and grow.

Entire Design with Sketch App and interactions to this day in Flinto

[chimdinduaneke]

Day 1 of 100: A minimal, easy to do sign up form for Jumia.com

"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”

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."

Please read the full design process on Medium to get a full picture.
Day 1 of 100: A minimal, easy to do sign up form for Jumia.com

Before

After

Please I encourage you to read the process and context behind the design to get the full picture first.
Your feedback is highly welcomed as usual.

[chimdinduaneke]

Day 2 of 100: Card checkout UX flow — from Diamond bank online to Interswitch WebPay Platform

"How can my experience purchasing data bundle from smile be improved by following the flow from Diamond bank WebPay platform to Interswitch WebPay payment page?

As usual, I asked lots of questions:

• Is the current Interswitch WebPay’s checkout form the best that can be offered to users?

• How can I minimize the steps to ensure a successful transaction is made?

• Does the look and feel of the two sites ( diamond and WepPay ) encourage or intimidate users?

• Does the page make users feel secure or afraid that something can happen to their money?

How can customers be re-assured that they are few steps away from completing a transaction?

Are we really helping users by handling minor form details that that can easily be solved?"

Before

After

Please I encourage you to read the process and context behind the design on Medium to get the full picture first.

Your feedback is highly welcomed as usual.

[chimdinduaneke]

Day 3 of 100: Landing page that engages — A Wakanow case study

What was the ultimate goal?
To design a landing page that will on-the-fly encourage viewers to engage with the PSS page once they it loads.

Background research
Unlike the last two days where I immediately asked myself lots of questions about how to design a better experience, I instead turned quickly to research and understood the following;

• what actually is a landing page and an ‘above the fold’ design?

• sites that have successfully implemented great landing page experiences.

• the myths of ‘above the page’ designs.

• great qualitative usability tests conducted by lots of companies interested in the usability of websites. I thoroughly went through Nielsen Norman Group’s awesome insights on ‘above the fold’ design, scrolling and attention, how little do users read, interaction cost etc )

• what makes great above the ‘fold designs’ for a landing page.

Please read the full design process on Medium to get a full picture.
Day 3 of 100: Landing page that engages — A Wakanow case study

Before

After

[chimdinduaneke]

Day 4 of 100: A Simple Calculator App

“I scanned through Dribbble to see what fellow designers have created, employing their whole creative self… I also spent sometime looking at the Android built in calculator on my device. I scanned through lots of calculator apps just to know what stood out in their designs.”

I was able to ask myself “Why are Calculator screen digits right aligned?”

Yeah, it puzzled me, I Googled it and found out from this [UX-stack exchange link]
(http://ux.stackexchange.com/questions/72227/why-are-calculator-screen-digits-right-aligned) that

Screen digits are right aligned to maintain positional consistency between what a number represents (in base 10 that would be units, tens, hundreds, etc.).
E.g. If I were to have 764 and then multiply it by 24, the answer would be 18336. By aligning to the right I’ve consistently seen the same unit representation in the same position, and when I’ve had new units (the 1 and 8 in 18336), they have appeared in a new position.
It also allows there to be a consistent alignment between character groupings (typically every 1000, but in some cases 100s and 10,000s)

Final design

[chimdinduaneke]

Day 5 of 100: GIF Maker

So what was the today’s goal?
To quickly create an android app icon that is simple and obeys all known app icon design principles

That brings us to our challenge today — App Icon design. It is easily neglected but very key and contributes to the overall success of any app. It opens the door to your app, so you see it needs serious attention. Even at app market stores, it is what draws people closer to pressing the download button.

Knowing the full gist will help you understand the process behind the designed icon you see below
Read entire article: Day 5 of 100: GIF Maker

[Diakon]

Good one, Chimdindu! Been following your designs on Facebook and they’ve been pretty insightful! I do hope you’ll stick with it, though.

[chimdinduaneke]

Day 6 of 100: A Profile page

Yes! No article for this design since I only tried to replicate the material design Android UI contact profile screen. I kept most of the thoughts at heart because of less time to make article that very day and also you easily compare what you see by just checking your android device contact screen.

[chimdinduaneke]

Day 7 of 100: Jumia app settings screen redesign

"Day 7 was quite interesting because it’s more like a review of best practices to consider when designing a settings screen. I am using Jumia as a case study.

So where is Jumia.com getting it wrong?

• Issue 1: Confusing settings name — Jumia called it “my accounts”

• Issue 2: combining user profile page and settings page

• Issue 3: Can we please hide the “share our app” page?

• Issue 6: push notifications is checked by default.

• Issue 7: shades of gray, bold and all caps titles add to the visual weight of the settings page and should be reviewed."

Get full design process gist by reading full article-very important if you want to give feedback since you will know why I did A or B
Day 7 of 100: Jumia app settings screen redesign

Old

New

[chimdinduaneke]

Day 8 of 100: 404 error page and Nigerian websites

"Some days ago, a friend of mine told me how bad she feels whenever she encounters a 404 error page. That it’s too annoying to see 404 error pages shown to her by different sites. Well, I don’t blame her either for I have not seen anybody who enjoys a 404 error page. ( only designers I guess — who love to make things human friendly
That brings us to the question, what exactly is a 404 error page? and why do designers and developers waste time crafting a great 404 error page."

What popular Nigerian websites have done?

The ideal minimal 404 error page

[chimdinduaneke]

Encouraged to know that you have been following By His grace I will.
Please don’t forget to always give feedback where necessary. Thanks alot

[spokentwice]

I like your approach

[chimdinduaneke]

Thanks @spokentwice

[chimdinduaneke]

Day 9 of 100: A Music Player — A water-rising progress bar concept

So I designed a Music Player screen but what made this so cool is that I wanted it to be totally different and thankfully I came up with a water-rising progress bar concept - It is as if the screen is flooding and rising to the top of the screen when a song is playing.

Read the entire process on Medium to understand the water rising progress bar gist.

Your valuable feedback will be highly appreciated. Thanks everyone

See the two images and notice the rise

[Diakon]

Nice concept, but not so sure I’m cool with the “progress bar” covering up the album art. And how does one seek to a specific point? Dragging a wave up or down might seem kinda awkward.

[Diakon]

This is my best so far. The first time I saw the original Jumia settings, I was overwhelmed and even kinda scared. Your version reduces the cognitive load on the user and pays homage to the fact that “simplicity is…”(please remind me )
It seems many professional app devs don’t read Google’s design guidelines. The section on “Settings” would have been really helpful.
EDIT:
I remember now! “Simplicity is the ultimate sophistication”.

[Ndianabasi]

@chimdinduaneke: This thread will become an encyclopedia of Nigerian-born design concepts when you are done. Well done.

I came up with a water-rising progress bar concept - It is as if the screen is flooding and rising to the top of the screen when a song is playing.

My tweak on this concept will be making the rising water a bit transparent so that the album art will always be seen. It is an experimental concept which should be designed into themes of popular music players for testing and further feedback.

[chimdinduaneke]

First milestone: 10 Down
Day 10 of 100: Day 10 of 100: Social Share button design concept [animated]

It has been 10 amazing designs in 2 weeks. Step by step we are moving

DailyUI prompted us to design a Social Share button

The challenge I took: — An animated social share button concept.

Different concepts that emerged

Read the entire article Day 10 of 100: Social Share button design concept [animated]

[chimdinduaneke]

Great idea @Ndianabasi, a bit transparency will make it more interesting. Yeah definitely what a test, next thing actually should be to test as you said with real users and get feedback and na so app dev dev start
Thanks also for the kind words, really appreciate it.

[chimdinduaneke]

Thanks a lot @Diakon. Exactly, what we need in our country and region. We all need to start advocating for great design ( truly solving problems and outcome being quality products).