MERITO Foundation
Responsive employee portal design
Role// UX/UI Design
Year// 2024
Background
Within this case study I’ll be going over my process in creating a prototype for an employee portal for a non-profit organization. Starting off, I wanted to pick a specific non-profit to work with. After considering several local groups, I selected the MERITO Foundation to work with.
The MERITO Foundation, or Multicultural Education for Resources Issues Threatening Oceans, focuses on saving our oceans through youth education. They work with a diverse group of different ethnicities, backgrounds, and native languages because the love for the ocean connects them all.
Goals
Design and present an employee portal and revised user homepage for the MERITO Foundation. Both employee portal and new home page will make it easier to track donations, events, and volunteers with differing levels of detail to the information. For the employees, the goal is to increase the ease of use in tracking all of the previously listed information, allowing for smoother running. For guests, the goal is to increase the number of new users and returning users by clearly communicating events and donation goals.
Problem
While they have a website of their own for end user interaction, they would benefit from an employee portal to aid in the tracking of donations, volunteers, and events. Having a similar portal on their homepage would be beneficial as well, as the current home page is hard to follow. In addition the UX/UI that they currently have is good, but a little inconsistent across platforms generally with poor use of information architecture. Both of these issues lead to difficult navigating of the website, they contribute to a lower returning user rate, and lower donation rates.
Impact
For this project I confirmed the need for such a project through research and user testing to create this product as a solo designer.
Research
Next step was to get a good understanding of what people wanted out of an employee portal and what already exists.
Goals
The points that I sought to clarify in my research:
Discover what other companies are using for employee portals
Learn what features do people use most often in their current portal
Figure out what frustrates people with their current user portal
What metrics need to be tracked and easily viewed
Secondary Research
Beyond Intranet
Target market is non-profits looking to hire design company for employee portal
Templates allow for easier and quicker design
Lots of different types of add ons
Can only select from pre-set functions
Doesn’t match with pre-existing style for company
Gatekeeper
“We are passionate about delivering innovative retail solutions and exceptional service that empower our customers to protect people and enhance profits.”
Basic templates that are easy to set up and start using
Employee portal works with other gatekeeper portals easily
Not optimized for non profits
Not visually interesting
REI
Their corse mission is to “… inspire, educate and outfit for a lifetime of outdoor adventure and stewardship.”
Fits the aesthetic of the rest of the employee site
View all sales and donation metrics in one place
Difficult to scroll through, too much at once
No event calendar
Findings
In addition to looking at the employee portal of my own employer, I looked at some major companies that provide customizable templates and programs for employee portals. I found that they all seemed quite similar in terms of their offerings, and I was eager for my interviews next to see what people actually used and how they felt about it.
Primary Research
To start I conducted five interviews over video calls with people from my target audience:
Ages 20-35
Has used an employee portal or worked with a non-profit
Methods
The methods that I would use to answer these questions:
Secondary research through analysis of competitive and pre-existing businesses in the same market
Primary research by way of in depths interviews and surveys across a larger audience
From these, I found the following series of reoccurring issues:
Too much information on the homepage
Would be nice if mobile versions were more easily accessible
Many reported that it was fun to swipe for their friends or that they’d let their friends swipe for them
Synopsis
Based on my interviews, it seems that most companies utilize a pre-built employee portal and pair it with another app like teams for all of their information. While REI does have a custom built portal, that appears to be more of the exception than the norm.
One of the main complaints that kept popping up was presentation of information. With consistency home pages seem to be overcrowded with information that is irrelevant to most employees. This is definitely something I’ll need to keep in mind as I move into my next phases.
Define
The first step within the define process was to take all of my findings and boil them down into a ‘Point of View’ statement to guide my work moving forward.
POV Statement
I’d like to discover ways to help employees at the MERITO foundation store, discover, and display relevant company information in a branded portal.
Next I needed to define my user a little bit better so that during my design process I had someone I could look at and ask myself, “Would this person use my product?“
User Personas
After compiling all of the information that I had gathered from my research, interviews, and survey I created two user personas to reference during my ideation to stay on track.
User Flow
High Value
Low Value
Next on the docket was user flows, the task of mapping out all of the possibilities for different tasks a user might person on the website from start to finish.
User Flow: Checking volunteer release forms
Meet Robbie, the busy group leader.
Robbie is a group lead at the non profit he works for in Ventura, CA.
He’s got a lot of different of different responsibilities to keep track of and wants an employee portal that helps him track it all.
He would love easy access so important files and an uncluttered home page.
Meet Mary, the eager employee.
Mary is a young adult working as a volunteer manager at a non profit.
She needs her company’s employee portal to be easy to access on mobile since she often at project sites with volunteers.
She would love a way to check in on lists of volunteers to make sure they’ve got all their forms filled out and turned in.
Now that I knew who I was designing for and what general problem I was trying to solve, it was time to think of some solutions.
Brainstorming
Since I already knew what sort of product I was making, the majority of brainstorming went into thinking about features and layout. For this I relied heavily on my research, seeing what features were talked about in my interviews and what other companies were doing.
Ideate
Now that know who I’m making this for and what it will be, it’s time to get into the details! What will this website consist of? What tasks will be performed?
Feature Set
With my research done and a better idea of what sort of employee portal people wanted to see, it was time to start laying out what features I wanted. Once I’d done that, I organized them by level of importance to see what I’d need to focus on.
Low Effort
Donation tracking
Volunteer tracking
Employee newsletter
Employee self service
Responsive design
Shared file library
Shared events calendar
Modular design
Private messaging
High Effort
Design
Now that I’d narrowed down what features I wanted the app to include, it was time for the first phase of deisgns.
Sketches
Keeping my research in mind, I began a series of quick rough sketches of what I wanted the employee portal to look like. During this process, I often referenced my research, pulling from existing programs and the feedback I’d received from my interviews.
I find it helpful keeping my sketched quick and loose, keeping my thoughts flowing so that I can get as many ideas down on paper as I can.
After reviewing my sketches with some of the people I interviewed and getting feedback, I moved onto creating digital versions.
Hi-Fi Prototype
After gathering details on the UI that MERITO was already using, I began work on my HI-fi designs based on my sketches and feedback. I prefer starting with the desktop version if I know a design will need to be responsive, I find it easier to visualize personally, so I started with the desktop version first. Once that was complete, I moved on to my mobile version as well, creating prototypes for both versions as I worked.
Test
With my prototypes and designs complete, it was time for a round of user testing to make sure my designs all made sense with my assigned flow.
User Testing
For my user testing I gathered together five different users to test my main flow that I’d structured my prototype for, checking to see if volunteers have turned in release forms. It was important to me to have a working prototype for this phase rather than just my high fidelity screens, as I find details can be easily missed when simple scrolling screen by screen.
Methodology
In person moderated usability testing
Remote moderated usability testing
Tasks
Checking to see if volunteers have turned in release forms
Success Metrics
Task Success
Task Completion
Time
User Confidence
Error Rate
Task Difficulty
Feedback
Overall all of my participants seemed to find the task easy to complete and enjoyed the simplicity of the site formatting. The minimal options and clean design helped translate the components effectively between the mobile vs stationary formatting.
There was one major shared complaint aside from some programming bugs, and that was the lack of clarity in button options when dealing with the volunteers. It was not clear what exactly each button does and why they’re placed where they are. There are a few more things that need editing, such as the calendar formatting, the mobile menu, and some of the prototype programming.
With this feedback I made edits to my designs so that my prototypes were working more fluidly and made more sense
Iteration
With all of the feedback I’d received in my testing, it was time for edits to be made.
Editing
The first major problem was relatively straightforward: In my time crunch, I’d completely forgotten to add in a menu bar for my mobile site. After adding that in some quick fixes with broken buttons to get my prototypes working like they should, I began to think about how I was going to address the rest of my feedback.
The next fix was a more tedious one, but still relatively straightforward: adding hover states to my buttons. In my initial design I’d tried labeling my smaller icon buttons, but I felt it looked cluttered and abandoned the text. But, with feedback from testers saying it was confusing, I needed a solution. And that solution was hover state text.
On a similar note, my calendar needed some updating. I’d initially forgotten to mark the calendar with important event dates, so I updated that and added hover states for them as well.
Conclusion
Creating an employee portal from the ground up was tricky to do, especially when all the MERITO foundation provided me with was a loose color scheme and some fonts. Exploring their website, their formatting and styling was fairly inconsistent, so there wasn’t a lot of structure to be followed.
This was great practice for me working within loose design constraints. MERITO was not consistent in their design on their website, so I was able to pick and choose colors and fonts as needed. While a little more structure would have been nice, it was good practice to have this little more freedom.