MOCACARE App Icon Suite Redesign
Intro
A set of well-designed icons not only will efficiently communicate correct information to users, but it will also inject good user experience into the product. Nowadays, a set of well-designed icons is essential to product design.
When I started on this app icon redesign project, I ran into the problem of a tight deadline coupled with a limited workforce. Given these restrictions, I decided to focus on the most frequently used icons first. I also laid down design principles for the MOCACARE App Icon Suite during the redesign process to streamline future work on the icon suite.
Here are the 5 principles that I created for the MOCACARE App Icon Suite:
1. Easy to understand
An app icon should be easily understood by users. The icon’s meaning should be clear to everyone, no matter the age, nationality, or culture of the user. If an icon is too abstract or overly complicated, it becomes useless.
2. Visually simple and unified
The visual design of all the icons should be as simple as possible. Avoid any visual elements that will distract users. Every single visual design decision must contribute to efficiently communicating the correct information to users.
(1) Realistic rendering of two MOCACARE products, (2) previously designed icons for the two products, (3) my redesign. The redesigned icons avoid any visual elements that will distract users.
All icons also need to follow the same visual guidelines. For example, icons should have the same stroke thickness, color, size, ratio, visual language, etc. When the icons appear next to one another, they should look like they belong in the same family.
(1) Previous design, (2) my redesign. The visual design of the redesigned icons are more unified than the previous design.
3. Practical in any situation
Different users will have different screen sizes, use various platforms, and even use the app in different contexts. Well-designed icons should be practical in any scenario.
The redesigned icons are designed to be used in various sizes and in two alternating colors for different scenarios.
4. Sets aside room for adjustments
As the company evolves, the product will inevitably require new features or updates. Well-designed icons should satisfy the needs of current users, but they should also be designed with potential adjustments in mind.
(1) The photo icon and (2) the photo retake icon. As the project evolved, I had to design a photo retake icon (right) that was based on the photo icon (left).
5. Constantly re-evaluates the above principles
The four principles above should be re-evaluated as time passes, in order to satisfy the ever changing needs of the users. If we design icons while following principles from 10 years ago, then icons would be clunky and hard to use. Think back to the first generation iPhone, and now think about the current iPhone X that was released this year. Even though only 10 years have passed, app icon designs have changed drastically. At this speed of change, perhaps users will no longer need app icons in the near future!