Configurations as a Service
A net new product to help business segments update their site configurations with relevant content and structure. This allows internal teams to easily locate configurations and edit as desired.
Project overview
Today, internal teams are working with configurations that take over 20 applications to get through the full process. Many of the applications apart of that stream are very similar and redundant. Design was approached to help create a common service and add on to it to make the new process easy, cut costs, and reduce the amount of effort to locate configurations.
The tool will support developers and business analysts to update and edit existing configurations and create new ones to update platforms and sites to be consistent with the latest information the platform teams want to show.
My involvement: Single handedly led discovery, research exercises, UI design, requirements gathering, site map and site structure design, wrote user stories, user flows mapping, back-end data reorganization to match user mental models
Initiatives & goals
Create a new experience that allows configurations to be stored and accessible in one place for multiple personas to use. The platform supports fluid navigation locating configurations to easily edit and update.
Actions & Process
Discovery and user research
Analyze and synthesize all user, business, and developer feedback
Reorganized back-end data structure to match users thought process
Design site structure and UI
Results
Clean UI that supports easy way-finding by displaying necessary decision-making information at the right moments
Allows users to easily locate any configuration at any hierarchical level
Customized experience for editing to have unique capabilities available
Step 1
Observational testing
I met with end-users to observe them conduct various tasks in their typical work day. I learned big frustrations that are caused by basic, foundational features.
Where the BA users go to look up configurations, there are over 900 results for them to sift through. There is no search or filtering so when they need to locate a configuration they have to look through each option until they happen to come across the config they are looking for.
The listings they look through are organized by when the carrier was created making searching for an item extra difficult. In addition, there is no pagination so users scroll to the bottom, wait for more results to load and continue to scroll.
BA users rely a lot on their own memory to navigate through their platforms and there is no naming conventions to the configurations.
Difficult to locate a configuration
While editing a configuration, there are many sensitivities users need to be careful of. Things do not save automatically so they need to click the “Publish” or else their work gets ignored and reverted back to the previous set up. In addition, the format on how the edit mode is does not match the format on how it actually appears on the site which is confusing.
Editing is sensitive and confusing
Once a task is completed, users need to go into a different site and hack logging in by guessing potential member names to be able to view and test their edits if they are correct or not. If there is something wrong, they need to start the process all over.
Checking edits is tricky
Step 2
Task flows
The observational testing showed there are 3 main tasks the users face in their typical day that they kept mentioning over and over. Therefore, I took a strong focus on those sets. Those tasks are:
“I want to edit a configuration”
“I want to update configurations in bulk”
“I want to add a new Category to a business entity”
Mapping the 3 main tasks users conduct. These cases represent how users would complete flows in the proposed design based on observational testing, user feedback, and best practices.
Step 3
Building a site map
I was given a rough set of requirements that were not ready for design to take action on. In order to keep momentum, I took each “requirement” and organized them with like-things and forms groups. From there I took those groups, with my learnings from observational testing, and began to build a site map. This helped me determine what spaces are needed in the site and furthermore, what information and actions need to be available in each space.
I organized and synthesized the given “requirements” in a Miro board. With this I was able to structure how different requirements relate to each other and ideate where those will best be applied.
From my analysis on the requirements, I then began to map out what is needed in the product, what information needs to be available there, and which actions should be available too.
Redesigning back-end data organization
Step 4
After observational testing, building site maps, and meetings with users multiple times a week, I’ve noted how users think to refine down to the configuration they are looking for. The users mental models do not match how developed created the back-end to support the interface. I designed a new way to structure the data for users to search properly and although there was push back from tech, with the users buy-in I eventually got the change to happen.
Diagram how search was expected, and required, for users before. Here the results surface items at a page level (parent to configuration).
Diagram of search after that aligns to users needs and how they think through locating a configuration. Here the results surface items at a configuration level.
Step 5
Visual design
Following the company’s branding and pattern libraries, I applied my learnings into visuals that I met with tech and business, individually and in groups, numerous times throughout each week to ideate, get feedback, and confirm views support the needs of everyone.
Here are final designs of the main pages that provide the biggest value to users and their work: Configurations listings page (Homepage) and detail pages of each element in the data hierarchy - Business Entity, Page, Sub-page, and Configuration.
The configurations listing page, the homepage, houses all the configurations the system stores. Users can apply filters and/or type keywords for a direct search.
The final design supports easy way-finding by displaying necessary decision-making information at the right moments.
FINISH!
Configurations Listing
Each detail page within the hierarchy will have detailed information of that element to reference and/or edit, lists any child and/or parent elements related to the current item, where the item is actively published, and the items history.
Detail pages
