Self-service Management Portal
Professional Work / Winter 2018
ROAMsupport is a self-service client management, information, and support portal. Its goal is to give users flexibility, visibility, and control over the way they run their day-to-day business. My major goal here was to create a simple-but-dynamic, easy-to-use product with a straightforward experience. I had to consider our own branding guidelines while integrating a modern look and feel that was consistent with our other various products. The following is my process.
This user flow was created first to give an overview of the general flow of our users choices. I wanted our user to have clear paths depending on what they wanted to manage and do. This user flow is color coded as well to give a better idea of the organization of our various pages. Using this flow can give you a better idea of the start and end goals that our portal is capable of, as well as a general look into the entire user journey. I used this user flow as the basis of my wireframes and final design.
The majority of time spend on this project was spent wire-framing. Because ROAMsupport is so robust, I wanted to make sure our user interface and and interactions were consistent, easy to use, and as straightforward as possible.
Because of the complexity of ROAMsupport, we went through a big rotation of wire-frames. Aside from designing the general look and feel, I wanted our wire-frames to work as a solid foundation going forward.
Wire-framing works as a great way of organizing your content architecture as well as a way to show co-workers and partners your thought process without diving into the time consuming details. It's also a great and easy way to get feedback before putting the cart before the horse.
The following are various high-fidelity concept mock-ups (in no particular order). We eventually landed on a design which you can see near the end of these mock-ups. I wanted a modern look and feel while still maintaining our visual identity. I used elements from our branding guidelines combined with current trends to design a sleek, consistent, modern interface.
Neutral tones. Bold accent colors. Simple interface elements.
We went through many iterations of navigation elements and details. To me it's important to be pixel perfect. The various nuances you can find in designs and interfaces play an important part in the overall experience.
The work doesn't end there. Developers need assets, style guides, specifications, etc. These screenshots show a glimpse into my production aspect.
I created my interface using Sketch. I then used a plugin (Zeplin) to streamline the asset creation as well as automatically create style guides and specifications for all my pages. This can easily be shared with developers and gives them every little detail they would need form my design.
👋