Initial wireframes showcasing the login screen design
The journey of designing My.com’s mobile app began with a simple yet ambitious goal: to create a user experience that was both intuitive and visually compelling. Our team started by sketching the app’s main screens, exploring dozens of variations to find the perfect balance between functionality and aesthetics. The initial wireframes focused on core features such as the login screen, inbox, swipe gestures, letter composition, sidebar navigation, and address book. Each screen was meticulously crafted to ensure seamless interaction and a clean, modern look.
Crafting a Visual Identity
As we delved deeper into the design process, we recognized the growing dominance of flat design in mobile app trends. This style aligned perfectly with the visual language we had already established for the web—characterized by ample whitespace, a vibrant red logo, and sleek outline icons. These elements formed the foundation of a modern iPhone app that was both visually appealing and user-friendly.
Flat design concept with ample whitespace and outline icons
To ensure consistency across My.com’s future portfolio of mobile apps, we applied this style to other potential products. While these were conceptual designs, they demonstrated our commitment to a cohesive and adaptable visual identity.
The iOS7 Challenge
By the end of May, we were proud of our unique approach, which stood out in a sea of similar designs featuring white menu bars and minimal visual styling. However, the announcement of iOS7 on June 10th presented a significant challenge. iOS7 introduced a visual language that closely mirrored our own, particularly for the platform where we planned to launch our first apps.
Conceptual design for My.com’s app portfolio
We explored alternative styling options but ultimately decided to stick with our original vision. This decision was driven by our belief in the clean, modern, and emotionally engaging design we had created. The use of vibrant color accents, lively UI animations, and handwritten-style icons gave our app a distinct personality that resonated with users.
Finalized design with vibrant color accents and lively animations
Attention to Detail
At My.com, we believe that great design lies in the details. Our goal was to create an app that was not only functional but also delightful to use. Every element, from the sidebar to message tools, was designed with the user in mind.
Feature-Rich Sidebar
The sidebar serves as a central hub, providing quick access to folders, accounts, and additional features. Its design ensures that users can navigate the app effortlessly, enhancing their overall experience.
Sidebar design for quick access to app features
Convenient Message Tools
Messages are visually enhanced with attachment previews and sender information, making it easier for users to manage their communications. These small but thoughtful details contribute to a more engaging and efficient user experience.
Enhanced message interface with attachment previews
Engaging User Interactions
We focused on creating interactions that were not only functional but also enjoyable. Mobile design is increasingly moving toward engaging user experiences, and we wanted to lead the way. From tutorials to composing messages, every action was designed to be intuitive and satisfying.
Tutorial interface for user guidance
Compose message interface
Iconography: A Touch of Humanity
To compensate for the minimalist visual style, we infused emotion into the details, particularly through our icon set. The icons were designed to look handwritten, giving them a more human and approachable feel. This approach not only enhanced the app’s visual appeal but also reinforced My.com’s brand identity.
Main UI icon set with handwritten style
In the end, our journey was about more than just design—it was about creating an app that users would love to use. By focusing on innovation, adaptability, and attention to detail, we crafted a mobile experience that stands out in both form and function.