Ux/UI Design

A sample of two recent design projects

Project #1:
Resource CEnter

The Resource Center is the culmination of a multi-year initiative to increase prospect engagement with educational content and resources housed within the company's public-facing website. As the lead UX Designer on the product team undertaking this work, I was responsible for overseeing day-to-day UX tasks from concept to delivery. This project had inputs from a large, cross functional team including representation from UX, research, engineering, content, and senior leadership.

Resource Center

Background

Problem statement
"We are currently unable to surface contextually relevant content to users within our educational resource libraries. As a result, users are not engaging with deeper content to the extent that we would like as shown by short 'time-on-site' sessions and low number of pages per visit."
‍
Hypothesis
"If we can collect basic information from our users, we will be able to create an experience that provides contextually relevant content in a semi-personalized way, which alludes to the benefits of the company's financial advisor service offerings. Through this, we will help users overcome overwhelm when searching for resources and nudge them towards a favorable view of the organization."

Preliminary research: concept and way-finding validation
As an initial step, we engaged with an external consultancy to help conduct a multi-phase research study to develop prospective client personas as well as test a conceptual/directional prototype of this experience via moderated usability sessions. The output from these studies showed that prospective clients were willing to share basic information about themselves (life stage, investment risk tolerance, financial priorities, etc) as long as it resulted in more personalized, contextually relevant content and resources.

After validating the initial concept and getting buy-in from senior leaders, we enlisted our internal research team to conduct a tree test to determine where within the existing navigation structure users would expect a tool/functionality like this to live. The outputs from this study gave us the last elements we needed to move on to developing user flows and UI concepts, conducting feasibility checks with engineers, and gathering feedback from stakeholders and leaders.
Resource Center

Design

Early design work and feedback mechanisms
The general approach to design was to model the "collecting of basic information from users" after familiar content filtering patterns, for example, as found in many e-commerce experiences. This way, we could piggyback on the common, existing mental models for content filtering and avoid any additional cognitive load when guiding users to more personalized, relevant resources.

In addition to focused design time, I helped to lead regular ideation and review sessions that included myself, my team's junior designer, and when appropriate, leads from our content and engineering teams. These early design sessions generally consisted of concept ideation/discussion, wire framing exercises (design focused), feasibility discussions (engineering focus), and gathering specific feedback on core user flows and information architecture (content design focused).

In addition to these focused, small group working sessions, the broader product team and relevant UX leaders held bi-weekly discovery and review sessions with a group of key stakeholders and decision makers. This allowed the team to share and track incremental design progress while providing a platform to gather feedback from leaders in a shared, online whiteboard space. Having a record of feedback from week-to-week also allowed the design team to clearly show where and how feedback from previous sessions was incorporated into new iterations.

Final testing and MVP release
Once the bulk of design was completed, we ran a high-fidelity prototype through a final round of testing. Due to time constraints, rather than doing a moderated user study, we enlisted our research team to conduct a usability evaluation using the 10 Nielsen heuristics to identify any gaps that existed in our proposed UI. After correcting some minor design gaps within the "content clarity" and "visibility of system status" heuristics, we prepped handoff documentation and passed the reins to our engineering team for developement and deployment.

Although the goal was to incorporate our entire wishlist of features into our initial release, due to the aforementioned time constraints, the decision was made to start with an MVP experience that focused on core content filtering functionality while still considering and making any necessary allowances for more advanced personalization and filtering features in future releases.

Resource Center

outcomes

Final UI and and results
Just one month after launch, we saw a 5.25% increase in prospect time on site and a 7.24% increase in prospect pages per visit. These two metrics told us that the the improvements made to content presentation, filtering, and discovery (even in an MVP form) were driving users to engage with more pieces of content for a longer period of time.

Several months following release, the Resource Center was awarded a Bronze Medal under the Digital Media Apps & Tools Category at the Financial Communication Society's awards.

UI for the promotional entry point into this library. This component could be reused on any pages where it was important/meaningful to drive traffic to more educational resources.
Core UI showing MVP simple content filtering.

PROJECT #2:
MICROSITE BUILD

My product team and I were tasked with building a microsite (a contained website experience embedded within a larger ecosystem) for the Responsible Business and Community Relations department within our organization. These teams had little to no public facing web presence and had a desire to expand and modernize their digital footprint to better represent the important work they do in and outside the company.

During this project, I was lead designer on the team undertaking this work. Known as the "Digital Experience" team, this was a fully-staffed, cross-functional product team that was structured as an embedded/internal agency or "studio," serving other business units from around the company on a project-by-project basis.

Microsite Build

Background

Approach
‍Due to the studio team model, we were able to be flexible and nimble in how we approached this project, focusing on what would best serve the needs of our business partner/client. After initial kick off meetings with the Digital Experience (DX) and client leads, it became clear that the client team needed some extra support in understanding where to begin with a project like this and how to best tell their story.

I pitched the idea of taking a collaborative, design-led approach to working with this client and creating a framework where they could actively participate in each phase of design and learn more about how we build and structure digital experiences in our CMS (content management system), the platform on which we built web apps and pages. My hope was this would give them a more active role in design collaboration and create a greater sense of ownership.
‍
Design strategy and workshop sessions
With all of the above in mind, I organized design into 3 phases: low-fidelity (focus on structure and navigation), mid fidelity (focus on rough content and basic brand application, and high-fidelity (focus on final content, brand, and prototyping). Every 1 - 2 weeks, I lead design workshop/review sessions with the client stakeholders where I would pitch page designs and/or strategy and elicit feedback, questions, and discussion. As needed, I would include content designers, engineers, or brand partners to join in these sessions when applicable topics were being discussed. Each session's feedback and discussion points were tracked from week-to-week to maintain a clear thread between feedback given and action taken. Following several months of design and content iteration and after receiving final senior leader sign off on design, I prepped and handed off design documentation to our engineering team for implementation and release.

Sample from an early Phase 1 session where I presented low-fi page structure, mapped CMS component usage, and provided space for targeted feedback and discussion notes during or asynchronously after the session.
Microsite Build

outcomes

Final UI and and results
After a year-long engagement, we released the final 10-page microsite that provided a deeper, more rich narrative for how and why the client team focuses on responsible business practices as well as the impact of their philanthropic and community involvement initiatives.

Although the client did not have any target KPIs in terms of site performance, this project was a huge win for the Digital Experience team in terms of how delighted the client was with collaborative and inclusive way this project was run. The success of this design-led, client engagement strategy led to its wider adoption by other UX designers and teams throughout the UX organization.

Samples of the final UI

IAN LEW

UX design

Web design
Graphic designBrand design‍
Other work:Fine art
‍

ianlew11@gmail.com