Challenge
How to redesign “Team”, a feature has not been changed for 20 years?
In 2017, seeing users are plummeting due to the lack of usability of the product, Ariba decided to redesign the interface and improve the experience. “Team” is one of the features.
Ariba used to put feature rather than user first. Therefore, how to introduce the design process and make the user-centered design is the underneath challenge in this project.
My role
Conducted research, iterate designs, deliver pixel-perfect mockup and worked with engineers on implementation.
Goal
Improve Team’s user interface without modifying the functionality of its core features.
Background
What is “Team” ?
When working on a sourcing project, buyers will share files with stakeholders in different ways. Team allows buyers to manage different permission to the files.
Design process
Initial Design
Use existing design patterns
Given a short time to finish design, I made the first design proposal based on PM’s requirement and existing UI pattern.
issue1
Full page Pop-up separates user from context
Our UI library only had full-page Popup that time. However, full-page Pop-up blocks users from see other contents.
Issue2
Content’s priority is unclear.
In the old system, “group” consists of several roles, and each role comprises different permissions. The two layers to manage the permissions seems confusing, and I wonder how end users use them.
ISSUE3
Inevitable empty
Due to the full-page Pop-up, there is a big blank area around the content.
Pivot
Let’s do research!!
Showing the flaws above, I got the agreement with PM that we should not waste resource on developing something we feel wrong. Therefore, we decided to extend 2 more weeks to explore different design pattern and research with end users.
Find a clear design goal
Interviewing 4 category buyers(end users) about how they use team, I learned:
“Who’s in the group” and “add people” matter most for users
User adopts groups created by admin.
Less than 10 groups in a project; less than 5 members in a group.
Afterwards, I set a clear design goal:
How could we help the user browse group members and add people to the group quickly?
Changes on design
Exploration
Get inspired by other products
Researching how to browse members and create groups in other product. I found :
Viewing member should be quick, easy and noninvasive.
Popout is action need the user to complete, i.e. create, add.
Design Decision
Chose the design regarding efficiency and consistency
3 directions in exploration: smaller popover, popover and a side window. Considering the scalability and efficiency, the side window works better.
Validated concept with users
I further verified users’ needs with 3 proposals for group summary. They like seeing members up front, and with quick access to add a member.
Final Design
Show “Team” contextually
In the end, I proposed a side window, which showed when a user clicked the "Team". In this way, Team wouldn’t overlay on other content. Furthermore, "members" and "add” button are put up front, so they can be quickly accessed.
Other less frequently used functions, such as “edit group“ and “remove members“, are put in second layer. Users can execute them when entering an individual group.
Design highlights
Improved from the old product
The new design solved several problems occurring in the old system:
Results
It’s a huge improvement
The new design is implemented and received several positive feedbacks from customers:
“It is a huge improvement. Before I have to jump between screens, now I can see them side by side.”
“It’s more efficient, I can easily add people to the group. Fewer steps“
“It’s cool, it’s cleaner and more intuitive.”
Takeaways
Inputs from end users are critical, especially when we are trying to simplify the experience - we need to know what end users are looking for. As the UX designer, it is essential to help the team understand the value of research. I appreciated our team agreed to extend time and support on research when understanding the issues. In the end, we not only developed the product that is appreciated by users but also learned how research can help us shape the product.