Designing a User Profile: How to Use Overrides

Infragistics Team / Wednesday, September 19, 2018

By Dainail Marinov

No matter the type of software project UI/UX designers have their hands on – apps for fintech, blockchain, or e-commerce – almost all projects share one screen in common. In this case, we’re talking about the part of an app containing the user’s personal info…his profile.

Yes, on the surface, everything looks like a piece of cake. We should include an image, name, password, and save button, plus various option settings. While all this holds true, this simplicity only applies to run-of-the-mill scenarios. When diving deeper into a concrete business case of a software product, the user profile screen is likely to become a bit more complicated. From inner levels to billing and verification – when it comes to the profile screen – the devil is in the details.

If you have to design a component-rich user profile case,it's time to gear up; you’ll confront a few challenges defining the best UX scenario and picking the optimal components to represent it. Then, after performing UX tests on the initial prototype iteration, it’s time for changes and improvements of the wireframes. And yes, we would need to make the wireframe improvements as soon as possible.

Furthermore, let’s stick to this familiar phrase, “As soon as possible!”, and let me show you how to use the pixel-perfect predefined Sketch Components and Indigo.Design patterns to build up our UX concept.

Let's Begin

With the initial paper sketches already done, we’re in front of the screen and ready to begin with Sketch. Here comes the first neat surprise (let’s stick to using surprise only for positive vibes):

We don’t need to lose time thinking about how to start from the blank artboard when we use Indigo.Design UI Kits, because we can simply insert one of the patterns closest to our design concept.

As a member of the Indigo.Design product team, I’m excited to create more patterns that are going to aid in a variety of use cases. So, if you have a need for a specific use case, don’t hesitate to drop us a line. You can even attach a mock-up to illustrate it better.

The next step is to configure the existing User Profile Pattern according to our specific requirements. I’m going to keep the initial pattern next to the modified one to keep track of changes:

Here is the result after choosing a different profile image representation.

From the option situated under Avatar, we can quickly define the background color of the icon in the bottom-right corner, the icon type, text color, placeholder text, etc.

As you can see, the initial pattern provides several inputs, the first of which is represented in the focus state, while the rest are in the filled state. Of course, if we want to change the state, it can be done easily from State options.

For the current example, I chose idle state, so I receive that result. What’s rather useful when specifying an input is clearly describing its behavior. For example, noting whether a password is incorrectly or successfully typed. That can be set up from State dropdown again. After choosing the state that we want, the inputs are perfectly distributed vertically.

What if we want to change the layout of the input to show boxes instead of lines? No worries, just change it like this…

…and you receive a perfect-pixel boxed input. Needless to say, if you prefer that layout, better to stick to it for all other inputs.

Moving on, what if you wanted to have more complicated inputs including suffixes, prefixes, or icons? Our library provides easily editable templates that cover several cases. Let’s start with the initial condition.

Then, you can see how to get the input with prefix and suffix icons.

It’s likely you’ll just need to edit the icon which you can edit both for prefix and suffix color and icon type.

If we want to go even further and use another Component rather than and Input, we'll have to detach our Profile pattern and edit the smaller components. 

 

Very often we need a switch option when editing a profile, so let’s add and edit such a component from the Indigo library.

Since the pattern is already detached, I recommend deleting an input after adding another option, to use it as a base point for alignment.

After precise alignment, you can just stretch the switch component to fit between the offset.

Finally, just delete the input or field that you don’t need and edit the switch label.

In case of more complicated profile settings, we may need to add an item that navigates the user to another screen or deeper level. If we face this case, I recommend using a list item.

First, we add it as a component from the library, then we put it wherever we want on the screen and simply adjust its width to fix the screen size. Finally, don’t forget to change the label.

An important note that I would like to add: Don’t add a component from the Overrides menu. I know it is very tempting since it is positioned on the top of the components list, but it’s better first to add the initial form of the component than to configure it from the right option panel.

That’s all! As promised, using our Sketch UI library speeds up your productivity. But that’s just the beginning, as more exciting Indigo.Design capabilities (such as how to code generate your design) will be revealed in upcoming articles.