UX Journeys: Cohesive External/Internal Experiences

Designing for a cohesive experience across logged-in and logged-out interfaces whether desktop or mobile

Of the many challenges found within design environments, brokering common elements and components between internal and external systems can create tensions which are often hard to reconcile. When a development team leans on a component framework, they are seeking to minimize this friction so that business stakeholders and users/clients rely less on what they feel, and more on what makes functional sense. Functional sense is a good thing — but without the leading input of users and stakeholers, consistency is lost. In this UX Journey, we look at a snippet of a project where creating external (public-facing) and internal (logged in, administrative) interfaces from scratch gave us an opportunity to align all parts of the design to branding and intended behaviors.

Sketching the Flow

“We don’t want a person who feels our product is valuable to get lost when jump into it.”

In the graphic attached to this article, we explored the idea of UI consistency through the development of specific screens for a product having multiple audience contexts (external and logged-in). We started with two expectations:

• Users/Clients will interact with this product from their mobile device primarly
• Functionality should not be minimized due to ignorance of user’s context

Which such a framing in place, we jumped into “what are the necessary things needed at this point?” That is: what is needed when there’s a new/returning user/client to the external site, and what is needed to be seen/addressed after a user/client has logged in (from mobile or PC)? The assumption here was that the entry point could be instigated through email or notification and therefore the screens presented needed to further the call-to-action that started the journey.

High priority items identified by the stakeholder included:

• ability to login to the servce
• download of assocated application
• pricing and other benefit information
• analytics collected
• important items given prominent positioning

Designing for consistency then required that we identified specific areas within the layout and through the process-flow. Login/Logout needed to be in an ideal (read: expected) place. Download was given as high a priority as the most important items on the logged-in dashboard, and so these were granted prime position following a page’s primary graphic. Information such as pricing and analytics were described as being information-rich, so these needed to not just be seen logically arranged to the rest of the content, but also point to pages where their depth addressed their value (while not being so far from the main/home screen).

Addressing mobile-first principles, we looked at a bottom-based navigation bar which would contain similar items to a main nav (external view) and point to more complex actions (logged-in view). While looking at these users/stakeholders alike will remark that all of this makes sense. But, the dissonance arises when “can we do…” begins to enter the conversation. We can do everything; but everything isn’t profitable towards usage, acquisition, or retention goals. So here, we put too many items on the navigation bar, and then pull away all items until only what is essential remains. The PC/tablet navigation then follows this pattern, and scales upward, allowing for consistency of experience and outcomes.

A significant challenge here is the “why don’t we do it like…” questions which will arise. These questions are harder to answer when both users and stakeholders aren’t listening to one another at the same time (again, a designer can do this exercise by themselves, but it is better vetting a process through as many audiences as possible). The designer’s role here is to maximize the cogniative functionality both groups have already learned, Facilitate what is an isn’t understood at each gate, and then reach backwards to the decisions which were made and enforce them forward. Design systems are usually developed with or through these conversations, simplifying building blocks and outcomes for developers.

Once we determined the priority of content, the blocks in which the content elements/components will appear, we can make the decision of either using an exiting framework or library, or creating our own, in order to move from design into prototyping and development.

Strive to Notice Consistency

Consistency does not have a feeling. It floats into this subconscious, nearly invisible space that we only recognize when something feels “off” or “unbalanced.” Designing a cohesive system doesn’t expose a lack of consistency until users and stakeholders are able to get out of their imaginations and begin to see the literal (and sometimes logical) steps. So, we spend a little more time than maybe others in sketches towards major points of interaction, asking questions such as “what should a person feel after they’ve been on this page” or, “what’s the next logical step after doing this action.” In this way, we are framing consistency both by expectation and by functionality.

Such sketching can be done by the designer alone — and then presented to the users/stakeholders — but these tend to take on a different personality when done in front of the client. Being able to piece together the user/client journey enables clarity to come forward in regards to expectations and outcomes. There will always be the challenge of handling all of the expections, but live sketching before diving into wireframes or prototypes enables all involved to see the challenges of meetings one group’s preferences at the cost of others’.

Have you noticed a lack of attention to consistency from your business or technical stakeholders? Or, has consistency slowly been de-emphasized in order to chase features, engagement, or other metrics which have led to other support streams being matured? Mindboard is able to assist in mapping and guiding. product management. so that consistency is increased and friction is minimized. Get in touch with us to learn more about how we can help your efforts.