Role in the team

As the only designer on this team (the other three were developers and we had an extra help from a strategist) I directed the project in terms of UX and UI, working closely with the developers in what could be considered as much “Agile” as possible. Since it was a high level MVP - to be created in the timeframe of a week and a half - the focus was on speed. We approached it with a “hackathon” style, meaning everything was decided on the go and done on the fly.

Challenge

Build an MVP for a Microsoft Surface tablet app that results from gathering and mapping of a great amount of features into an intuitive and easy to navigate dashboard, while creating and keeping a consistent visual language that lives inbetween the Microsoft guidelines and the fictional brand that serves as a placeholder for the final client’s branding.

Research

Since a lot of research had already been done when I joined the project and the time was short I dived straight into analysing the data so that we could advance into listing the most common pains, prioritising them and then finding possible solutions. It was a fun process to do this so fast. Of course expectations need to be well managed with such a deadline.

We all knew we were just creating a starting point that would be built, on the future, by feedback from proper users on the field. I kept an “Agile” approach as much as possible. It was something I requested from the moment I started on the project: I was to move from my desk to a temporary place close to the developers, we were to have scrums everyday, and there wouldn’t be any deliverables - instead we would be “prototype-focused”. We would start with some digital wireframes or early mockups and the developers would pick them up and start building the prototype with it. If the developer would find a problem we would discuss it in the moment and solve it.

On my side if I would identify issues or questions while developing the UI we would discuss it in the moment and find a solution together as well. I would pass the assets as SVGs, the UI structure as guidelines and even the colour palette was created by me using the code structure provided by the developers.

Home Screen

Most users - that is store managers - will use the app on the go, as they stroll around the store or even at home. As such sometimes they just need a glance at a high level perspective of what is going on, instead of wasting time diving into content that is not relevant in the context. After having that overall perspective they may then decide which screen to navigate into in order to see more detail, updates, make some decisions, perform some operations, send internal messages, emails, etc.

Cash Flow Screen

This screen allows managers to understand how the store his performing financially. Not only in different time frames (from daily to yearly) but also with “easy to setup” com- parisons between those time frames, between their goals and with other stores. They can even go down into a very granular level, checking how each product is performing on that day. On the go. Anywhere. In real time.

Stock Management Screen

Managing stock can be incredibly complex due to the amount of different characteristics of each type of product. On top of that the sales for each product may perform differently, sometimes with very hard to predict patterns. Having a visual based centralised tool to control stock in an effective way addresses one of the biggest issues that retail has and that most retail managers fear to lose control over.

The navigation and the highlights using colour coding allow the manager to have a quick look at what is happening and to dive fast into the details of each product where they can perform contextrelated actions (i.e. automatically ordering more stock, setting the product to be posi- tioned in a different place or creating a promotion to sell a product faster).

Windows 10

We focused on developing the app for Windows 10 although we still didn’t had as much documentation available at the time as we all wished. Nevertheless, although not perfect, one can understand and actually admire what Microsoft is doing with it’s visual approach, it’s unified UI design, it’s patterns and guidelines. Although many ignore Microsoft in this sense a lot of interesting stuff is happening , design wise, on their side. There is still a long way to go I suppose, but I did enjoyed working, building and testing in this ecosystem.

Notifications

Key frames showcasing the notification system. Notice that, once again, it follows the pattern of going from a macro perspective to a more granular one, where the user can i.e. assign contextual tasks to members of his staff.

Windows 10 Responsive behaviour

One of the most interest things coming with Win10 is the concept of how app’s responsive behaviour is supposed to be part of their core. As a designer who strives to apply concepts like "mobile first", "responsive design", "style tiles" and other systematisation methodologies I can't help getting a bit excited with this approach. I decided to create a quick animation just to showcase to the team how this responsive behaviour may affect the UI in different platforms (or just how it affects it by resizing the app in a desktop or Surface device). It is based on:"Getting ready for Windows 10" by Jay Bennett.