ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal 2.0 Redesign
Role: Creative Direction, Design, UX, UI
Adobe XD, Balsamiq, Illustrator, Photoshop
Scope and Research
I was initially brought onboard to help overhaul the existing ReloPortal SaaS site visually, as well as help improve overall page use and visitation efforts. The internal stakeholders requested a more visually pleasing experience, as well as a better page-flow and task implementation that would promote a more solid foundation for implementing future build-on features. The new team, consisted of a Project Manager, 3 Developers and a data analyst, and we were given a year to implement changes. Budgetary constraints had to be considered, as well as a CSS framework overhaul, all while working within a completely brand new team. From that point, we developed an initial blueprint of how to best tackle implant our new strategy. We agreed on 2-3 week Agile sprints, and solidified a prioritization list of projects and tasks we needed to address first.
ReloPortal strategy blueprint
I first conducted interviews with the internal consultants and stakeholders to find out what and where the successes and strengths of the site were, where pain-points on the site were located, as well as overall user experience feedback. I conducted internal expert reviews and usability testing techniques, and then conducted a competitor research analysis by evaluating the top 10 service websites in the relocation industry noting common functionalities, tools and services, and valued and offered by each. I started to get an idea of what common industry standards were, as well as what was considered innovative and cutting edge, unique to the industry. I then constructed a user persona to better identify who our typical core user looked like.
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 by either offering service options or vendors.
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.
Design Process
EMPATHISE
• Define Audience
• Interviews (Internal and external)
DEFINE
• Competitive Analysis
IDEATE
• Journey Map
• Audit of existing site
• Preliminary sketches
PROTOTYPE
• Wireframe
• UI Library
• CSS Library
• High Fidelity Mock
REFINE
• Enhance
• SEO
• Lessons Learned
EMPATHISE
The task of relocating an employees family for a job can be a grueling affair no matter the distance. An array of considerations have to be taken into affect, be it housing, rental truck, moving company, etc. Plus keeping up with an allotted budget can add to the task for both the employee and employer, as well as the Account Manager. I also identified that the main facilitator of the ReloPortal tool on the employer side would fall on the HR representative, usually female, working and updating from desktop platform. Majority of interaction from the employee would come from a mobile interaction.
I then highlighted some of the more prominent UX issues noted by both internal and external users to identify page-flow inconsistencies and task disconnects they may have experienced. The current ReloPortal site was exhibiting a multitude of problems; most prevalent were that the users were having a hard time saving, updating, and sharing information for later use; there was no clear mechanism for uploading documentation and receipts; page flow-was confusing, and there was too much wasted real estate. I also wanted to eliminate the current bread-crumbing as it was confusing and distracted from main and sub-navigation menus. I also wanted to implement better page transitions, and implement comprehensive sub-navigation options such as "back" and "dashboard."
Define Audience
The process would benefit from a tool that would help on all 3 fronts manage relocation budgets and resources offered. The tool would be implemented and updated real time with the following benefits for each party:
Employee Employer Account Manager
Keep track of move budget Keep track of move budget Keep track of move budget
Consult additional available relocation resources Communication with employee Communication with employee and employer Upload and keep track of receipts.
Interviews
I then set up interviews, initially with the internal Account Managers (Move Specialists) to get feedback on the existing site and any pain-points that existed with navigating the site. I then collected survey information submitted by past clients and learned the survey sheet itself needed reformatting, as there was less than a 4% return rate. I reduced the 50+ questionnaire down to the most important 20 questions.
DEFINE
Competitive Analysis
I then conducted a competitive analysis review of the top 10 competitors in the local market and learned that the relocation market, while surprisingly competitive, offered no similar online resource or tool to help aid in the relocation process. All requests were made strictly through initiating the respective Employer.
IDEATE
Journey Map
I then conducted a competitive analysis review of the top 10 competitors in the local market and learned that the relocation market, while surprisingly competitive, offered no similar online resource or tool to help aid in the relocation process. All requests were made strictly through initiating the respective Employer.
Audit of Existing Site
Its is also at this phase where I began conducting a website audit in order to identify address the visual pain points regarding the tool and pinpoint which elements on each of the pages were confusing and proving frustrating to the user. I identified where I thought the problem elements on each page were, then mocked and tested alternate low-fidelity mock-ups with internal consultants and team members.
ReloPortal Temp Living page with suggested UI edits
ReloPortal services page with suggested UI edits
Preliminary Sketches
I began to plot out preliminary sketches and designs of page elements and flows. I also wanted to establish one clear task for each page; provide clean user-flow throughout pages, top to bottom; provide a "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.
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.
ReloPortal Process pages workflow/reworked UX suggestions
Page title, H1 and H2 header icon and graphic conception.
ReloPortal Process pages workflow/reworked UX suggestions
PROTOTYPE
Wireframe
I began to make preliminary wireframe designs and elements based on the feedback given from both internal and external clients.
PROTOTYPE
UI Library
I wanted to update all fonts to cleaner and current Google font selections; implement a new set of icons and revisit the current color palette to further expand the Hex code color library for better visual appeal. I also wanted to establish a hierarchy of primary, secondary, and tertiary CTA button colors and stylings, and designate but 1 primary button per page. I wanted to convert the primary CTA color from green to blue for better visual contrast on pages, and strip away non-essential information from tables to decrease size, especially with mobile iterations and page load time. I then wanted to establish a hierarchy of information, use designate a seamless and consistent page content flow from top to bottom across all pages. I then started to test and mock revised page elements and user flows and implemented final UI specs in Adobe XD to highlight page standards and treatments.
PROTOTYPE
CSS Library
I then compiled all UI revisions and changes and formatted a UI CSS standards manual for the WebDev Team to implement site-wide. Final variables, UI guidelines and an icon library were then delivered to the Development team to be implemented 4 weeks from slated launch date.
High Fidelity Mock
High fidelity mocks were then generated and checked for any design and development errors.
REFINE
Enhance
Shortly after launch, we still conducted design audits, as well as any bug or broken-link issues.
SEO
We started measuring page Google Analytic's metrics to verify that were were starting to hit our initial goals. In the end, our ReloPortal tool utilization improved 46%, and saw page duration increase as well. Steady usage was also noticed on both desktop and mobile devices.
Lessons Learned
Throughout the process, I worked very closely with the development team. It was important to understand capabilities and platform from a Development perspective, and design elements accordingly. Understanding the transition from Bootstrap 3 to 4 was instrumental, and the newer version was more robust that the previous. It was also important to set up a CSS library throughout the process as well, as timing was a factor.