User Experience Design Case Studies
Project Summary
MEBO (a portmanteau of Message Board) was an enterprise web application with the purpose of creating a dedicated space for engaged associates and internal stakeholders to post short-form in-the-moment content and communications on various projects, initiatives, or critical issues as they happened and when they were most relevant.
The MEBO platform would allow associates to create an atmosphere of awareness and transparency, making important information available to cross-functional organizations within the company and allowing other teams to stay abreast of internal operations, creating opportunities for collaboration and alignment instead of crossfire.
Role
- User Experience
- Visual Design
- Prototyping
- User Research
- User Testing
- Information Architecture
- Front-end Engineering
- Full-stack Development
- Project Management
The Challenge
Determine a product or process to increase the cross-functional capacity for mass-communication and messaging across teams, eliminating the gaps in communication that often lead to problems.
Cross-functional teams and business units had the tendency to operate within segregated "silos" and execute on projects or programs in isolation without communicating or collaborating with other teams. This often resulted in conflicts, delays, or duplicated efforts if their work overlapped with work being performed by other teams, wasting valuable time and effort due to a lack of communication and transparency.
One of the core challenges in implementing the solution would lie in encouraging associate engagement and creating a user experience that would lead to user adoption and onboarding, building toward a two-way rapport of cross-functional mass-communication.
The Solution
The MEBO Digital Message Board was created as a new channel of mass-communication allowing associates to post, discover, and be notified of on-going internal initiatives in order to engage, align, and collaborate with other teams within the company.
Initial development: February 2014 - August 2014 (Beta Launch)
Ongoing maintenance and enhancement: August 2014 - March 2021
Phase 1
Requirements Gathering, Analogous Research
User Research, Interviews, Personas
Information Architecture, Data Modeling
Phase 2
Low Fidelity Prototyping
Branding and Style Guide
High Fidelity Prototyping, User Feedback
Phase 3
Alpha Development and Front-end Engineering
Iterative Sprint Cycles
Internal QA and Usability Testing
Phase 4
QA and User Acceptance Testing
Beta User Feedback
Bug fixes and pre-launch optimization
Definition
Through Discovery and analagous research I searched for a tool or process that could remedy the prevalent lack of cross-team communication and came to determine that the best solution would be an internal news-sharing platform which would serve as a proactive channel of communication for associates to share relevant content.
An early version of MEBO existed prior to my reimagining as a SharePoint page utilizing a list library as a makeshift news blog, which did not provide a very accessible or feature-rich user experience to the associates using the solution. The lack of features and vocal associate dissatisfaction with the tool inspired me to innovate it into a much more functional application to meet user needs.
- Interviewed key stakeholders to gather requirements and learn their needs in a communications platform
- Researched business processes and organizational structure to identify communication patterns and operational workflow for each team
- Used insights to perform analagous research on SharePoint and other third party "out of the box" software options
- Determined based on research that a custom in-house solution would be the most ideal option
User Research
During the requirements gathering and user research phase we identified twelve individuals that fell within our provisional personas and user segments.
We had to consider two factors for each persona: their needs as a reader, and their needs as an author. Because of the nature of the application as a news resource, all associates would have access to read content, but additionally select associates would be granted authorship permissions to create content as well. There was expected to be a minimum of one author from every team, therefore both roles were considered for each persona.
Prototyping and Development
I began development on the application with low-fidelity prototypes and mockups of user experience workflows to determine the best structure, architecture, and data models to meet requirements. I iterated on the prototypes based on user feedback before constructing the live application in HTML, CSS, PHP, and Javascript and publishing to an internal virtual LAMP server.
The core features created were
- A homepage to display all recent posts, broken down by category
- A back-end post editor and content management system where authors can create and edit content
- A subscription feature for associates to opt-in to receive email notifications for new posts by category
- An archive section for each category for users to easily view and browse through content chronologically
- A search function so users can easily find content by keyword or other criteria
- An integrated login system connected to Active Directory to allow users to access the application with their company credentials
Once the alpha version was live we began User Acceptance Testing with stakeholders and beta testers, performing additional interviews and iterative development to prepare the application for the beta launch in August of 2014. Following launch I continued performing maintenance and quarterly releases, rolling out various updates, bug fixes, new features, and basic enhancements through an agile lifecycle.
Branding Evolution
MEBO went through four distinct branding phases, the first having been established during the initial prototyping and ideation stage in 2014. The identity didn't have a color scheme or a true logo at this stage, as I used a simple slab-serif letterform as an identifying mark, stylized with a capitalized "M" and "B" to emphasize the portmanteau. The only colors in use on the application were standard system colors in blue, green, and red on top of black and white backgrounds.
In 2015, shortly after launch, the branding was updated to reflect the company brand identity, which had recently been reimagined as the company had gone through a corporate spin-off and changed from Cobalt to CDK Global. Executive leaders had requested that we update MEBO to reflect the new company identity, placing the new company logo prominently on the application and using the primary color palette. I updated the application style guide to reflect those colors and designed a new logo using a sans-serif version of the letterform contained within a solid block of color.
The third major branding shift occurred in 2019. After expanding my team, we performed a significant redesign, implementing new frameworks and tools such as an MVC pattern and Node. We also implemented a new in-house design system we had been working on, which made MEBO more scalable and efficient. The logo and primary color scheme stayed the same, but we used a theming system within the design system to define a new secondary color scheme that was used to color-code the various categories within MEBO.
The branding was altered again in 2020 to reflect the new color palette of the parent identity after yet another corporate spin-off when the digital marketing business was divested from CDK Global and became Sincro. Various styles and components were updated or restructured to match new Sincro product branding standards, and I also refreshed the logo to be more stylish and colorful, taking the opportunity to get creative with the visual design and using an all-caps letterform overlaid with dynamic patterns and textures.
Conclusion
MEBO was a significant project for me as it was one of the first major user experience projects I worked on, and it was very highly received by the associate body which helped to make a name for myself within the company. MEBO was immediately noted to have greatly improved cross-functional engagement and communication with the functionality provided, and was thereafter considered to be an unofficial company portal and go-to resource for company news and project updates. I would go on to create an entire suite of such enterprise web applications, within which MEBO would serve as a flagship product.
© 2023 Content cannot be duplicated or reproduced. All rights reserved. ISSN: 2160-5416