ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
Overview
The initial ReloPortal tool was built to help assist Transferees, Clients, and Internal Consultants with accomplishing various relocation tasks. Transferees could use the tool to choose which kinds of services they preferred to spend their budgets on, such as truck rental, storage, auto shipment, temporary living arrangements, and could upload receipts and documentation. Transferees could also check in and monitor balance and correspondence with their consultant throughout the process. Clients could use the tool to assign and monitor move budgets and services, and our Internal Consultants could use the tool to monitor status and services, help with any further queries.
I served as designer and lead UX/UI on a team that consisted of a Project Manager and a team of 3 developers, and used Adobe XD and the Adobe Creative Suite. I worked on this project from October 2018 until it's initial rollout in August of 2019.
I was responsible for redesigning the UI to make a more streamlined, cleaner experience using updated color pallets and fonts. Interviews with the internal stakeholders revealed a push for an expanded color pallet as well as a use of icons. UX considerations with the Development team revealed challenges not only a transition from Bootstrap 3 to 4, but also with previously initiated Material Design framework.
I was also tasked with identifying pages with cumbersome and disjointed user flows and coming up with better solutions and flows. Consideration also had to be given to an expanded framework of new page capabilities and destinations.
Competitive Analysis
I researched other relocation websites to get a better understanding of the types of tools and processes offered by our competitors in the market.
Problems being solved: I noticed competitors sites were making it more comprehensive and easier for their users to schedule their moves, and plan out their relocation process through online budgeting tools and resources.
Problems being ignored: Some of the tools competitors were offering were a bit cumbersome and hard to navigate. Also, competitors sites stopped short of offering vendors who could aid in the relocation process.
User Research
We conducted research with both internal staff consultants and through transferee user feedback through interviews and submitted questionares.
User Insight (ReloPortal)
After auditing interviews and questionnaires, we came about the following findings:
Problems/Challenges with current UI:
• Bootstrap 3 card format was no longer being supported; new Bootstrap 4
considerations had to be utilized.
• Out of date fonts, colors
• Too many CTA's/no hierarchy
• Table information included too much information, superfluous information.
• There were rogue pages throughout that failed to adhere to a common page layout and look
Proposed UI Solutions:
• Update all fonts to more current and up-to-date, cleaner Google font selections
• Implement icons and revised color palette for better visual appeal
• Eliminate bread-crumbing as it is confusing and distracts from main and
sub-navigation menus; implement better page transitions
• Establish a hierarchy of primary, secondary, and tertiary CTA button stylings; designate only 1 primary button per page.
• Convert primary CTAs from green to blue for better visual contrast on pages
• Strip away non-essential information from tables to decrease size, especially with mobile iterations and page load time
• Establish a hierarchy of information, use variable font colors and sizes
• Primary and secondary tasks were assessed the same amount of importance
Problems/Challenges with current UX:
• ReloPortal tool was cumbersome and clunky; users had a hard time saving, updating,
and saving their information for later.
• Users were tasked with saving/adding expenses in too many instances on pages.
• Too much wasted real estate
Proposed UX Solutions:
• Establish one clear task for each page
• Provide clean user-flow throughout pages, top to bottom
• Provide "Help" option in main navigation to help Transferees should they need
• Consider mobile constraints in layout/design of pages
• Separate out primary and secondary functions; those actions that changed the back
end in any way were given priority status; those that linked out to other pages and
made no significant change to back end were given secondary status.
ReloPortal page with suggested UX/UI edits
User Insight (General)
After auditing interviews and questionnaires, we came about the following findings:
• Internal research tended to be biased towards fellow consultant experiences; our consultants weren't as knowledgeable of their own tools as
previously thought.
• Feedback from submitted questionnaire audit found that the forms were littered with too many questions, resulting in only a 2% return rate.
• Middle-aged women in HR positions were the predominant candidates tasked with set up and monitoring of company transferee accounts.
• Primary interaction came from Desktop views, mainly to set up and monitor accounts; the other from mobile interaction, mainly to stay updated with
moves status, budget, and consultant correspondence.
Wireframes
As part of my ideation process, I identified the most important user flows, and then generated low-fidelity wireframes. I also implemented proposed UI for the pages using icons, text treatments, and graphical elements.
User flow from expense page; 1 designated Primary CTA action, 1 add option per task which goes to option entry page; save page jumps to information with edit option.
Page title, H1 and H2 header icon and graphic conception.
Tools
For this project, I decided to use Photoshop, Illustrator and Adobe XD.
Final Designs
I implemented the most favorable design with participants and found the solitary blue icon, light, was most popular; ratio to H2 and H3 headlines vs. Icons was 20%.
I also added a 2 pixel high green header bar under header text. The introduction of logo green, albeit sparse, seemed to tie all elements in. I also made sure all changes were mobile compliant and were compatible across all browsers.
I then compiled all UI revisions and changes and formatted a UI CSS standards manual for the WebDev Team to implement across the board.
Reformatted Move Preparations page with implemented UX/UI edits
Conclusion and Learning
I learned that a good and effective design should translate across all pages with minimal trouble spots. I also learned that working with WebDev team considerations provided some pain points, but also some easy wins with simple communication and collaboration.
I gleaned that in presenting data in a table format, mobile constraints can prove challenging in a horizontal scroll scenario.
Takeaways
For future jobs, continue to consider designs in a mobile format; for example, long tables can prove challenging in a horizontal scroll scenario.