I was the interaction designer and front-end developer for the Americold i-3PL dashboard. My responsibility was working with our lead designer and full-stack developer to create hi-fidelity and stack mockups to bridge the gap between supply chain management and technology. We built a dashboard that allows the user to see the KPIs and claims for different facilities. Americold also wanted a Native mobile app for iOS and Android to ensure that users are able to view their supply chain information when they are on the go. For the mobile app, I was responsible for the interface design.
Our first step in creating the new dashboard was to meet the Americold team here in Atlanta. During our meeting they gave us a demo of their current dashboard. The information in the original dashboard was very hard to read, highlighting information in red and not intuitive enough to know what is what. Our Principle Designer was able to create the wireframes after talking to the client about their needs and goals. Their goals were:
After the general ideas in the wireframes were developed, I began the process of creating the hi-fidelity mockups, making small changes to the layout after discussing different ideas with the lead designer. I wanted to ensure that the site was clean without it looking sterile. I also wanted to create a branding that allows for the site to similarity to the colors that already exist within Americold's brand. I thought that their orange would be too vibrant for small text or for a main color on the cards, so instead it was used as a h1 color and a highlight for buttons, and selected information in the side navigation. The teal blue is being used for card titles as well as top navigation. Most of the text is a dark grey, which is easier to read on a white background. I then presented the designs we created to the clients, which received very wonderful praise. After getting the mockups approved, I moved on to making static pages in HTML5 & CSS, using Material Design for the cards and navigation code.
After presenting the static pages and passing the code to the developing team, I thought I was finished with my portion of the project. I was in the middle of saying my thank you's to the developer when he stopped me mid-sentence and says "They want a Native app. Do you know anything about designing Native Apps?" I thought back to when I took a public speaking course and had to give a talk about native apps as practice... That was the only time I've ever even spoken about them. Luckily, after doing some research into how native apps were built, I learned how to design for them. We decided that we should make an app for both the Android and Apple marketplaces. I began designing for iOS since it has far more design restrictions and requirements. I researched Apple Interface Guidelines and used their recommendations for sizing of text and fonts.
For the Android version of the app, I researched Android's Design Guidelines and used the elements that would make it distinct to Android's look. The primary goal when designing the Android version was to ensure that it had the similar layout as the iOS version so that both users can have a similar experience.
After finishing the designs for the mobile, I wanted to leave the developer and the client with some design guidelines in case they ever wanted to expand on the project. I wanted this branding guide, which was a short 3 pages, to be something that is informative of the branding used on the desktop and mobile platform but is also something that is well thought-out and beautiful.
Overall, this project was one that I learned a lot from. It was my first native cross-platform design. It was also a project that allowed me space to explore more creative ways of laying out your standard branding guide.
