top of page
UI/UX Design
I worked for a software company that is an international leader in publishing software. I played a crucial part in designing user interfaces and experiences for software applications. My responsibilities spaned the entire design process, from creating prototypes, mock-ups and wire-frames to conducting user and stakeholder testing. The goal? To ensure optimal user interaction with our cloud-based web applications.
Top
UI Component Library
UI Component Library for Klopotek 'STREAM'
STREAM is Klopotek’s platform for user interaction across computers and portable devices. Focused on supporting key business processes in a smart and simple way, Klopotek STREAM provides an excellent user experience.
All STREAM applications follow the same user interface guidelines to achieve homogeneous navigation and usability. General features are:
-
Responsive web design
-
Scalability
-
Themes are available for different contrast ratios
-
Central Navigation
-
User-specific entity lists
-
Unified search functionality
WHAT I DID
Development and creation of UI components
Responsive web design:
All STREAM applications support responsive web design with fluent breakpoints and are available on mobile devices via a browser app.
Scalability:
All STREAM applications support the browser-native zoom functionality to increase or decrease text sizes.
STREAM themes are available for different contrast ratios:
In order to support different contrast ratios, STREAM applications provide three different contrast themes and two different color schemes. With these themes, the applications are compliant with the web content accessibility guidelines defined by W3C (Chapter 1.4 Distinguishable). The selected theme is saved as user-specific configuration.
UI Icon Development for Klopotek 'STREAM'
Klopotek’s platform 'STREAM' makes publishing easy and intuitive: complete essential business tasks wherever you are; enjoy an interactive user experience guiding you through an easy-to-use and simple workflow, visually clear on any device.
A new, special icon language was created for STREAM. In addition to general icons for all apps (e.g. 'plus’ for adding something), STREAM apps make a use of a dedicated, publishing-specific icon set to indicate entity types (titles, contracts, authors, version types, etc.) or other publishing-specific processes (e.g. royalty calculation).
This unique icon language (550+ icons) supports the user in navigating through the application, identifying information, and responding to interactions more intuitively.
It also increases efficiency by reducing content displayed as texts in the web application.
Icons are used for:
-
Entity types
-
Navigation points
-
Interactions and buttons
-
Filters
All STREAM apps follow the same color scheme. The underlying theme is structured in grey and beige colors, while elements that are highlighted, interactions, or other important information is made prominent by using intense colors. Honey (in 5 shades) is used for highlighting structures and interactions; in a second color scheme that is available, blue replaces the honey to support users who are red/green color blind. Green (in 5 shades) is used for showing ‘positive’ or forward-driven information.
The icons are provided as vector graphics, so they can be managed and scaled as fonts.
WHAT I DID
Development and creation of UI icons for web apps and website
Website icons: Look & Feel as 'STREAM' App Icons
Requirement in the Customer Business Process
Klopotek is the international market leader in the area of publishing software. In the course of a client acquisition a prototype with all the desired requirements is to be created from the customer's current software. Since these requirements do not exist in Klopotek's "Classic Line" software, a new cloud based 'STREAM' interface must be designed.
Problem: missing fields in existing software templates
-
Systematics to show for example target group, red flags, demographic etc.
-
Country of Origin
-
For the series to which the title belongs, it must also be indicated how many volumes already exist in the original and whether the series is still running or has been completed.
-
Print run: In addition to the guaranteed print run , the expected first print run must also be stated.
-
Royalty accounting: Accounting period; accounting period (e.g. 60 days after the end of the accounting period). This means: If billing is done annually, the billing must be available 60 days after 12/31.
-
Term of the contract until: (date), automatic renewal possible y/n; in case of renewal: Until when notification of renewal must be sent to the rights owner: (in months); renewal period in years or months.
Result: The proposal is under discussion but the (re)design was acknowledged as a qualitative and quantitative success. The outcome of the assignment is considered to be really good. The client feels empowered in handling their processes.
Unfortunately, I had to change information due to ongoing efforts of the customer and/or product development.
WHAT I DID
Creation and conceptual development of a prototype to implement Classic Line design information and the client's desired requirements.
Author Event Manager
Klopotek 'STREAM' App: Author Event Manager
A brief description of the 'STREAM' app Author Event Manager: It is easy to enter and modify information on authors, the titles they present, and events (readings, participation at discussions at fairs, online/digital) as well as all merchandising activities such as selling titles after a public reading.
When managing events and entering details, such as contact persons, invoice recipients etc., organizers and venues can differ (in case of readings hosted at locations presenting guests from various fields of interest). Embedding Google Maps and adding information such as 'will be moderated by' and 'will be translated by' is part the options users have, including rating the organizer and venue and adding comments for internal purposes.
As a result of the seamless integration with other Klopotek solutions, event organizer and venue data can be retrieved from our Business Partner Pool.
Author Event Manager also provides tools for managing social media campaigns for events and sharing information with traditional media for promotional purposes.
As a result of the User Stories, this is the current status (work-in-progress):
WHAT I DID
UI/UX process, prototype, requirement sprints with product owner and development team
From all tools of the app, the user can jump to an events overview: this calendar can be adapted to display one week, two weeks or a month. The events included are flagged with traffic light signs indicating their status (color-coded for easy review: all preparations done / some things still need to be done / urgent action required). A tasks list for each event can be created and managed. If licensed, Author Event Manager is linked with the Contact Tracker STREAM app, so you can record memos related to and emails for events. To help you to save time, it is also possible to generate templates for types of frequently reoccurring events.
I proposed two calendar drafts: showing the old and new status of the display in calendar month view.
Challenge Case Study
Fictional Challenge of a Responsive Website: "InsideOut"
This example was a fictional task I worked on during my UI/UX training. I would be delighted if you would take a closer look at the individual steps. I was able to handle the approach well due to my previous professional experience.
(I had 30-40 min time for each step)
Assignment:
Development of a responsive website/mobile app for a young tourism startup for exclusive wellness, soulness and active travel called 'InsideOut'. (in German)
Background 'InsideOut'
-
founded 2014
-
300 trips sold
-
Annual turnover: 900.000€
Travel destinations:
-
High quality, appealing presentation of travel offers
-
Comfortable searching, filtering and sorting of trips
-
Individual compilation of trips incl. online advice
-
Simple and fast booking processes and payment processing online
-
Travel planning with all-round carefree package
Target groups:
-
Quality-conscious people between the ages of 35 and 65
-
Middle class/upper class
-
Well-earning, wealthy, affluent
-
Wellness-oriented, health-conscious, sporty, active
1. I had to create a persona that represents the company's customer or user group:
WHAT I DID
Creating all steps of this challenge and presenting this to the group of participants
2. The second task was to develop a selected user scenario with multiple use cases for the project:
3. I created a user story map based on user stories:
4. A content strategy plan based on the customer lifecycle was created:
5. The next step in this process was to create an information architecture using card sorting. The content was sorted by thematic proximity and Hierarchies were taken into account.
6. Using the Design Studio method to quickly illustrate initial conceptual approaches to a previously defined conceptual approaches to a previously defined task (screen/feature).
7. I developed wireframes and interactive elements for selected screens within the website or app scenario.
8. I created a mood board with imagery, color palette, and font selection as the design basis for the application.
The trainer and the participants liked the proposal very much and we discussed possible improvements for the individual tasks and the whole UI/UX process.
bottom of page