Objective

ConstructConnect added mobile apps to pair and complement with two of its online services. The request was to design app icons for our series of mobile applications and display relevant screenshots promoting the app within the app store listings.

Challenges

• Differentiate multiple app store listings with similar names and functions.

• Cater promotion to primary audience that the apps are designed for.

• Represent functionality of application without sharing confidential or secure information. 

Achievements

ConstructConnect’s expansion of their product line into mobile applications was an important step for the business. Two initial applications shared a unified database, but functionality and login credentials were not shared. The process included exploration for additional theorized mobile apps for future efforts. The color systems used for the icons became part of the visual identities for the product experience within the apps. 

EXPLORATION

The branding component of the mobile applications was very important to get “right”. This was the company’s first mobile app store listing and out of the gate they were going to launch two, with the prospect of adding others in the future. It was important to consider the system we were establishing with several apps under the same developer that would be similar in nature, but catered to different product offerings and different audiences.

PRESENTATION

Collaboration with the product team and UX team dedicated to the mobile application was crucial for success of this project. After getting the icons to an agreed point, we presented together in a pitch to senior leaders within the business in an attempt to expand on our brand awareness through unique icons dedicated to the functions of the mobile applications. The first two listed would be the flagship applications, but P.A.M (Project Asset Manager) and the Bid Management application were potential future applications.

REFINEMENT

Ultimately it was decided to retain the corporate mark in these applications to add awareness of the parent company. The differentiation focused more on the color systems and text treatment within the icon. Now that a concept was approved, we had some final adjustments to refine the typography and appearance of the rendered app icon.

MOCKS

To get leadership approval of the system it was important to look at the icons in their final state. Using Invision we presented mockups of the app store listing and how the app icons would look on the iPhone before spending too much time on development.

PRODUCTION

Both of the apps launching required a series of screenshot renders to showcase the applications functions and benefits when considering to download. Using device mockups and carrying the color system throughout the layout we created a series of screens to represent the value of the app. After designing and getting approval on the iOS listing we needed to adapt the screens for usage on the Google Play store for android devices. The designs were kept consistent, but utilized an android device for authenticity. There was also a number of edits to the captured screenshots to ensure there was no privacy issues with the data coming out of our live apps.