The IMF Intranet and UX Design Under Heavy Contraints
Making room for UX when there isn’t any
Client: The International Monetary Fund
Time Allotted: 2 Weeks
Tools: Figma, Adobe Illustrator, Adobe Photoshop, InVision
Final Design InVision File Link: IMF CMU Intranet Site Final Designs Invision Link
Figma Link: IMF CMU Intranet Site Figma Link
I was fortunate enough to be offered the opportunity to work alongside 2 other UX designers to complete a project for The International Monetary Fund (IMF). While previously I had been asked to evaluate their 2019 annual report, this time I was provided the unique opportunity to do some user experience and visual design work on an internal intranet site for IMF employees, the specific site was that of the Change Management Unit (CMU) within the IMF.
The Problem:
The current version of the site is unfinished and lacks a massive amount of information and essential features. The page is difficult to look at, navigate and even harder to digest.
The Goal:
Redesign the CM intranet site to provide employees with the information they need in an enjoyable and memorable experience.
Constraints:
Before getting into the research and design process, one of the largest themes of this project was that of working within extremely tight constraights. For one, the IMF’s intranet is built on a 2010 version of sharepoint. They currently only support the Arial font family and design components are extremely limited to a few pre-built templates. Additionally, we were not given access to the current version of the site (IMF policy) and also did not have access to speak with any other employees of the IMF outside of our singular point of contact for the project. We were limited in page content, as most of the content had not been created yet. Lastly, the timeline was extremely cramped as we only had 8 business days from our initial client meeting to the due date of the final prototype (which had to be submitted in the form of photoshop PSD files. Essentially, this was an opportunity to practice UX within extremely tight constraints.
Research Goals:
Understand behavior and gaps in understanding of employees experiencing change who might turn to their organization’s Change Management division.
Gain insight into how we might optimize the experience to:
Provide for easy navigation
Educate users on CM policies
Advocate the use of CMU resources
Research Plan:
Conduct research without access to actual end-users within accelerated timeline. Allow for minimum investment of time and resources with maximum yield of useful insight into needs and behavior.
Methods:
Secondary Research
Short-Form Interviews
Secondary Research:
Goals:
Best practices and guidelines for implementation of change management policies practices.
Articles from legitimate sources regarding requirements of successful change.
Case studies & articles discussing common pitfalls of poorly managed change initiatives.
Sources:
https://www.prosci.com/resources/articles/change-management-best-practices
https://hr.berkeley.edu/sites/default/files/change_management_toolkit.pdf
https://hbr.org/2018/10/dont-just-tell-employees-organizational-changes-are-coming-explain-why
What we learned:
Change Management is about changing people’s behavior.
People are the most important factor when implementing change.
Buy-in is crucial, so employees need to understand the reasoning and justification for the changes in order to truly get behind them.
There needs to be a clear vision and goals for the company’s needs when implementing change
Open communication between employees and those dictating internal changes is integral to success
Can also help to cultivate a culture of being proactive towards adapting to change.
The most effective way to communicate to employees during a process of change is to explain the impact it will have on them personally, rather than big-picture effects.
User Research:
Goals:
What are general perceptions of change management?
How does it affect them and how could it help them?
What needs and preferences do employees have for how their organizations handle change management that could be universal across industries?
Participants:
13 participants total: ages 24 to 57, 5 women and 8 men
All with corporate experience of change management
Experience across a range of industries:
Finance, Broadcast Tech, Telecoms, Medical Research, Hospitality, Banking, Healthcare, Federal Consulting, Retail Management, Private Equity, Hospitality, Home Security
After completing our user research, our group then went through the process of affinity mapping the results to group ideas and generate insights:
What users said:
Change Management Needs:
Main key to success is stakeholder buy-in
Empathy on the part of leadership
Open channels for feedback
Organizational support system throughout change cycle
Employees Need:
Access to an actual person
Personalized content
Upfront information on the effect to them personally.
Frequent communication on points relevant to them
Clear communication on logistics and severity of impact
Regarding Technology/Intranet:
Can’t replace person-to-person interaction
Major Needs:
Brevity | Efficiency | Specifics | Relevance | Support
Key Findings of Research:
The Design Process
After completing our initial research, our team launched into the design process of the project. This process included multiple iterations of design prototypes, the use of tools and techniques such as sketches, whiteboarding, usability tests, digital prototypes, Figma, Invision and ultimately photoshop (per request of the client).
In order to determine how to best organize and present our content, our team first went and completed a whiteboarding session, allowing each of us to quickly share and critique our ideas.
After each of us presented our whiteboard sketches to each other, our group was able to discuss which specific features/design aspects did and did not work
Doing so allowed us to develop important insights about the organization of the content within the site, allowing us to create low-fidelity sketches
Eventually, this led to the creation of medium fidelity digital prototypes, which then served as the core design that we built our final site prototypes around
Whiteboarding
Whiteboarding Session Results
Sketching
Digital Prototype #1
After creating our sketches, our team then went into building out a digital prototype of the site using the design tool Figma. The first iteration of the site can bee seen in the screenshot below. Although many changes were made before the final version was completed, this served as the main base for our iterations of design. It is important to also note that we were working within heavy constraints of the IMF Intranet. For one, the IT team instrcuted us that no changes could be made to the header and all major elements of design on the site had to already exist within the IMF library. Additionally, Arial was the only font availible to us and we were told that a sidebox had to be included on the right side of the site. Lastly, we had to focus on building a site that could feasibly be built by the IT team extremely quickly, as the IMF had a very tight timeline for the site to be built.
Feedback, Testing & Iteration
After meeting with the client and reviewing the current state of the design, we received some valuable feedback about the client’s preferences that was then factored into our prototypes:
More obvious connection between specific content and the header above it
About us page should have a more formal explanation at the very top
Landing page header should be removed and revisions made to better focus on the imagery of the page rather than the text
The phone number on the side bar should be replaced with address for the CMU HQ
Create a Resources and Tools Page
Our Process Graphic Moved from the about us page to this page
To see how well our first prototype would work as a Change Management site, we also conducted some usability tests:
Tested a total of 6 people
Targeted general users since we felt a person didn’t have to be from the IMF to understand how navigable and visually appealing the site was
Wanted to see if users were able to recognize major features and knew what each page was about just by taking a quick look at it
Testing Results:
After receiving feedback from our usability tests, we ranked people's responses from highest priority to lowest.
Since we were pressed for time, this was a way to help us organize and focus on the most important issues people had with the prototype.
A lot of our redesign had to do with making the pages look more high fidelity and rearranging content.
Made sure to be consistent with our page designs as well (including an image banner with blurb of text at the top of each page).
Significant Changes:
After gather feedback from our client and conducting usability tests, our group then went through the process of revising and improving our design. Some of these changes can be seen in the screenshots below:
Note: For higher quality versions of each page, please check out this link: IMF CMU Intranet Site Final Designs Invision Link
Final Designs:
After making the changes above, our group finished polishing our prototypes in Figma. From there, our group then went through the process of rebuilding the site design in Adobe Photoshop in order to fufill the request of the IMF’s IT team. These final prototypes can be seen in the screenshot below, for a higher fidelity version that simulates how they would actually be viewed, please click the link below the screenshot.
Next Steps:
Suggestions for the Future:
There were a number of things that came up in our research that we recognized as being unrealistic for the time frame, going forward we think that these things could lead to a much improved experience for users.
Change Management Unit Localized Search Feature
Addition of a search bar that is specific to the CMU intranet page
Allows users to search for things like news, events, resources, tools and people instead of clicking from page to page
Expanded Contact Form
Built into the actual prototype, we believe a reformed “contact us” page could lead to improved feedback and a more involved experience for users wanting to interact with the CMU team
Features to expand the personalized feel of the site
Allowing users to create an account on the CMU page to give them true ownership of their feedback and control over what they see
Tagging events and stories to allow users to quickly find what is specifically relevant to them
Reformed and Modernized Design Style
Moving away from the Arial font choice to IMF Style Guide Fonts
Updating page elements to give them a more modern and minimalist look
Revising the look and utility of the calendar to allow users a more interactive and personalized experience, add things like highlighted events
Pinning the sidebar to stay locked on the page while the user scrolls