The Design System of Mapxus Map
Background
Design system is to have a library of reusable elements/components for the team to design ,develop and realize the products. It is not only a sketch library or a pattern of design, it is a more than it ! It is unique to every company. It is not a project but a internal products, serving all your company products.
Mapxus is a service company that provide indoor digital map, indoor wayfind and indoor visual map. We provide an api key to let other company or developer to develop their own products based on our data.
How can we provide similar experience, from macro to mirco, to the end user? How can we speed up the developing time of our clients ?
How can we provide the same UX of the floor controller to the end user?
The Design System
My idea is to have a coded-package for every components, so developers can simply copy & paste the code and use the default components.
Before that, we need to identify what is our key default components. To understand, we conduct a user sruvey to ask the developer and clients, and they want the followings:
- the ability to cuztomize the default components.
- good to have basic components like search bar,listing, floor controller
- easy to integrate with the existing app on mobile and web.
It is like a puzzle to plug into your app to have a ready-to-use indoor map application
some of the components from the design system
So we have a long week to make the decision, confirm which feature is our default component, I am not going to talk about all the details but the followings:
1. Designing the interaction for the components.
2. Test the UX of the components.
3. Setup a library for internal use.
4. Go through everything again & again.
5. Package the components into a short code.
6. Try to build some basic app with the components and test it again.
As I mentioned, I am the only designer in the company, so this was a crazy time for me to work out everything from scratch. I have to work with everyone in the company to get it done.
the default wayfind, floor controller and positioning components
With the basic app with the default components, the customer understand what we can do quickly, and of course, it is just the begining of the design system of the map.
