UI design should not only look good, but be intuitive in its functionality and easy for users to understand right away. Where some things may appear obvious to the designer, it’s always important to consider all use cases, and design from a beginner user’s standpoint.
This is a look into the redesign process of the ‘proposals’ page in our internal project management system as an example.
Indicate the 'problem(s)'
Here, admins are able to view and edit project proposals, as well as track the amount of time spent on a page by the clients. Because the company needed the proposals function quickly, this page was put together by a developer. From the very beginning, all necessary components are available. The hierarchy is clear and the user understands which section takes precedence, as ‘proposal’ takes up ⅔ of the screen, with ‘latest tracking’ taking up ⅓ on the right. However, it still lacks a cohesive design that can better organize and include actions that will make this page more intuitive.
The ‘options’ button on each project includes the following actions: delete, publish, and archive. Where the ‘edit’ button makes sense to be on its own since a proposal can be edited one at a time, the actions in the ‘options’ button can be applied to one or more selections at once. Thus, the organization of the buttons gives the opportunity for creating mass editing capabilities.
Design Process
Ideation
Before jumping straight into designing, however tempting that may be, it’s important to brainstorm and lay out your thoughts to ensure a smooth process. After considering and making a list of problem points and elements we want to design, we can:
Look for inspiration / create a moodboard
General tip: A moodboard can be made easily on Pinterest, or by saving and arranging images to your preferred program. When looking for things to add, it could be helpful to split up the search for 1. functionality/interactions and 2. visual (branding, organization, and so forth) elements. If you have any existing products in mind that have successfully achieved a goal on our list, it is important to note them as well. Remember though, it isn’t necessary to have a lot of items on your board. Less is more!
For this proposal page, I looked at project management layouts for visual inspiration. For our goal of mass editing capabilities, I immediately thought of of e-mail systems, specifically the functionality of gmail:
Storyboard
It is important to storyboard all process scenarios of each function you are designing.
Sketch out your ideas
After completing your board, doing quick sketches of potential layouts will give a good sense for what may or may not work to save time when working on screen. 2-3 variations may be a good number as to not overwhelm yourself.
Wireframes
In the program, we can begin by laying out the existing page. From there, you can begin to reorganize the elements into your chosen variations. After establishing the most effective layout, we can create storyboard wireframes for each step. Don’t worry about the appearance quite yet, as it is important to get all functions down first.
Design
Finally after creating and ensuring the wireframes meet all functional needs, we can begin adding visual elements that fit the desired branding and functions.
The latest design
This is the current design that is implemented in the project management system. Although this is the current solution, keep in mind that there is always room for improvement as needs change over time. Happy designing 😉 !
Lorem Ipsum
This is the current design that is implemented in the project management system. Although this is the current solution, keep in mind that there is always room for improvement as needs change over time. Happy designing 😉 !
Lorem Ipsum dolor
This is the current design that is implemented in the project management system. Although this is the current solution, keep in mind that there is always room for improvement as needs change over time. Happy designing 😉 ! This is the current design that is implemented in the project management system. Although this is the current solution, keep in mind that there is always room for improvement as needs change over time. Happy designing 😉 !
