wirHub
wirHub is a SaaS brand management system from the brand agency wirDesign that serves as a central location for assets and guidelines, supporting the creation of brand-compliant communication.
To improve overall usability, weaknesses in the UI were identified through heuristic evaluation and new features were developed based on stakeholder interviews. Both were implemented as Figma prototypes and new user flows were validated in small usability tests. The results were then handed over to the product owner and incorporated into the roadmap.
Timeline
2022 – 3 months
Services
UX Research, Design System, Usability-Testing
Problem statement
wirHub operates in the BMS market alongside established platforms such as Frontify and Bynder. How can the system strengthen its market position and offer existing and new customers added value in their daily use of their brand?
Desk Research
Niches between individualism and standards
wirHub is continuously being expanded, mainly in response to customer requests. In order to better understand its market position, the main functions of other BMSs were analysed. These findings can later help to plan new features and evaluate their impact on market position. The wirHub, Frontify, Brandfolder and Corebook systems were compared in six key areas.
Examination of status quo
Heuristic evaluation provides the basis for improvements
In order to efficiently identify fundamental usability weaknesses, I used a heuristic evaluation (formative inspection method). I evaluated the editing mode of wirHub based on Jakob Nielsen's ‘10 Usability Heuristics for User Interface Design’. Identified problems were then prioritised according to severity.
Unfortunate choice of input fields
Inconsistent design
No mandatory fields and validation of inputs
No feedback on system status
Design System
Prevent usability issues early with a coherent UI
The heuristic evaluation revealed recurring usability weaknesses. The existing design system was optimised accordingly.
Redesign from navigation to Markdown editor
Due to the continuous development of wirHub, e.g. for complete live editing of content, many modules were at different stages of development. They were therefore harmonised and supplemented with best practices such as input validation – based on Nielsen's heuristics for consistency and standards.
Before
After
Before
After
Interviews
Stakeholder interviews for real user perspectives
13 interviews were conducted with various stakeholder groups to gain qualitative insights. A semi-structured guide served as a basis for discussion to capture user experiences, moods and wishes for the future.
The stakeholders were divided into ‘guardians’ and ‘users’ according to the 'strategic selling model'. Guardians evaluate the purchase and manage the system, while users use weHub directly. Overall, the feedback was very positive and showed a high level of satisfaction.
Guardian feedback
No connection for image database
Tedious manual creation of users by administrators
Editorial requires training
More transparency with new features in wirHub
Redundant tasks should be automated
User feedback
No indication of the currency of assets
No personalized content or adaptation to individual needs
Editing mode not in real time
Undo and Restore Actions for Content Management
Integration of tools, smart solutions, and automation/generators
Ideation
Brainstorming and prioritization of new features
New user requirements were derived from the findings of market research, interviews and heuristic evaluation and divided into four categories: asset management, editing mode, user view and tools/processes.
The ideas were prioritised using the MoSCoW method (‘Must have’, ‘Should have’, ‘Nice to have’) and evaluated in close consultation with the product owner. ‘Must have’ and ‘Should have’ functions were then analysed in an effort-impact matrix to weigh up the benefits for users against the complexity and costs of implementation.
wirHub must allow for a time-efficient registration of new users.
wirHub must provide enough file information to select the desired asset.
wirHub must inform the user about new features.
wirHub must provide intuitive solutions for unintentional or incorrectly executed actions.
New process for registration
Previously, new accounts were created exclusively by administrators. However, stakeholder interviews revealed a desire for a simpler registration process. The effort involved is minimal, while the benefits are significant – therefore, this feature is prioritised as a quick win.
User Stories
Linking made easy with Progressive Disclosure
In many modules, links could only be inserted using fixed buttons or the Markdown editor with HTML tags. A new modal now allows easy linking to internal pages, anchor links and external sources. This uses the principle of Progressive Disclosure: the specific input fields are only displayed after the respective option has been selected.
User Story
Analytics for Admins for the first time
wirHub was already collecting data that had hardly been used until now. With minimal effort, a dashboard for administrators was implemented to strengthen wirHub's market position in the field of analytics.
User Stories
Usability Testing
Validation of selected features on the prototype
Several new features were tested in an asynchronous, remote usability test. Three participants completed six tasks in the Figma prototype, using peri-action ‘thinking aloud’ to share their thoughts and reactions directly. All participants had basic experience with the system. The evaluation combined qualitative data from statements and observations with quantitative data on task completion.
Part of the test focused on file management: after linking a file from the Asset Manager, the file analytics should be called up, which two participants were unable to do successfully.
Insights through tests
Own modal for file analytics necessary
Additional labels
Adapted wording to the familiar repertoire
Before
After
Project submission in March 2020
The project was completed at the end of my third semester and successfully presented as a demo. (Grade 1.0)
