How might we make adding messaging to mobile easier??
Messaging is powerful yet many apps don't take advantage of it. It is hard to implement, difficult to secure, logs aren't easy to understand, and a number of other reasons. The APIs from Magnet Message solve many of these pain points.
Role
UX Design
UI Design
Visual Design
Goal
Developer centered
Scaleable
Streamline Onboarding
I audited the implemented UI, re-organized and overhauled it for a better user flow and experience. I designed the logo, and established style guides.
I was brought into this project after implementation was already underway. This project has planning, design and implementation happening concurrently. There was not product, UX or visual designer on the project beforehand and engineering was implementing their ideas as they deemed fit.
Planning Phase
Research
This was a huge project with 3 distinct functions. Messaging being the first to launch and the other two planned for after. This would require careful planning to make sure the first product could scale when integrated with the other two products. The engineering team had done some research on competitor applications and taken UI layout from some of them as a means to show the implementation. I needed to clean all of this up, stream-line and optimize it, and brand it as our own.
I looked at the current implementation, competitors and the functions expected for this release and future releases. I looked at and evaluated the function requirements and built out user stories for engineering and QA
Design Phase
Looking at the current implementation I designed specific patterns to clean up and unify the interfaces. I also took into consideration the scalability of these patterns so they would work with the future releases.
I redesigned the navigation to have a "system" navigation at the top next to user information, and a collapsible drawer navigation on the left for the functions of the section the user is currently in.
The Message product would have two sections:
An "administration" section for server and account controls, and
An "app" section for individual logs, settings, and users of the mobile apps connected to the server.
Each section had their own navigational elements so using a top navigation to select the section and a left drawer for section controls made both sections unified. This also made it clear to engineering how they would scale the project and how the UI of future products would function.
After sorting out the navigation, I turned to the actual page layouts. I added a traditional toolbar so all the buttons and functions would be placed consistently and organized.
The last component was the branding. There were many talks about what color the console should be. The company colors were red, black, and white, none of which were suitable for the primary or secondary colors of the product. Up until this point engineering had used a basic bootstrap css, which left it lacking a polished feel.
I had just finished a redesign of the Magnet.com website and redid the color pallet there. There were 2 options based on this new color pallet - an aqua-blue, or a minty-green. I pitched the blue to be the primary color, with a gray as a secondary color. The green would then be incorporated in headers and buttons.
I created a design guideline with this information laid out.
Implementation Phase
I sat down with the frontend developer as needed to answer his questions or clarify places on the UI he was unsure of. Since the guidelines were being worked on as implementation was happening, these sit downs were helpful to reduce the amount of reworking that would need to be done as well as keep both of us on the same page as to what state the UI was in.
With great communication and time management I was able to complete the planning and design tasks and work the changes into the implementation without impacting the sprints and schedule. By working closely with the engineering team the UI and UX were greatly improved and up to the standards needed to launch the product.
Deployment Phase
This application was released in 2015 available on the Magnet Message product page and Github.