CUSTOMER WEB PORTAL
The client name and other details like mockups and prototypes are sensitive. Please contact me to schedule time to go over them in person.
CHALLENGE
The client, a Fortune 50 software and hardware manufacturer, needed a redesign of their nonprofit portal, which provides discounted or free products and services to nonprofits in need. The current portal was visually uninteresting, riddled with legacy systems that weren’t being maintained and wasn’t easily adaptable to changing business needs. Confusing navigation, too-long processes and an often-unclear value proposition meant a redesign was in order.
TOOLS
Sketch, Marvel, Balsamiq, Photoshop
ROLE(S)
UX Designer, UX Researcher
GOAL
Our team of two needed to understand the needs of this unique customer, identify opportunities for improvement in the current system and then redesign the portal completely, from registration to purchase. The redesign needed to be mobile- and desktop-friendly and be localized for countries all over the world.
PROCESS
Given the length of the project and commitment from our primary stakeholder, we were able to follow a relatively traditional Agile UX project model. We established a twice-weekly cadence of meetings and discussions to ensure everyone was always current and issue in the design were quickly addressed.
RESEARCH
We held a series of in-depth discussions with the client to understand their problems, as they understood them, with the current site. They felt that it was not only showing its age but the underlying systems and scaffolding keeping it together were becoming more difficult to maintain. Because the site relied on interacting with other internal business groups, it was beginning to have an adverse effect on the quality of experience for users.
While our timeline was somewhat generous, we weren’t able to do as much initial user research with actual customers as we would have liked, to truly understand their pain points and opportunities, but we did gather enough customer information to define seven discrete personas that represented the site’s users. Using these personas, we drafted a series of journey maps unique to these customer types. For example, the journey a tech-savvy buyer from a large, multi-national nonprofit organization is much different than the journey of a small shop with a staff of two passionate but not very technologically inclined cause workers.
Next, in order to fully understand the nonprofit space, we researched similar systems from organizations at a comparable level, collecting an arsenal of best practices and processes we could bring to bear in our redesign that would ensure the client’s system was on par with industry standards in this space.
While our timeline was somewhat generous, we weren’t able to do as much initial user research with actual customers as we would have liked, to truly understand their pain points and opportunities, but we did gather enough customer information to define seven discrete personas that represented the site’s users. Using these personas, we drafted a series of journey maps unique to these customer types. For example, the journey a tech-savvy buyer from a large, multi-national nonprofit organization is much different than the journey of a small shop with a staff of two passionate but not very technologically inclined cause workers.
Next, in order to fully understand the nonprofit space, we researched similar systems from organizations at a comparable level, collecting an arsenal of best practices and processes we could bring to bear in our redesign that would ensure the client’s system was on par with industry standards in this space.
DESIGN
We mocked up low-fidelity wireframes of our ideas and engaged with the client , smoothing and honing them until we ready to move to more realistic versions. We created low-interaction functional prototypes to demonstrate how the site would flow, spending enough time to convey the broad ideas at play and not focusing on creating a fully functioning facsimile of the final site.
Then, we began cycles of design, testing and iteration as we moved through the various large, discrete sections of the site. It was here that we were able to engage with real customers to learn where our design worked and where it needed tweaking. Because we tested our designs (using high-fidelity prototypes) with a variety of customer types, we identified, for example, that we needed to find a middle ground in how we explained and demonstrated the products and services available to them. If our design was too simple, we bored the savvy user. Too complex, and we lost the non-savvy user. Finding the right middle ground of complexity was crucial.
Then, we began cycles of design, testing and iteration as we moved through the various large, discrete sections of the site. It was here that we were able to engage with real customers to learn where our design worked and where it needed tweaking. Because we tested our designs (using high-fidelity prototypes) with a variety of customer types, we identified, for example, that we needed to find a middle ground in how we explained and demonstrated the products and services available to them. If our design was too simple, we bored the savvy user. Too complex, and we lost the non-savvy user. Finding the right middle ground of complexity was crucial.
RESULT
After multiple rounds of design, test and iteration, we arrived at the final designs and delivered everything the client’s developers needed to make them a reality. But given the length of the project and the nature of large businesses, the requirements, priorities and business landscape had changed, requiring an update to our design.
In a smaller secondary engagement, I redesigned the redesign, in some cases tweaking certain pages slightly and in others, creating new pages and completely altering previously finalized designs. The personas and journey maps were still applicable and ultimately, I was able to provide the client with a site that addressed all of their business needs as well as those of its customers.