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 9, 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
DEFINE
IDEATE
DESIGN
PROTOTYPE
LAUNCH
• Interviews
• Existing Site Audit
• Business Goals
• User Flow
• Wireframe
• UI Library
• Final Design
• Lessons Learned
RESEARCH
Interviews
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.
Existing Site 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
User Flow
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.
DESIGN
Wire Frame
PROTOTYPE
UI Library
LAUNCH
Final Design
We then tested the final stylings and continue to further tweak and enhance any remaining UX issues going forward.
LESSONS LEARNED
Final lessons learned from the User Management conversion were many, but the following points were most popular:
• The initial kickoff proved very beneficial to the success of the project
• 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
• Tables design CAN be visually pleasing and informative