The goal of this design project was to improve the existing user management tool used by the company where I work. The current implementation was a bit outdated and confusing to use.
This is why I was tasked with performing some research into the area of UMS (User Management Systems) in an effort to design a user-friendly and clean interface to manage users.
The initial stage of this project was pretty research heavy as I had no previous experience with this type of system.
This required an in-depth look into how user management systems work which proved to be quite useful in gaining an understanding in this area.
Once the research was conducted, the next steps were to review the existing feedback from the original user management tool to see where potential improvements could be made.
All of this research and preparation resulted in the compilation of a list of use cases. These use cases would be used to identify the features available in the new system as well as how to complete each step.
This process of following each task through step by step would result in a more fleshed out idea of what the potential skeleton UI might look like.
It was at this point that rough wireframes were created based on the research carried out. The wireframes detailed each of the different screens that would be available in addition to laying out the content on each screen.
The benefit of starting with wireframes is that they are easy to chop and change as you develop your screens.
As wireframes are only meant to be in black and white, this also focuses the mind on just looking at the content structure rather than the design at this point. That would come next though.
Following the creation of the wireframes, these were used to develop higher fidelity mockups which would resemble more closely what the finished design might look like.
For bigger projects or applications such as these that have many screens, I will sometimes start with the creation of greyscale mockups i.e. I avoid the use of any colors to avoid distraction. Once I am happy with the content and design of each screen I then go ahead and add the color.
This is super easy to do in Adobe XD as if you have set up your components efficiently, all you have to do is press a few buttons to create a colored version of your mockups.
The color palette itself was generated in Coolors.co.
Note: I generated another version of this project using the branding of the company where I work. For the purposes of my portfolio, I decided to move away from that color palette and try something different.
I had a general idea that I wanted some shade of blue/teal as the core color as this would signify professionalism and a clean design when used effectively.
I chose a purple color as an accent for use on buttons and icons, in addition to some other primary colors for various other icon/button/reporting colors.
- Wireframes were created in Balsamiq Mockups
- Mockups were created in Adobe XD
- Color Palette was generated in Coolors.co
The end result of this project was the creation of mockups that would serve as the starting point for the development of an improved user management application.
By working in Adobe XD, I was able to link each of the screens together to create an interactive prototype. This would be able to convey the interaction on each screen and the intended effect of that action.
Further iterations of this project will likely be required to refine the design based on feedback but the initial design was created to serve as a first draft for now and has been well received by the team.