A cloud-storage service similar to Dropbox or Google Drive, based in Germany. As part of Strato, it is available for both business and personal customers across six countries.
Problem
Users were not engaging with HiDrive's search functionality.
Solution
We redesigned the search interface with always-visible dropdown filters and a cleaner results layout, making search intuitive on desktop and mobile.
Impact
By prioritizing desktop breakpoints—since over 78% of our users access HiDrive via desktop—this redesign drove a jump in search-bar click-throughs.
Work Process & Methodology
During several months I used a Double Diamond innovation and design process, including User - Centered design and Design Thinking.
My Role:
UX/UI Design
Year:
2022
Duration:
8,5 min read
For more details about the process, please scroll down.
Overview
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.
Analytics audit. Only 4% of active users clicked the search bar; most resorted to manual folder navigation.
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.
The user had an option to conduct a keyword-only search.
At the same time, competitors already offered a variety of advanced search options.
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 – Designing & Testing the Solution
Explored two concepts:
01. "Modern"searchwith 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. - User flows before prototyping - More attention to the analytics (before & after) - 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.
Conclusion
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.
