B2B

Document system management

TYPE

UX-UI Design

YEAR

2023

ROLE

COMPANY

HyperIn

UX Designer

Docs - landing page-1.png

Improve center documents navigation where Shopping center admins can structure documentation easily and tenants can find docs at hand.

▪️ Team

Product manager
UX Designer (me)
Developers
Costumer success

▪️ Context

Redesigned the document management tool to improve usability for both Admins and Tenants on a shopping center management platform.

This tool was implemented 10 years ago with no interactions in between. The tool was outdated and have several usability issues. My role was to identify the main user pain points and re-conceptualize the feature to bring more value to the users.

Low usage and adoption: The feature was outdated and difficult for new users to navigate, which led tenants to overlook the documentation sent by shopping center admins.

▪️ Problem

Discoverability: Users found difficult to navigate between documentation.

Visual and appearance: The current text-based layout is a bit "boring" according to the customer.

▪️ My role

Analysis feedback, defining user-flows, User interface, prototyping (flows and interactions), user testing, dev handoff.

▪️ Discovery

To understand the current scenario I worked closely with PM and Customer Service Manager to identify the most relevant business cases, what the customers want, and check frequent requests.

Listening to users' needs

▪️ What I did

Analysing user feedback
I took a closer look into the user feedback we had received over the years and to identify areas that require more attention.

Feature audit
I evaluated the feature by uncover usability issues and flows problems.

Current document management views

Here is the landing view when users see the document available. Overall, the interface does not differentiate what is a document or an attachment.

Here is the edit view where users manage the documentation, add-delete-move. Overall, the interface has several usability issues.

key insights

▪️ Most frequent feedback

Users wants sections that are easily to identify. Like opening hours, marketing material, real state management, etc. Tenants tend to be the most inquiring about opening hours, making them very accessible.

More visual layout for the section listing (i.e. icons). The current text-based layout is a bit "boring" according to the customer.

Users found difficult to navigate between documentation.

▪️ Ideation

Collaborative ideation to shape a more intuitive document structure

▪️ What I did

Ideation
I started designing the concept of the new doc structure and defining the Admin experience.

In total, I facilitate several reviews, these being creation, management (edit, delete, and move), and onboarding. Each of these helped me understand technical feasibilities and define scope.

▪️ Design goals

Discoverability: Easy to find docs and improving navigation

Warm welcoming: Create visual UI to make the content more appealing and easy to identify

Visibility: help tenants understand what is the most relevant information and how to find them

Accessible: Make sure tenant can access to document from the phone

New navigation structure

Early exploration of the end-to-end experience for Admins and Tenants

▪️ Testing

Refined ideas and usability testing uncovered key friction points

▪️ What I did

I created 4 prototypes in Figma and conducted Internal usability testing to understand:

Onboarding: The new redesign could be disruptive for experienced users. How do we introduce them to the new workplace? Do they need to double-check the documentation after migration?

Navigation: Scanning and finding documentation is key to managing file and moving across the workplace

▪️ Final designs

Create sections and articles

Users can create sections to organise articles and quickly locate content. Visually separating sections and files improves scannability.

Tree navigation

Left and top navigation enhance scannability of primary categories. Secondary and tertiary categories are clearly distinguished through separate vertical placement.

Article creation

Users can now create and customize articles to produce more visually appealing documents. The new editor tool offers enhanced content creation options, including the ability to add images and files directly within the article.

Takeaways

▪️ Outcome

As today September 2023, the new bank documents is close to be released, early customer feedback has been positive. Anticipated success metrics include increased feature usage by both Tenants and Admins, as well as improved customer satisfaction.

▪️ Learnings

Unfortunately, it wasn’t possible to conduct testing with real users, so I took the initiative to run usability tests within the team. It was a valuable learning experience that has better prepared me to lead more effective testing sessions in the future.

Previous

HyperIn, Modular Multi-brand app framework • B2B2C
Next

HyperIn, Mobile Intranet for Shopping Centers • B2B