SITS Shop Managment
Background
The store we use is very extensive. This offers us many advantages and gives us freedom in the design. On the other hand, it makes it complex to operate. Our clients have to manage their time extremely well. Efficiency is essential. That's why we decided to create a simplified backend for the store, which also has only the functions that our clients need. We can also add functions that the store does not offer by itself, but are useful for our clients.
Challenge
The challenge was to combine my knowledge of the store with the client's requirements. To do this, I worked intensively with our client to get to know their way of working and everyday life and to understand their requirements.
Goals
The result should be a simple order management system that is intuitively understandable and, above all, designed for efficiency.
Scope
UI Design, UX Design, Architecture, Development, Design
Tools
Adobe Illustrator, Adobe XD
Role
UX Design, UI Design
Duration
Six weeks
Design Process
User interview
Having worked closely with both our (shop) clients before, I had a basic understanding of their way of handling their business. However, to create the perfect solution for them, I needed a deeper dive into their work life.
As a first approach, I created an interview sheet with open-ended questions to guide the interview and to encourage the participant to share their thoughts.
Empathy map
The Interview gave me a good understanding of the client as a person, shop owner and business manager. Using this knowledge I created an empathy map, mapping out user needs, pains, gains and key features.
How might we..?
To define the challenges, I created How-Might-We questions based on the insights and needs gathered from the empathy map. This helped me to frame the brainstorming process:
- How might we make the process as easy and intuitive as possible?
- How might we add to the click and collect feature
- How might we simplify the process of delivery?
I've spent approximately five minutes per HMWQ question. Then another ten to evaluate my ideas.
Card sorting
With all the information and the insights from both our side and the client's side, I started writing down user needs, functions and ideas onto post-it notes. I found these were best grouped into these four categories:
- Orders
- Customers
- Calendar
- Statistics
Architecture
After creating a basic frame with card sorting, I refined all functionalities and created an application architecture map. This helped me visualize and contextualize the relationships between content and functions, as well as map out the hierarchy of information.
Orders
Orders are displayed in table form, containing most important information such as name, order number, state, total and choice of delivery.
I also added the accommodating pick up time and date.
This is originally communicated in only two ways; via the .pdf invoice that the store owner can have forwarded via cc, or through multiple levels in the original store backend. I chose to display this information, as i found it just as, if not more important, than other top level information.
Along with this table there’s also an option to print delivery dates and/or pick up dates.
Print pick up dates
This feature is yet to be implemented. It is supposed to render all pick up times and dates into a nice calendar-like overview and produce a printable .pdf file.
Print delivery dates
Our clients deliver their products themselves. Therefore I implemented a feature to add a date to an order. Clicking a calendar icon opens up a date picker menu, which allows our client to select a date.
By clicking the print button, they can chose which days to print. This renders a .pdf file which includes all orders, including name, address, order details and total, sorted by date. This way they have the all the relevant information in one place.
Customers
Customer details are displayed in table form. Beside name, address and phone number, I decided to show if there’s any pending orders, and if so, how many, as well as the total amount of orders.
I also included a button, which opens our clients default email application, with details already filled.
Clicking a row takes them to the customer detail overview. Showing all saved addresses as well as all orders.
Calendar
This view renders pick up times and dates in a calendar style. This allows our client to get an overview of upcoming pick ups in one glance.
Clicking a pick up time opens a popup with most important order details.
Statistics
Statistics display different kind of information. This is customizable, depending on the clients interests and needs.
Wireframes
design and accessibility
Final design
Final thoughts and next steps
Calendar
In the future I would love to take the calendar to the next step - which is our client’s phones. They will be able to subscribe to this calendar and receive push notifications on new orders. I imagine this will prove even more useful than having it simply as on a desktop.
Dark mode
Since I chose this color set to accomodate most common forms of color blindness, I'd love to implement dark mode. I had so much fun chosing the colors, I'd love to take this to the dark side :)
Print by route
Since some of our clients have their in-house delivery service, I’m working on a feature to sort deliveries by best or shortest route. This not only saves our client valuable time in planning but also reduces driving time and therefore emissions, as well as saving valuable fossil materials.
To take this even a step further, I can see a web view which compiles this printed information onto our clients phone.
By tapping an icon, they'll be taken directly to their navigation app of choice, ready to hit 'go'.
Additioally they'll be able to close each delivered order right on their phone.