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.

Previous
Previous

Audible