Retail Manager App for SurfacePro
WHY?
SAP Shopfloor Manager is a legacy application in our product family, so I addressed a refreshing MVP concept to reflect the customer requests.
The legacy app is available on IOS and Android. However, since customers work in a busy environment, running back and forth with a notebook is uncomfortable.
They work with big data sets, so keyboard usage is inevitable, making hybrid devices preferable. It was an excellent pilot to deep dive into MS Fluent design principles.
It was easy to find end-users and better if I had a more substantial use case understanding when the project started. Last but not least, I could articulate my design process clearly via this MVP concept.
PROJECT GOALS
The goal of this project is to acquire more domain knowledge in retail.
I wanted to learn more about Fluent design principles and how to apply them correctly.
I had challenging factors since SAP has no design system for windows, so I had to build my own.
HYPOTHESIS
After six interviews, my approach was to frame the problem factors and understand typical daily challenges via retail personas. Finally, the interview results have been synthesized into a day in the life scenario to outline actionable points. Points are underlying the hypothesis about the Retail Manager scenario. The hypothesis was that the RM is working in a busy environment and they have financial obligations and daily people management tasks.
PROBLEMS
There was a lot of excellent improvement spot, and after prioritization, I decided to focus on the followings:
👉 To track the store’s financial performance and the best-selling products would be essential.
👉 Retail manager still needs to make paper-based signatures at good receipt approval
👉 They want to use a dedicated calendar for store promotions and staff events as these are blended with regular meetings in the outlook calendar.
👉 Assigning tasks to staff members (store employees) would be great because, in a large store, they need to walk a lot to ping staff with assignments.
👉 Ad hoc staff shift change needs to be more transparent
RETAIL MANAGER PERSONA
Carlos is a 36-year-old clothing retail store manager, and his job is to keep track of daily inventories, manage his store crew, and achieve financial plans. In addition, part of his job is to approve deliveries sent out from the warehouse into his store. He’s using a Windows app on his Surface Pro X device to do all his tasks.
“I wish I had more time for promotion planning besides staffing and delivery administration”
DAY IN THE LIFE
This method walks through a typical day of our persona. The story entirely relies on the insights from the research. Otherwise, we can call it as a user journey that depicts the touchpoints between Carlos and the application.
Deputy Manager scenario ??
Via this app, he can change the shift if someone goes sick leave unexpectedly.
Moreover, he can split and assign the promotion and seasonal launch-related tasks and quickly deal with the deliveries with an immediate assignment like to put away process.
DESIGN PRINCIPLES WHAT SHOW DIRECTION
I made an online card sorting with the six interview participants, which outlined the correlation result. Participants have a high role fit; thus, the result seems genuinely reliable.
The app follows Microsoft fluent design IA principles which give three options for the structure.
Flat or lateral, it is a simple one-level but wide navigation. The second is the hierarchical it is a conservative tree structure.
The third one is a mix of the previous two, so I had to select the third one as it is complex business software.
Most of the primary windows apps use it, so this similarity is useful for the customers since they can use their MS mental model. In addition, using the same patterns shortens the learning curve of navigation.
PROPOSAL SKETCHES
KEY SOLUTION ELEMENTS
The priority to being up to date about the financial results using chart gives an immediate impression about the performance.
The general operational tasks like seasonal promotion planning or staff shift schedules are the most frequent actions, so these also got a place on the dashboard.
Delivery handling is also a crucial part of the daily routine. The app follows the well-known MS app structures to handle it via barcode scan and digital signature.
The sunny case is if he uses the device’s inbuilt camera and scans a barcode from the delivery document. Then, the inbound delivery or GR document is automatically filled. Then, the system recommends related task assignments to one store assistant. It just saves some time and effort for him.
Navigation and header pattern follows the MS teams completely. I call the dashboard “Activity.”
“Delivery,” “Staffing,” and the “Calendar” are all in the left navigation.
One of his main points was the document search that the global one could solve.
He can find every delivery or staff-related info easily and quickly manageable within this application.
Useable shift planning is not possible in the calendar because of the team size. By way of conclusion handling, 8–10 people and storing events in one calendar would be confusing and too crowded.
So the proper place of the shift planning is behind the staff from an information architecture perspective. It was the card sorting outcome as well.The calendar has a clear view of the most critical event types to be readily available.
FINAL DESIGN
FURTHER PROPOSALS
💡 — Delegation to Deputy store manager (related permissions)
💡 — Voice note with MS Teams integration
💡 — Prediction for best seller products from web analytics
💡 — AR to visualize store interior design for seasonal launches
IMPACT AND TAKE AWAY
This project outlined the Windows direction of the existing product family. It got great feedback from the management, who engaged in this project. Last but not least, it was a good learning curve for me to apply MS Fluent design principles.
The summary presentation is available here
Thank you for reading this! 🙏
If you want to have a chat about anything design-related I’d love to hear from you! You can also find me on Linkedin or via my Portfolio.
