• A

    A

    A

    A

    A

    A

    A

Storyly: New Navigation

Storyly: New Navigation

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

Storyly is the user engagement platform that embeds full-screen, interactive, and shoppable Stories in mobile apps and websites.



Through the leading mobile content format of “Stories,” Storyly empowers mobile marketers with a full-screen, blank canvas, and powerful features, helping them build long-lasting relationships and ensuring next-level user engagement - without any development efforts after integration. 



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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.