Omnitracs – Portal Redesign

Category
Apps, Illustration, Mobile, Prototype, UX
About This Project


See MVP Prototype

 

Project Role
Lead UX Designer

 

Details
Tasked to redesign the new OT1 portal that housed over 100 applications and then ensuring that all those apps all following the same design. Each application had to be redesigned to fit the new look and feel as they all looked different because they were acquisitions. That means I had to vet each application and figure how to make each one fit the new information architecture.

 

The designs you see and the prototype are the primary MVP we created to drive the vision.

 

Starting from Scratch
What were our primary goals? What did we want the user to feel using the new experience? What steps would we need to take in order to make the experience something that enriched their life instead of taking away precious time? Could we actually create something that empowered them, something they enjoyed?

 

Best Practices
One of the main things that helped drive the mission was to follow best practices. For example, I was pulling from and using standards that are well-documented and psychology-design driven like:

 

  • Hicks Law
  • Fitt’s Law
  • Gestalt Principle
  • Psychology of Persuasion
  • Mental Models
  • Color Theory
  • Von Restorff Effect
  • Visceral Reactions
  • Dual-Coding Theory
  • Psychology of Shapes
  • Pareto Principle
  • Winning Patterns (goodui.org)
  •  

    And finally, my favorite rule/law of all time:

     

  • The Rule of Three = An ineffable psychological phenomenon in which ALL people prefer that any given group of items be organized/presented as a group of three, no more and no less. I apply this rule to all my layouts given complete autonomy. When there are more than three items within a list for example, I would add “See More” to expand the group. This is the secret sauce in design and something I’ve witnessed for over 25 years as a designer. It really doesn’t even matter the context. It could be three candles on a shelf, and people would ineffably like it vs. if there were say four or five candles. (Note: Even the Rule of Thirds (used in photography), seen as grid on your phone taking a picture, follows a similar pattern. Its as if human beings just can’t help but see beauty when it comes to the power of three). If you are still unclear about how this applies to user interface design, just check out my MVP I created for Vex Robotics. The rule of three is common pattern throughout the experience

 

Additionally, a lot of data was pulled from Nielsen Norman Group’s website which contains nearly everything UX you can imagine when it comes to best practices. Some other good resources that I frequent are Sam Hulick’s UserOnboard.com and goodui.org to name a few. Because we didn’t have much resources in the beginning when it came user testing (other than meeting with several customers/workers) we had to rely on much of the before mentioned examples, with one distinguished example GoodUI because they actually do user-testing using one pattern across multiple websites to find out what the mean average was. Just wish the subscription wasn’t so expensive 🙂

 

Content Strategy
I came up with an unique illustration style and conversation theme to give the interface a more approachable and human-like touch. Better yet, we wanted the layout to have a voice so that customers felt like there was an exchange, instead of feeling like they have to use this product. The end goal being a much more natural day-to-day relationship with the product so that they will enjoy it, not dread it!

 

As the content strategy started to take shape, so did the new design system. We started with a base DS using Ant Design. This gave us a default component library to ensure we at least had everything covered. Over time, we began to customize our own DS matching brand colors and subsequent themes.

 

Bottom line, we were determined to differentiate ourselves from the competition.

 

To be sure, I had to do a lot of heavy lifting since I was tasked to ensure that the experience was consistent end-to-end. That included: Discovery phase with research and competitive analysis, creating the base templates for primary screens, look and feel, illustrations, copywriting and ensuring our design system was top notch and easy to use.

 

Also, I want to make sure that they reader understands that everything you see, I designed from scratch as I felt that the company needed and edge over the competition. So the approach had to have a primary lead to ensure the vision that was agreed to with the stakeholders would actually get built as expected.

 

We had lots of challenges, but most of that was not related to our team, but external decisions that affected our productivity and vision we had for helping the business succeed. All and all, it was a great experience and building and entire DS system including illustrations was no small task.

 

If you are wondering about the rest of the team, just know they had their hands full with other projects. This particularly one was a 1.5 years in the making and had to go three primary stages to pull off.