This Case Study has been Archived. It’s content is historically relevant, but some content may be out-dated. View the most recent case studies on the Case Studies page.
KPPC 4.0 iPhone – Sign In Screen
Background Information
The KPPC 4.0 iPhone application came to the MCoE Design Team for certification, and we made a number of suggestions to improve the application’s design. This case study will focus on the changes made to the Sign In screen of KPPC.
Shown below is the original Sign In screen design, next to iteration 1 of our revisions.
The intent of the original design was to execute a “frosted glass” look that is common in iOS design. However, the development team did not have time to properly implement the “frosted glass” look, and compromises were made to approximate that same look by using a blurred background image with transparent white overlays. While the “frosted glass” effect is acceptable in KP mobile design, it must be executed with detail and precision. The design compromises made resulted in issues with blurriness and readability. Readability is an ADA and usability issue, and therefore it becomes a priority to fix prior to releasing the application.
To quickly resolve these issues with minimal development time, we recommended to remove the blur on the background image and to re-consider the type treatments that were overlaid on top of the textured background. We also increased the opacity on the white block fields to improve the text readability on top.
While the re-design did improve the look of the Sign In screen, some additional suggestions were uncovered when the design was presented to the KP Branding team. The background image selection came from outside of the KP brand library, and therefore requires brand approval. The brand team saw this image and did not like that the main action of the photo (the bike riders) was out of focus. Due to this, another image was chosen to use in the background. Shown below is iteration 2 and the final version of the Sign In screen:
This image was chosen by one of our design partners from a library from outside of the KP brand center. While we always suggest using photos from the KP brand library whenever possible, it is acceptable to use photos from other sources as long as they are approved by the KP brand team and they are purchased for commercial use.
The new image conveys health and movement. The viewer of the image can imagine themselves riding on the bike, which makes it more personal. This photo has good lighting and it is in sharp focus. The photo is also in an urban setting which helps to contribute to our efforts to appeal to diverse audiences.
While everyone liked the fact that the image takes place in an urban environment, the brand team partners also wanted to introduce a bit of foliage for extra color and to give the image more life. The vines seen in the upper right corner were digitally added to enhance the overall message of health and vitality to the image.
Conclusion
When implementing the “frosted glass” look into an application, attention to detail and extra development time is required. Compromises on a complicated design element like “frosted glass” will often result in designs that require some correction, so it is important to plan for extra design and development time to get the “frosted glass” look implemented correctly.
When using a photo in your design, always check the KP brand image library first. If you cannot find what you are looking for in the KP brand library, it is acceptable to use photos from another source as long as the photo is purchased with a commercial use license and has been approved by the KP brand team.