Summary‍

I led the redesign of HiDrive’s search functionality across desktop, mobile, and tablet platforms, collaborating with stakeholders, developers, and UX peers. The project focused on balancing technical constraints (e.g., IONOS white-label dependencies) with user needs for intuitive search. Through iterative prototyping, usability testing, and stakeholder alignment, we delivered a streamlined interface that improved usability while maintaining familiarity.

‍

Phase 1: Discover
Mapping User Pain Points and Technical Barriers

Challenges

• Users did not use the search
• Competitor analysis revealed gaps in HiDrive’s search compared to industry standards
• Lack of advanced filtering options (date, file type, size).
• Inconsistent search patterns over Web and Native apps (iOS & Android).
• Technical limitations are preventing modifications to the navigation bar due to dependencies.  (discovered at a later point in time).

‍

The initial design of the navigation bar, incorporating a search functionality for both desktop and mobile platforms, is presented in the accompanying image.

‍

Phase 2: Define – Strategy & Goals

Project Goals
✅ Integrate advanced filtering (type, date, size) without overwhelming users.
✅ Balance innovation with familiarity to avoid user frustration.
✅ Streamline design-to-development handoff for faster implementation.
✅ Design an intuitive search experience within technical constraints.
✅ Prioritize desktop and mobile formats based on usage data.

‍

Phase 3: Develop – Building the
Design Solutions

Explored two concepts:

‍01. "Modern" search with navigation bar integrated filter chip (later discarded due to technical constraints).
‍
‍02. "Classic" Dropdown menus below the header (chosen for feasibility and user familiarity).
‍

‍‍

01 "Modern" search mockups

For the desktop version the search feature was placed in the navigation bar, while in the mobile version, it is positioned below. At first it looked like as an elegant solution, as long as the user did not put more searching filters. Also navigation bar has its limits when it comes to the width even for desktop version. Below is the example of expanding of the navigation bar with extensive search filters.

‍

‍

For mobile version although due the space restriction search bar was positioned below it took valuable space as users were adding search filters.

‍

‍

‍

‍

02 "Classic" search mockups

After many temptation with first version the search feature was placed under the navigation bar, which took space out of the content area, but this trade off proved to be longterm better option, because it would take only one height of navigation bar in desktop and two in mobile. It was simple to understand and much faster for development. I enhanced this with chips for improved usability. In the image below, you can see the desktop version.

‍

‍Prototyping & Testing

• Created high-fidelity prototypes for moderated usability testing.
• Conducted tests with 6 users to evaluate clarity and functionality.

Based on four user flows, I developed prototypes for usability testing purposes. It was made for desktop web app, because more then two thirds of our users use this version. In the image below, you can see the desktop, tablet, and mobile drafts.

‍

By clicking on the image below, you can try a live prototype in Figma.

Since this is a prototype, only a few selections
are working, so when trying,
please use the following selections:
‍

for the file type: photos or videos
for the date: last 90 days
and for the size: > 500 MB

‍

Phase 4: Deliver – Implementation & Impact

Collaboration & Handoff

• Presented findings and recommendations
  via a 30-slide deck to stakeholders.
• Aligned developers on component usage and technical requirements.
• Prioritized next steps for marketing and development teams.‍

In the image below, you can see an affinity map with transcripts from videos used in usability testing as user feedback. Sorting the feedback into positive and negative quotes of users and the errors they faced gave directions for future improvements.

During usability testing, I conducted short interview sessions with six users to gain insights into their needs. These sessions not only informed the development of the next action steps for usability and UI improvements, but also the department of marketing and sales.

‍

Impact & Results

After usability testing prototypes and consulting with PMs and developers instead of first "Modern", we opted for a second "Classic" dropdown
menu approach.

Why? First "modern" approach with modifications to the top navigation bar would necessitate an additional four times the time and double the effort on the business side and on the users side second version showed 2 times fasters search results than the classical method. Additionally the IONOS HiDrive (another brand from IONOS) already incorporated a help search function within the navigation bar, making it confusing and challenging implementation of two search functions.

‍

‍🚀 Users reported intuitive navigation:
     “It feels like I don’t need to think to use it!”

🚀 Improved click rates on search functionality by 72.6%

🚀 Identified future opportunities:
     dynamic search suggestions and custom date ranges.

‍

The images below present the final solutions
for HiDrive Strato and HiDrive IONOS.

‍

‍

‍

Key Learnings Future Improvements

‍

🔹 Involve developers earlier to address technical constraints proactively.
🔹 Test low-fidelity wireframes before high-fidelity prototypes
      to catch issues sooner.

‍

Future Improvements

🔹 Expand advanced filtering
    (metadata, custom date ranges) in future iterations.
‍
🔹 Strengthen cross-team adoption of
    design processes for smoother handoffs.
‍

This project streamlined HiDrive’s search experience, aligning technical feasibility with user needs. The conservative design reduced cognitive load while laying groundwork for future enhancements. Usability insights and stakeholder collaboration ensured a scalable, user-centered solution with clear goals for necessary future improvements.