Starting a Global Cement App
From a local Cement System
The premise
One of the projects I'm most proud of in my career is participating on the creation of the new styling for the apps of Heidelberg Cement.
This company has recently expanded to the north-american territory by acquiring most of the companies in the US and Canada. And by doing that, they have the intention of unifying and upgrading all the apps in a global manner.
The first project that was provided to the development team that I work with, was upgrading and applying an already working app called myCEMENT from an American company called Lehigh Hanson, into an european market through a company called Mebin.
So this was a very good opportunity to take the first approachable piece of product and create a styleguide from there. The original app is not bad, but hey, everything can be improved in this universe.
The Goal
To tackle this project, we decided to go baby steps and create a PoC based on the adaptation of the features Mebin has, and apply them on a whole new expandable React front-end template to use as a base for our foreseeable projects.
The Process
These are the steps of the design that I'll be applying for the moment, as this project is still in progress.
Understand
After reading all the requirements, I found out that we have an already working app that has the current features:
- Login based from an external account creation when the user contacts the company.
- Ability to view and follow-up orders (Image up).
- Create a new cement order, which lets the user add several one-serve and split-serve (Mixed) materials in one sitting (Image down).
And with new functionalities and requirements provided by Mebin's system of apps.
- The ability to see the order in real-time over geolocation.
- Expand the app to Tablets.
- Having the ability to Register as a New User.
- Create a re-usable environment from everything that we create.
- We don't have much time…
By having these main topics, I am able to move on to the next step of the process. But before that, a little bit of empathy:
- How can we be able to reduce steps for the user?
- How can we take advantage of the tablet’s larger screens and usability?
- So if the user is already used to the current app, how can we improve it without "innovating" too much of it?
Research
One of the things I usually have in my mind when I design UI, is that I should be looking at what the people are used to, so to not frustrate them with "innovative" UI that no one understands at first; and the other usual thing that I think of is… reduce steps! By checking Lehigh Hanson's app, I can see that having 6 steps to create a new order, it doesn'’ hurt to try and reduce that.
So to have added functionality and usability, I got inspired by the following topics:
- By reviewing UberEats and Lyft, I was able to identify the way something comes to you in a real-time manner.
- To create a design framework that can be closely related to actual front-end development through Atomic Design. A good example here.
- Less is better, a good design is not having anything else to remove. In this case, my focus is form fields and steps. A good approach on reducing forms in UI here.
Sketch
After researching and having some brainstorming, I came up with some ideas on how to tackle the login/signup process.
The dashboard section with the uber-like features of the delivery of the order.
And then the creation of a new order, in which I considerably reduced the steps to 3 automated pages.
Design
For starters, I created a set of simplified Atomic Design symbols on Sketch, to reuse, update and create a dynamic base for all branding needs.
Then, applying Mebin's branding to the UI to test it was a breeze.
So as for the final results in the Login, we kept it simple with a 1 step form, but having the opportunity to create an account from start too.
And the Signup Process will be easy enough to register in a 2-step account (provided by Mebin to their customers through their website) verification system to register the device and use their own email and password on the system.
The dashboard view for the Uber-like adaptation. Where the user will be capable of reviewing the order, contacting the driver, and following up on the upcoming orders. All this can be monitored via progress bars and percentages.
Also Adding it extra advantage on large screens by splitting the views between the order list, the driver's status and settings to not miss a thing while on tablet. One of the reasons for this freedom of content is because it is normal to be on a less hectic setting while using a tablet (i. e. the sofa, bed, or your desk).
The 3 Step order request form consists of a simple form where the auto-populated order and material modal window will make the user selecting what he needs on less steps along the way.
Next Steps
After having completed this first phase of the project, and now having an InVision demo to work with, we have everything that we need to start making user testing and seeing reactions up close in order to improve this into a fully fledged UI ready for development.
Interactive Demo
See my InVision demo here! (You will be redirected to an epizy site where I host my demos, not to worry, it's clean).
Final thoughts
Designing is an exciting and iterative process where you add and adjust your way of seeing and solving issues. With every design cycle that I go through, empathy grows and I do believe that I become a better person.
And in this case, it is only the beginning, as this will evolve in time to become a better product, like us as designers every time we create.
