User Engagement (UX Case)
Summary
As we examined the previously established funnels, we noted an approximate 30% in both navigation speed and the completion of tasks or funnels.
Overview
Since image carousels are getting boring and useless for the marketing engagement experiences, Storyly came up with a clever idea and they invented brand generated story experience for the companies. Storyly is a platform to increase user engagement and retention for mobile apps and websites. The main product is a CMS and Studio. And these platforms provides to brands, web and mobile plug-in to have Instagram-like story experience on their interface.
My role: Product Designer
Platform: Web
Year: 2022
Problem
There were many navigation issues between the pages Home, Content, Content creation, Analytics, and Settings and many other features.
The top menu did not provide enough space for every screen resolution. It was insufficient when we wanted to add multiple menu items.
We had to hide most items within the collapsible menu on the top right, which created problems in highlighting important features.
Sections were not clearly separated, and features were getting mixed up.
The navigation of the settings page was insufficient, and its hierarchy was disorganized.
While adding a new application/website was easy, the hierarchy was not functioning correctly, and the quality of its UIs was inadequate.
The way of the solutions
Benchmarking
Since Storyly is a unique product in its vertical, we often faced challenges when it came to benchmarking. However, to ensure best product practices, we still took benchmarks from similar platforms and started to think deeply about navigation changes based on user feedback we had.
Creating the new information architecture
With the card sorting workshop we conducted within the product team, we decided which menu items and features were more important. When making these decisions, we also took into account the metrics of the customer success team and received support from the events we tracked in Fullstory. We started addressing not only the features and functionalities we wanted to highlight but also the UX/UI problems that we observed users actually encountered and struggled with, those they consistently used.
Design and prototyping
We placed a high emphasis on the user experience and clarity. To achieve this, we collected numerous examples to visualize our ideas. From these examples, we created prototypes for features we believed were strong, aiming to better understand user perceptions and assess their ease of use.High fidelity design and development complexity
We didn't want to allocate a significant amount of time to the project. Since our dashboard traffic wasn't significantly high when compared to an e-commerce website, after removing the planned navigation, we followed a simple and easy route, as we had the opportunity to test it with a small user group. This project had a importance at some point, as it supported much larger projects we were working on. This meant that we needed to choose a design that didn't require a significant increase in development effort and could be released quickly, while also being easy to understand.Shipping and testing
After releasing the project, we began monitoring it both through event-based tracking and visually using Fullstory. We had the opportunity to have one-on-one conversations with some of our users and gather their feedback. Eventually, when looking at the funnels we defined earlier, we observed an average of ~30% improvement in navigation speed and task completion.
Who
I was responsible for all the design processes (workshop, wireframe, design, prototyping and monitoring) of the project, but I completed this work with the assistance and guidance of my other four designer colleagues. The entire product team participated in the short workshops we conducted, and we gathered everyone's ideas. Additionally, the customer engagement team had a lot of valuable insights, which also contributed to the project.
The team: Aykut Bal, Cansu Tetik, Beyza Erik, Kaan Uyanik, Guven Sozmen, Selin Aydemir, Baris Ermut and Ammar Ceker
Screens
✸ Home
The top menu and the dropdown menu has moved to left side
The title of the page found the new place on the top
Old screen ↓
New screen ↓
✸ Platform selector
The picker area that allowed you to select and manage mobile applications and websites you previously added was located in the top menu. In this area, you could also add new applications or websites. However, the hierarchy was quite complex, and understanding it was difficult in some cases.
When we moved the top menu to the left, we also had the opportunity to place the platform picker within this area. Since each platform has its own content instances, in the old UI, it wasn't immediately possible to understand this distinction. With the new UX/UI, we addressed this complexity and improved browsing speed.
Old screen ↓
New screen ↓
✸ Content management
The navigation change on the content page is actually more related to the left menu. While there hasn't been a significant UX change on the page itself, access to other pages and additional platforms added to the dashboard has greatly improved with a faster navigation. Ultimately, the navigation, which used to be scattered everywhere, is now consolidated exclusively in the left menu.
Old screen ↓
New screen ↓
✸ Analytics
The new version of the Analytics page has become simpler with softer color transitions. Additionally, the "Export" function has been replaced with the "Create Report" functionality.
Old screen ↓
New screen ↓
✸ Settings
With the new settings page, we had the opportunity to move the main settings tabs that used to be at the top of the page to the left menu. This way, when we enter the relevant setting tab, we can also see the sub-tabs of the respective page in a small menu. This not only saves significant whitespace but also allows the user to truly focus on the tab they want to access.
Old screen ↓
New screens ↓
Result
The team successfully released the new navigation. The primary KPI of the platform was exceeded, and the existing user funnels outperformed the responsive platform. This validates our investment in the dashboard's navigation, providing a better user experience and helping us reach our business goals.