Balancing brand and platform guidelines
In 2018, I was working for Kivuto Solutions, a company specializing in digital asset management and distribution for colleges and universities across the world. When the web version of Texidium, its e-reader application, received a visual refresh, I led the update on all other platforms by conducting an interface inventory and providing design specifications to the development team.
Screenshot of the web application which served as the visual baseline for the update on the other platforms.
Screenshots of the original design on macOS (left) and iOS (right).
On the move
Most students use multiple devices throughout the day, such as a laptop at school and a phone when commuting. Having a similar experience across devices not only strengthens the overall brand presence of the product, it helps them achieve their goal, which is to study.
A balancing act
With the web version acting as a visual baseline for the project, my goal was to create a familiar studying experience across platforms while meeting users’ expectations shaped by standards like Google’s Material Design and Apple’s Human Interface Guidelines.
Visual elements guiding the new version of the application across platforms.
Approach
Using Brad Frost’s Atomic Design Methodology, I captured and categorized screenshots of all contexts and interaction states of the application on each platform. I then named and organized the screenshots so I could more easily highlight visual and behavioral differences.
Screenshots of interface elements across platforms.
Spreadsheet listing interface elements, their implementations or absence across platforms.
Outcome
Once I had a clear vision for how the experience would look and feel on a specific platform, I created a prototype to facilitate discussions with the engineers responsible for the implementation. I often had to adapt patterns rather than replicate them; for example, on iOS, I decided to use alerts or action sheets when needing to present information or suggests actions in a overlaying context instead of relying on custom-made dialogs.
Screenshots of the updated design on iOS, showing the use of native controls: an alert (left), and an action sheet (right).
Screenshots of the updated design on macOS (left) and iOS (right).
Screenshots of the iOS application: original design (left) and updated design (right).
Takeaway
The project helped solidify Texidium’s brand identity across platforms while creating a strong foundation for a more cohesive development process internally. Designing for multiple platforms in parallel encouraged me to create solutions that are flexible enough to suit a variety of contexts, a skill I still use to this day.