Member Navigation Redesign



Product Design, User Research, Phased Rollout



Context





As a member to member health sharing organization, our members send their monthly dues to one another to help cover medical needs. In order to do that, our members have had 1 of 2 options. Either utilize snail mail to send a paper check to their member and hope it gets there, or utilize a third-party fin-tech app which our support staff has no visibility in for support. To solve this, and enhance member experience, our organization has prioritized building an in-house fin-tech platform to allow our members to share funds with one another to provide better efficiency, visibility for support, and an integrated experience with our existing digital products.



Problem





Our current technology stack was too unstable and slow to support the needed new technology. Our developers needed to take time to rebuild certain parts of the app in order to begin work on new additions.



Opportunity





With the new stack being developed, the opportunity to redesign our main navigation was presented with key areas identified for improvement:

  • Increase ease of use of our navigation on desktop and mobile.
  • Improve findability of key sections of our app such as the “Health Resource Center” where members can find key partners that provide discounts on healthcare services. Saving the members and the ministry money as medical needs occur.
  • Realign the navigation styles to be more in-line with SMI’s brand guidelines and overall more pleasant to interact with.


Original Dashboard Desktop & Mobile View



Team Structure





Working with one other Product Designer as the primary designers, we worked with a UX Researcher to plan and coordinate testing. Other designers came in as needed for design critique sessions. A team of 5-6 developers worked with us to implement the designs and roll it out to members.



Process





Our team determined that the risk of changing some of the colors, illustrations, and locations of some of the navigation links was low and testing the design later in the process was an acceptable direction.


With this, our team began iterating ideas asynchronously, aiming to find ways to organize the sidebar that allows maximum ease in navigating between internal apps and moves away from the complicated original design.


The original design included a collapsing sidebar which we ultimately decided to remove to keep the functionality and layout of the new dashboard simple.



Early ideation for navigation redesign.





Our team determined that the risk of changing some of the colors, illustrations, and locations of some of the navigation links was low and testing the design later in the process was an acceptable direction.


With this, our team began iterating ideas asynchronously, aiming to find ways to organize the sidebar that allows maximum ease in navigating between internal apps and moves away from the complicated original design.


The original design included a collapsing sidebar which we ultimately decided to remove to keep the functionality and layout of the new dashboard simple.





While working on the design of the sidebar, I decided to try using a darker purple closer to our set brand purple in order to set apart the sidebar from the rest of the lighter navigation our dashboard featured. Along with this, I offered a variation of our mobile navigation that acted as an overlay over the dashboard when opened, instead of a new screen.



Sidebar and Mobile navigation utilizing our brand purple.





As a team, we agreed that this new direction helped distinguish the sidebar from the rest of the Dashboard and offer enough of a pop of color to break up the otherwise monochromatic color scheme.


From here we refined the navigational elements by removing the “mega-menu” style nav link that house a few other links and brought all options to be visible in the sidebar.


Additionally, we collaborated with our Creative Services department to create a set of unique icons to live alongside the nav links for easier recognition.


By having each navigational option visible on the sidebar, we hypothesized that we would bring more traffic and engagement to sections like the “Health Resources” page that offered discounts on medical services and medicines.



Finalized Sidebar navigation complete with icons, state indicators, and fully visible nav-link options.



Finalized mobile navigation.



Expanded mobile navigation.



Testing & Release





As mentioned above, the team decided that simply having a validation test at the end of the process would be enough to capture any problems with the design and tweak before pushing to be live. 




We planned conducted 5 usability studies with members looking to answer three questions:


  • Did we improve the ease of use in the navigation for desktop AND mobile?
  • Did we increase visibility of key navigation points such as Health Resources?
  • Did we maintain and enhance the brand of SMI through the design?


At the end of this study, we felt we had accomplished all three goals and felt confident in moving forward with full release.


However, with a release as wide encompassing as a new navigation, we first released this new navigation to our Staff only utilizing feature flags with PostHog. As we received feedback and fixed bugs that showed up, we release to our larger membership through a redirect and eventually retired the old Dashboard. Permanently using this new navigation throughout the entire membership.



nicklewisartanddesign@gmail.com