Homepage Announcements
Admin CMS App
Summary

Designed a solution for admins to create, edit, and manage announcements that appear on the home page.

As the sole UX designer, I researched and designed both the CMS admin interface as well as the new look for the homepage.

Achievements

  • Scalable: Can handle the creation of numerous announcements with the ability to edit and archive.
  • Flexible: Can handle multiple types of content (text, photo, link) and display on any page on the site.
  • Powerful: Gives admins the ability to manage their own announcements without requesting the development team to add manually into the database.

The Problem

My client's platform needed a serious facelift for the homepage. The service team wanted to be able to manage news and promote products for their employees to order, but the current process required the development team to manually do this in the back-end.

This bottleneck cut productivity from the development team and also caused a long wait for the admins to see their requests go through.

This two-sided problem turned into an opportunity to improve the experience for both the administrators and the users, so that admins can promote important news through the homepage, and the users can learn more about the services available to them.

Design Goals

I met with the admins on a daily basis to discuss the requirements for both the homepage and the admin CMS:

  • Admins are tasked with many other responsibilities, so this process must be simple and quick.
  • The new interface should give admins control over content management.
  • The app should have a full record on all announcements created in the platform.
  • The homepage should include important news and information promoting its services and be easy to navigate.

Early Homepage Explorations

My initial concepts stayed above the fold, but had several limitations. They were easy to scan, but felt cluttered because too much content was competing for attention. I decided that flow, engaging users to explore the whole page, was the solution to simplicity.

Final Homepage

The final homepage design was one that was responsive, scannable and flowed well. It featured a carousel to house multiple announcements, and it was visible above-the-fold to help users smoothly transition down the page.

Admin Functionality

Designing the admin CMS capable of handling numerous announcements was the bigger challenge. As I spent time iterating and testing, I worked with the team to determine the CMS constraints:

  • The team decided to restrict stylistic control since the admins' basic need was to just create and edit content. However, the design can allow for templating and layout creation for future phases.
  • There were specified maximum character lengths and photo resolution to for better readability.
  • After implementation, there were a few announcements posted with text wrapping, causing one card to be bigger than the others. In this case, the team decided to match the card lengths to the longest one.

Implementation

The admin app had to be very simple but powerful enough to handle any type of announcement on any page. The main page is divided by a list of published, drafts, and archived announcements. The admins have full capability to create, edit, publish, and delete announcements with this app, essentially eliminating the time spent requesting the development team to do this.

View Prototype

Feedback

After the initial deployment, the average time spent on managing content reduced to 5 minutes, compared to the several days needed just to publish one announcement.

Here's some feedback that will be implemented in the next phase:

  • Automated archiving after a period of time so admins won't have to manually delete an outdated announcement
  • Linked service with knowledge base articles so that admins don't have to create the same announcement twice

Admin Announcements

Admin Announcements

Content Management App

Product Catalog

Product Catalog

Admin Management App

Habitat

Habitat

Zero-Waste Living

Dressy Mobile App

Dressy

Formalwear Rental Service

Dr. EMS

DR. EMS

Medical Triage System

Shrine

Shrine

Furniture Design