ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
Operative User Management Redesign
Role: Creative Direction, UX, UI
Axure, Balsamiq, Illustrator, Photoshop, Sketch
I was brought in on this project to help update the Operative B2B system by updating all live pages to
current design specs, finesse UX protocols where needed, and then eventually to establish a common component style guide library across the site.
Design Challenges
There were a few challenges with this effort; first, updating all pages and components to a more clean and current look and feel. We were also tasked with a gradual roll out of versioning. Then, we needed to bring all elements current with a common UI library, and establish a refined UI library and interaction and eventual final launch. We were also given an aggressive timeline, as NBC was requesting all upgrades due in a relatively quick timeline. Lastly, we had to be sensitive of geographic team locations; the design team consisted of 5 members spread across various timezones and environments, including Israel, Texas and New York. The Development team were located primarily in India, and the PM teams were located not only in the US, but in Europe and India as well.
Process
The Design team started a kickoff with representatives from other teams to focus on what we wanted to accomplish with the new designs and layout. We conducted a whiteboard session with next steps and established a process flow with how we wanted to launch and dates for each. In consideration of deadlines, we decided to work in 2 week sprints, and utilized a Jira board to keep track of the teams project initiation and progression throughout the process.
Research
We started by conducting user interviews to get a better idea of the current user journey,
pointing out any pain-points and discrepancies to make all internal team expectations were still accurate.
Audit
Initial stages were to establish a v01 graphic standards library, as well as an Axure library of components.
We also had to establish these decisions based on the Development environment, in this case PrimeNG
and Angular environments. We decided to set up a funnel nomenclature on components, consisting of a Bootstrap foundation, then a PrimeNG component with a third Custom Component solution.
My Atlanta team consisted primarily of a CTO,a Senior Software Engineer, a COO, and myself,
working in tandem with the various other teams across the world.
User Management pages before being converted to V01 standards.
Define Business Goals
In addition to conducting stakeholder interviews, we decided to deploy a double-diamond methodology
to make all internal team expectations were still accurate.
Ideate
We then evaluated the immediate user flow of the User Management system and then streamlined the experience better facilitate a definite task and execution process. We deleted any extraneous steps,
and tried to consolidate new steps for a shorter process.
Wire Frame
Based on user studies and AB testing, as well as requirements from the project manager,
we were then able to mock up a basic wireframe of the experience. This allowed us to design
and iterate quickly while staying in line with our sprint svhedule.
UI Library
We then were able to address the current UI library, and redesign components where needed and re-address requested enhancements to to font legibility and colors.
Final Design
We then tested the final stylings and continued to further tweak and enhance any remaining UX issues going forward. We were able to re-test and found the new enhancements improved our customer retention and use over 23%,
based on analytics numbers. We were also able to sign additional clients the following quarter.
Lessons Learned
Final lessons learned from the User Management conversion were many, but the following points were most popular:
• The initial audit proved very beneficial to the success of the project
• Through new relations and cross-functional team exercises, teams learned to be flexible, especially when implementing Development teams Angular framework
• If at all possible, try to consolidate actions relevant to each page and eliminate extraneous steps
• Improvements to the current UI were paramount in the success of this round of iterations.