This was a test project for Babyblog. Redesigning user settings for site. I focused on small, easily deployable stuff.
First things first. Repeat the current look in Sketch, making all vectorized, easily customizeable and ready for work.
Now, let's define some object and styles and make a UI Kit out of it.
Now, we fix the controls. First the inputs, which seem slightly off-center.
Now buttons, which use “ghost” style currently, which doesn't translate well with forms, when it can be easily mistaken for disabled state.
Now we add additional states for checkboxes and radios, to help user understand easier what will happen after the click.
Then go the dropdowns, which we turn into combo-box and re-sort them with most common choices on top.
Finally we fix slight incosistency with icon sizes and make new icons for “user” and “communities” with feminine silhouette.
And we put it all back.
And notice inaccurate overlap…
And illogical placement of settings link, and useless online indicator.
Now it's time for re-structuring settings.
And making better pop-ups for notifications.
And better error notifications.
And fixed favicon.
And finally for proper url.