weclapp AI powered Shopintegration for ERP
Reduce Complexity by highlighting key user actions and making Ressource management fun...a long way to go
weclapp GmbH
Desktop Design
2020/21 (work in progress)
ROLES
UX Design, UI Design, Strategy
weclapp is the ERP platform for teams. Whether CRM, merchandise management or accounting: With weclapp, teams jointly control all important business processes in only one software. Thousands of small and large teams around the world are exited about it.
Objective
In Q4 2021, based on user feedback and the evaluation of the NPS score, it was decided that a fundamentally new direction had to be taken in the UX of weclapp. Users are used to a sleek, modern UI thanks to consumer apps such as Netflix, Spotify and co. and expect the same from their enterprise software systems.
In summary, the following milestones should be achieved:
- Personalization over customization
- Simple onboarding guide for new users to reduce customer frustration while minimizing support ticket requests
- User flows should lead weclapp personas to their destination in just a few clicks
- Dashboard integration of AI as a hub
- Reduce mental load through clear visual clues
- Ocams Razor everywhere
- Reduce, reduce, reduce without losing important elements
- More modern, younger UI to be internationally relevant
- Personalization over customization
- Simple onboarding guide for new users to reduce customer frustration while minimizing support ticket requests
- User flows should lead weclapp personas to their destination in just a few clicks
- Dashboard integration of AI as a hub
- Reduce mental load through clear visual clues
- Ocams Razor everywhere
- Reduce, reduce, reduce without losing important elements
- More modern, younger UI to be internationally relevant
Old Dashboard UI
20 different low contrast colors for different types of actions...yep confusing
Research
weclapp has been around since 2007, and since then the interface has constantly evolved with new functions. More user groups and more functions led to a bulge of functions and feature creep. User feedback sessions also confirmed that users sometimes needed up to a minute to complete certain tasks. Since weclapp maps different user personas, such as back office, sales manager, logistics or accounting, users have certain click paths that they use again and again. There was a high potential for frustration, especially for new users, as the dashboard hardly provides any instruction or help to get started. After a steep learning curve, users were able to solve their tasks without support after about 1 month. weclapp is still very support-heavy and the support team is overloaded with questions about functions.
NPS Score Measurement Key
1.1 Key user pain points
Duplicate applications in the system consume a lot of time to sort.
While processing an application, required documents are not available in the system.
Managers do not balance the workload evenly among employees.
We need to call the citizen multiple times for missing information and documents.
The system is too slow and often does not respond during peak working hours.
1.2 Key business pain points
There are too many applications in the backlog.
There is no way to prioritize applications and identify critical ones like medical treatment.
Due to multiple software used by each department, maintenance cost is very high.
Employees do not respect the SLAs.
There is no way to analyze team performance.
1.3 My observations
Culture plays a significant role: The locals prefer being treated as the ultimate authority and that nothing controls them. Understanding this was important during ideation. Features that track their performance and put them in the red zone can be a significant setback.
Navigation and page load is a pain. To view the details of an application, users had to switch between 8 applications, navigate through 26 different pages, while each page took ~2 mins to load. Processing an application required entering details at various stages, which was too painful due to similar reasons as above.
Waiting for missing documents: Due to the unavailability of information, users spend most of their time calling citizens to collect missing documents. From the time of intimation to the citizens to the user getting the document, it can take 15–45 days.
The Kickoff 🔫
In order to enable the most far-reaching changes in the UX and not just serve old wine in new bottles, the UX team knew that we had to start at the very beginning. But how far in the beginning oh boy.
So I had the task of minimizing the weclapp colour palette from 26 colors and shades to as few as possible. A clear differentiation between main and secondary information was needed. Of course, the weclapp Emerald green had to be used, but nobody said anything that I couldn't refresh it for the application 😁
So I had the task of minimizing the weclapp colour palette from 26 colors and shades to as few as possible. A clear differentiation between main and secondary information was needed. Of course, the weclapp Emerald green had to be used, but nobody said anything that I couldn't refresh it for the application 😁
Interior Design for Interfaces 🪞
So I eliminated color by color and it felt so liberating that I started with the mental model of a white room as a starting point. First of all, everything out.
Interior designers use the 70/20/10 principle. 70% of the colors for the background. 20% as a contrast to the 70% and then 10% as a highlight (e.g. cushion covers) to guide the eye around the room.
Since our users spend a lot of time in weclapp, they should quickly recognize the next important action, i.e. the highlights, the rest can get lost in the background.
Highlight actions should therefore always be Emerald I green.
Workflow actions, i.e. multi-stage processes that are used very often and are important, should also be clearly distinguishable visually. Purple as a lavender provides a good color contrast and is modern.
All other actions that do not belong to the actual user flow action (of which there are many!!! 😮💨) were therefore divided into gray or black to create a clear differentiation for the user.
In addition, orange was selected as the unique AI color. When the AI appears in the interface, it should always be associated with orange. Orange as a warm, friendly tone to prevent user prejudices about AI, at least superficially. (see Uncanny Valley)
Interior designers use the 70/20/10 principle. 70% of the colors for the background. 20% as a contrast to the 70% and then 10% as a highlight (e.g. cushion covers) to guide the eye around the room.
Since our users spend a lot of time in weclapp, they should quickly recognize the next important action, i.e. the highlights, the rest can get lost in the background.
Highlight actions should therefore always be Emerald I green.
Workflow actions, i.e. multi-stage processes that are used very often and are important, should also be clearly distinguishable visually. Purple as a lavender provides a good color contrast and is modern.
All other actions that do not belong to the actual user flow action (of which there are many!!! 😮💨) were therefore divided into gray or black to create a clear differentiation for the user.
In addition, orange was selected as the unique AI color. When the AI appears in the interface, it should always be associated with orange. Orange as a warm, friendly tone to prevent user prejudices about AI, at least superficially. (see Uncanny Valley)
Two Highlight Colors, five Background Colors and one AI Color...Hue was cancelled quickly
Some ideas how the colors could look with main interaction elements
Als nächstes arbeitete ich an einem ersten Entwurf für das Team um zu skizzieren wie die Farben im Dashboard verwendet werden könnten.
Ich habe dafür nach Absprache und Brainstorming nicht nur die Farben angepasst sondern auch einige Veränderungen an der UI des Dashboards angestoßen.
My design improvements:
weclapp users should slowly become accustomed to the presence of AI in the interface. It should appear at the top of the dashboard as a central point of contact. As a butler metaphor, the AI should display all urgent tasks, suggestions or notifications without interrupting my daily work routine. The star badge serves as a simple indicator with a gamification element.
weclapp wizard 🧙♂️ is an innovative attempt to process predetermined workflow tasks directly by entering commands without having to jump to the specific page. Possible for routine tasks, but you need more context for most interactions on the weclapp page (more thoughts and wishes on AI and the future can be found here)
Get started guide
A simple to-do list for the weclapp personas and context-based cards with quick actions should enable a quick start and motivate to make fewer support requests.
A simple to-do list for the weclapp personas and context-based cards with quick actions should enable a quick start and motivate to make fewer support requests.
Filterable activity stream
I am a huge fan of the activity stream, it links the past and present of my working day and lets me go back to individual actions as a time machine. weclapp users complete hundreds of tasks in the application every day, so the activity stream can become very long and confusing, what if we make it filterable?
Filters such as today, yesterday, last 5 days should be enough to start with so as not to overpower the filter. Eight activity cards are always loaded, otherwise there is the Load More button so that the dashboard can also load quickly.
If a main task has several subtasks, these are displayed as collapsed cards.
I am a huge fan of the activity stream, it links the past and present of my working day and lets me go back to individual actions as a time machine. weclapp users complete hundreds of tasks in the application every day, so the activity stream can become very long and confusing, what if we make it filterable?
Filters such as today, yesterday, last 5 days should be enough to start with so as not to overpower the filter. Eight activity cards are always loaded, otherwise there is the Load More button so that the dashboard can also load quickly.
If a main task has several subtasks, these are displayed as collapsed cards.
Emotional Design
Last but not least, weclapp is a business application with which users spend 7+ hours a day. Maybe even more than with their colleagues or coworkers, so a greeting is the minimum to make their working day more enjoyable. The dashboard should therefore greet with first names, that's clear (I would find them almost worse than no greeting at all 🤨) Since we started with the German-language weclapp application, weclapp should also greet in typical federal state ways, e.g. Hessian. Initial feedback from customers and colleagues confirmed to me that everyone likes to be greeted (more in Manifesto on Emotional Design)
Last but not least, weclapp is a business application with which users spend 7+ hours a day. Maybe even more than with their colleagues or coworkers, so a greeting is the minimum to make their working day more enjoyable. The dashboard should therefore greet with first names, that's clear (I would find them almost worse than no greeting at all 🤨) Since we started with the German-language weclapp application, weclapp should also greet in typical federal state ways, e.g. Hessian. Initial feedback from customers and colleagues confirmed to me that everyone likes to be greeted (more in Manifesto on Emotional Design)
Entwurf des Dashboards mit neuer Navigation, Helper Cards, AI Hub und weclapp wizard
Skizze wie man first Layer kleinere Aufgaben an den weclapp wizard übergibt, ohne sich durch X Unterseiten klicken zu müssen
weclapp wizard Eingabe mit Kontext Vorschau zur Aufgabe
2.1 Problem statements
I am an officer from the finance department
I am trying to process a financial aid request
But I need to put the application on hold
Because I do not have the required information and the system is too slow
Which makes me feel frustrated and limits my working capability.
I am the manager of the finance department
I am trying assign and monitor all financial aid requests effectively
But I am unable to do so
Because I do not have a way to priotize the requests and lack visibility on my team
Which makes me feel helpless.
2.2 UX guidelines
Based on the research, we came up with the following guidelines that we referred to every time we came up with a design or solution.
Simplify the workflow
Create a consistent experience across applications
Ensure system status visibility
Do not define the process in stone; give the users some flexibility
Design for faster performance
Offer users the ability to set their preferences
UX over UI design.
2.2 UX guidelines
Based on the research, we came up with the following guidelines that we referred to every time we came up with a design or solution.
Simplify the workflow
Create a consistent experience across applications
Ensure system status visibility
Do not define the process in stone; give the users some flexibility
Design for faster performance
Offer users the ability to set their preferences
UX over UI design.
CRM Kundenakte Detailseite
Alte Detailseite der CRM Kundenakte
Mein erster Entwurf zur neuen CRM Detailseite
Links
weclapp is the ERP platform for teams. Whether CRM, merchandise management or accounting: With weclapp, teams jointly control all important business processes in only one software. Thousands of small and large teams around the world are exited about it.
https://www.panopto.com/de/about/net-promoter-score/
https://www.datev.de/web/de/m/marktplatz/weclapp/
