Texidium by Kivuto logo overlaid on a photo of a young woman wearing headphones and using a smartphone while riding public transit.
Texidium by Kivuto logo overlaid on a photo of a young woman wearing headphones and using a smartphone while riding public transit.
Texidium by Kivuto logo overlaid on a photo of a young woman wearing headphones and using a smartphone while riding public transit.
Texidium by Kivuto logo overlaid on a photo of a young woman wearing headphones and using a smartphone while riding public transit.
Texidium by Kivuto logo overlaid on a photo of a young woman wearing headphones and using a smartphone while riding public transit.

Between 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 their e-reader application, Texidium, received a visual refresh, I facilitated the update on all other platforms by conducting an interface and providing design specifications to the development team.

Screenshot of the Texidium web application showing the library page. A the top, a teal header with the Texidium logo, user avatar, and language selector; below it a dark toolbar labeled Grid View with two filters; and a white content area with eight document cards, three with cover thumbnails and five grey placeholders, each card displaying an info icon and some a warning symbol.

Screenshot of the web application which served as the visual baseline for the update on the other platforms.

Screenshot of the Texidium web application showing the library page. A the top, a teal header with the Texidium logo, user avatar, and language selector; below it a dark toolbar labeled Grid View with two filters; and a white content area with eight document cards, three with cover thumbnails and five grey placeholders, each card displaying an info icon and some a warning symbol.

Screenshot of the web application which served as the visual baseline for the update on the other platforms.

Screenshot of the Texidium web application showing the library page. A the top, a teal header with the Texidium logo, user avatar, and language selector; below it a dark toolbar labeled Grid View with two filters; and a white content area with eight document cards, three with cover thumbnails and five grey placeholders, each card displaying an info icon and some a warning symbol.

Screenshot of the web application which served as the visual baseline for the update on the other platforms.

Screenshot of the Texidium web application showing the library page. A the top, a teal header with the Texidium logo, user avatar, and language selector; below it a dark toolbar labeled Grid View with two filters; and a white content area with eight document cards, three with cover thumbnails and five grey placeholders, each card displaying an info icon and some a warning symbol.

Screenshot of the web application which served as the visual baseline for the update on the other platforms.

Composite screenshot of the original Texidium interfaces: on the left, a macOS window titled 'Texidium' with dropdowns for 'All Collections', 'All Books', and 'Title' filters, view-mode icons, and a vertical list of four books each with thumbnail and info icon; on the right, the iOS interface showing the reader with grey header icons, chapter text on complex numbers with a green highlight, and a bottom navigation bar labeled 'Chapter 16 Complex Numbers' and 'Page 586.'

Screenshots of the original design on macOS (left) and iOS (right).

Composite screenshot of the original Texidium interfaces: on the left, a macOS window titled 'Texidium' with dropdowns for 'All Collections', 'All Books', and 'Title' filters, view-mode icons, and a vertical list of four books each with thumbnail and info icon; on the right, the iOS interface showing the reader with grey header icons, chapter text on complex numbers with a green highlight, and a bottom navigation bar labeled 'Chapter 16 Complex Numbers' and 'Page 586.'

Screenshots of the original design on macOS (left) and iOS (right).

Composite screenshot of the original Texidium interfaces: on the left, a macOS window titled 'Texidium' with dropdowns for 'All Collections', 'All Books', and 'Title' filters, view-mode icons, and a vertical list of four books each with thumbnail and info icon; on the right, the iOS interface showing the reader with grey header icons, chapter text on complex numbers with a green highlight, and a bottom navigation bar labeled 'Chapter 16 Complex Numbers' and 'Page 586.'

Screenshots of the original design on macOS (left) and iOS (right).

Composite screenshot of the original Texidium interfaces: on the left, a macOS window titled 'Texidium' with dropdowns for 'All Collections', 'All Books', and 'Title' filters, view-mode icons, and a vertical list of four books each with thumbnail and info icon; on the right, the iOS interface showing the reader with grey header icons, chapter text on complex numbers with a green highlight, and a bottom navigation bar labeled 'Chapter 16 Complex Numbers' and 'Page 586.'

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.

Side-by-side photographs of two people using Texidium: left image shows a young man wearing over-ear headphones working on a laptop at a table in a bright public space with shelves and windows behind; right image shows a young woman wearing red headphones and a knit beanie standing inside a train, holding an overhead hand strap in one hand and reading on her smartphone.
Side-by-side photographs of two people using Texidium: left image shows a young man wearing over-ear headphones working on a laptop at a table in a bright public space with shelves and windows behind; right image shows a young woman wearing red headphones and a knit beanie standing inside a train, holding an overhead hand strap in one hand and reading on her smartphone.
Side-by-side photographs of two people using Texidium: left image shows a young man wearing over-ear headphones working on a laptop at a table in a bright public space with shelves and windows behind; right image shows a young woman wearing red headphones and a knit beanie standing inside a train, holding an overhead hand strap in one hand and reading on her smartphone.
Side-by-side photographs of two people using Texidium: left image shows a young man wearing over-ear headphones working on a laptop at a table in a bright public space with shelves and windows behind; right image shows a young woman wearing red headphones and a knit beanie standing inside a train, holding an overhead hand strap in one hand and reading on her smartphone.

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.

Two-panel brand overview: left panel is a solid teal background displaying the white Texidium logo (a stylized 'T' in a circle); right panel is white with the heading 'Proxima Nova' above a row of icons (search, list, bookmark, edit, and history) and a row of color swatches in red, teal, slate, and white.

Visual elements guiding the new version of the application across platforms.

Two-panel brand overview: left panel is a solid teal background displaying the white Texidium logo (a stylized 'T' in a circle); right panel is white with the heading 'Proxima Nova' above a row of icons (search, list, bookmark, edit, and history) and a row of color swatches in red, teal, slate, and white.

Visual elements guiding the new version of the application across platforms.

Two-panel brand overview: left panel is a solid teal background displaying the white Texidium logo (a stylized 'T' in a circle); right panel is white with the heading 'Proxima Nova' above a row of icons (search, list, bookmark, edit, and history) and a row of color swatches in red, teal, slate, and white.

Visual elements guiding the new version of the application across platforms.

Two-panel brand overview: left panel is a solid teal background displaying the white Texidium logo (a stylized 'T' in a circle); right panel is white with the heading 'Proxima Nova' above a row of icons (search, list, bookmark, edit, and history) and a row of color swatches in red, teal, slate, and white.

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.

Collage of Texidium interface components: a large green button with 'Sign In' label in uppercase; a grey button with 'Restore defaults' label in uppercase; a subscription-code panel reading 'Subscription Code: GBBNCJVW'; a book cover thumbnail for 'A History of England' with a cloud download icon and progress bar; dropdown menus labeled 'All Sections' and 'All Categories'; a rotate-screen icon; a black banner stating 'Password is required'; a highlight-category sharing panel with checkboxes for 'Critical', 'General', 'Important', 'Review' and a 'Subscription Code' field; a font-and-navigation controls panel with 'A–' and 'A+' buttons, page-layout icons, read-aloud slider, and 'Restore Defaults' button; red 'Expired' badges; a collections filter dropdown listing 'All Books', 'In the Cloud', 'On this Device', 'Expiring Soon'; a green segmented control with 'My Categories' and 'My Subscriptions' tabs; and a download progress bar reading '0 MB / 192 MB' with a close icon.

Screenshots of interface elements across platforms.

Collage of Texidium interface components: a large green button with 'Sign In' label in uppercase; a grey button with 'Restore defaults' label in uppercase; a subscription-code panel reading 'Subscription Code: GBBNCJVW'; a book cover thumbnail for 'A History of England' with a cloud download icon and progress bar; dropdown menus labeled 'All Sections' and 'All Categories'; a rotate-screen icon; a black banner stating 'Password is required'; a highlight-category sharing panel with checkboxes for 'Critical', 'General', 'Important', 'Review' and a 'Subscription Code' field; a font-and-navigation controls panel with 'A–' and 'A+' buttons, page-layout icons, read-aloud slider, and 'Restore Defaults' button; red 'Expired' badges; a collections filter dropdown listing 'All Books', 'In the Cloud', 'On this Device', 'Expiring Soon'; a green segmented control with 'My Categories' and 'My Subscriptions' tabs; and a download progress bar reading '0 MB / 192 MB' with a close icon.

Screenshots of interface elements across platforms.

Collage of Texidium interface components: a large green button with 'Sign In' label in uppercase; a grey button with 'Restore defaults' label in uppercase; a subscription-code panel reading 'Subscription Code: GBBNCJVW'; a book cover thumbnail for 'A History of England' with a cloud download icon and progress bar; dropdown menus labeled 'All Sections' and 'All Categories'; a rotate-screen icon; a black banner stating 'Password is required'; a highlight-category sharing panel with checkboxes for 'Critical', 'General', 'Important', 'Review' and a 'Subscription Code' field; a font-and-navigation controls panel with 'A–' and 'A+' buttons, page-layout icons, read-aloud slider, and 'Restore Defaults' button; red 'Expired' badges; a collections filter dropdown listing 'All Books', 'In the Cloud', 'On this Device', 'Expiring Soon'; a green segmented control with 'My Categories' and 'My Subscriptions' tabs; and a download progress bar reading '0 MB / 192 MB' with a close icon.

Screenshots of interface elements across platforms.

Collage of Texidium interface components: a large green button with 'Sign In' label in uppercase; a grey button with 'Restore defaults' label in uppercase; a subscription-code panel reading 'Subscription Code: GBBNCJVW'; a book cover thumbnail for 'A History of England' with a cloud download icon and progress bar; dropdown menus labeled 'All Sections' and 'All Categories'; a rotate-screen icon; a black banner stating 'Password is required'; a highlight-category sharing panel with checkboxes for 'Critical', 'General', 'Important', 'Review' and a 'Subscription Code' field; a font-and-navigation controls panel with 'A–' and 'A+' buttons, page-layout icons, read-aloud slider, and 'Restore Defaults' button; red 'Expired' badges; a collections filter dropdown listing 'All Books', 'In the Cloud', 'On this Device', 'Expiring Soon'; a green segmented control with 'My Categories' and 'My Subscriptions' tabs; and a download progress bar reading '0 MB / 192 MB' with a close icon.

Screenshots of interface elements across platforms.

Screenshot of a spreadsheet listing application contexts and interface patterns across platforms: column A titled 'Screens' lists entries like '001_splash-screen', '002_login', '003_about', etc.; columns B–G labeled 'Android', 'iOS', 'Browser (M)', 'Browser (D)', 'Windows', 'macOS' show values such as 'x', 'None', 'Popover', 'Dialog', 'External link', and 'Left side bar'; filter dropdown icons appear in each column header.

Spreadsheet listing interface elements, their implementations or absence across platforms.

Screenshot of a spreadsheet listing application contexts and interface patterns across platforms: column A titled 'Screens' lists entries like '001_splash-screen', '002_login', '003_about', etc.; columns B–G labeled 'Android', 'iOS', 'Browser (M)', 'Browser (D)', 'Windows', 'macOS' show values such as 'x', 'None', 'Popover', 'Dialog', 'External link', and 'Left side bar'; filter dropdown icons appear in each column header.

Spreadsheet listing interface elements, their implementations or absence across platforms.

Screenshot of a spreadsheet listing application contexts and interface patterns across platforms: column A titled 'Screens' lists entries like '001_splash-screen', '002_login', '003_about', etc.; columns B–G labeled 'Android', 'iOS', 'Browser (M)', 'Browser (D)', 'Windows', 'macOS' show values such as 'x', 'None', 'Popover', 'Dialog', 'External link', and 'Left side bar'; filter dropdown icons appear in each column header.

Spreadsheet listing interface elements, their implementations or absence across platforms.

Screenshot of a spreadsheet listing application contexts and interface patterns across platforms: column A titled 'Screens' lists entries like '001_splash-screen', '002_login', '003_about', etc.; columns B–G labeled 'Android', 'iOS', 'Browser (M)', 'Browser (D)', 'Windows', 'macOS' show values such as 'x', 'None', 'Popover', 'Dialog', 'External link', and 'Left side bar'; filter dropdown icons appear in each column header.

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 engineer 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.

Side-by-side mockups of native iOS components: left screenshot shows library view with teal header, book tiles, and a translucent alert titled 'Expiring' explaining free access ending on October 13 with bold dates and an 'OK' button; right screenshot shows reader view with teal header, side-by-side sections and categories dropdowns, and a system action sheet offering 'Copy highlights to clipboard' and 'Cancel' at the bottom.

Screenshots of the updated design on iOS, showing the use of native controls: an alert (left), and an action sheet (right).

Side-by-side mockups of native iOS components: left screenshot shows library view with teal header, book tiles, and a translucent alert titled 'Expiring' explaining free access ending on October 13 with bold dates and an 'OK' button; right screenshot shows reader view with teal header, side-by-side sections and categories dropdowns, and a system action sheet offering 'Copy highlights to clipboard' and 'Cancel' at the bottom.

Screenshots of the updated design on iOS, showing the use of native controls: an alert (left), and an action sheet (right).

Side-by-side mockups of native iOS components: left screenshot shows library view with teal header, book tiles, and a translucent alert titled 'Expiring' explaining free access ending on October 13 with bold dates and an 'OK' button; right screenshot shows reader view with teal header, side-by-side sections and categories dropdowns, and a system action sheet offering 'Copy highlights to clipboard' and 'Cancel' at the bottom.

Screenshots of the updated design on iOS, showing the use of native controls: an alert (left), and an action sheet (right).

Side-by-side mockups of native iOS components: left screenshot shows library view with teal header, book tiles, and a translucent alert titled 'Expiring' explaining free access ending on October 13 with bold dates and an 'OK' button; right screenshot shows reader view with teal header, side-by-side sections and categories dropdowns, and a system action sheet offering 'Copy highlights to clipboard' and 'Cancel' at the bottom.

Screenshots of the updated design on iOS, showing the use of native controls: an alert (left), and an action sheet (right).

Composite screenshot of the redesigned Texidium interfaces: on the left, the macOS interface. Under a teal window header and dark toolbar shows three book cards each with cover image, publisher and date details, and a red badge reading 'Expires in 12 days' or 'Expired'; on the right, the iOS interface with teal header labeled 'Back to library', yellow highlighted text under 'War and Diplomacy,' a floating action bar with edit and highlight icons, and a green footer displaying chapter and page information.

Screenshots of the updated design on macOS (left) and iOS (right).

Composite screenshot of the redesigned Texidium interfaces: on the left, the macOS interface. Under a teal window header and dark toolbar shows three book cards each with cover image, publisher and date details, and a red badge reading 'Expires in 12 days' or 'Expired'; on the right, the iOS interface with teal header labeled 'Back to library', yellow highlighted text under 'War and Diplomacy,' a floating action bar with edit and highlight icons, and a green footer displaying chapter and page information.

Screenshots of the updated design on macOS (left) and iOS (right).

Composite screenshot of the redesigned Texidium interfaces: on the left, the macOS interface. Under a teal window header and dark toolbar shows three book cards each with cover image, publisher and date details, and a red badge reading 'Expires in 12 days' or 'Expired'; on the right, the iOS interface with teal header labeled 'Back to library', yellow highlighted text under 'War and Diplomacy,' a floating action bar with edit and highlight icons, and a green footer displaying chapter and page information.

Screenshots of the updated design on macOS (left) and iOS (right).

Composite screenshot of the redesigned Texidium interfaces: on the left, the macOS interface. Under a teal window header and dark toolbar shows three book cards each with cover image, publisher and date details, and a red badge reading 'Expires in 12 days' or 'Expired'; on the right, the iOS interface with teal header labeled 'Back to library', yellow highlighted text under 'War and Diplomacy,' a floating action bar with edit and highlight icons, and a green footer displaying chapter and page information.

Screenshots of the updated design on macOS (left) and iOS (right).

Side-by-side comparison of the original and new design of the Texidium iOS application: on the left, the legacy reader shows a grey header with home and navigation icons above chapter text on complex numbers, a highlighted sentence in green, and a bottom navigation bar reading 'Chapter 16 Complex Numbers' and 'Page 586'; on the right, the redesigned reader features a teal header labeled Back to library, white content area with highlighted text under 'War and Diplomacy,' a floating action bar with cut, copy, delete, and highlight icons, and a green footer reading 'Chapter 10 – War and Reformation: 1509-1547' and 'Page 365.'

Screenshots of the iOS application: original design (left) and updated design (right).

Side-by-side comparison of the original and new design of the Texidium iOS application: on the left, the legacy reader shows a grey header with home and navigation icons above chapter text on complex numbers, a highlighted sentence in green, and a bottom navigation bar reading 'Chapter 16 Complex Numbers' and 'Page 586'; on the right, the redesigned reader features a teal header labeled Back to library, white content area with highlighted text under 'War and Diplomacy,' a floating action bar with cut, copy, delete, and highlight icons, and a green footer reading 'Chapter 10 – War and Reformation: 1509-1547' and 'Page 365.'

Screenshots of the iOS application: original design (left) and updated design (right).

Side-by-side comparison of the original and new design of the Texidium iOS application: on the left, the legacy reader shows a grey header with home and navigation icons above chapter text on complex numbers, a highlighted sentence in green, and a bottom navigation bar reading 'Chapter 16 Complex Numbers' and 'Page 586'; on the right, the redesigned reader features a teal header labeled Back to library, white content area with highlighted text under 'War and Diplomacy,' a floating action bar with cut, copy, delete, and highlight icons, and a green footer reading 'Chapter 10 – War and Reformation: 1509-1547' and 'Page 365.'

Screenshots of the iOS application: original design (left) and updated design (right).

Side-by-side comparison of the original and new design of the Texidium iOS application: on the left, the legacy reader shows a grey header with home and navigation icons above chapter text on complex numbers, a highlighted sentence in green, and a bottom navigation bar reading 'Chapter 16 Complex Numbers' and 'Page 586'; on the right, the redesigned reader features a teal header labeled Back to library, white content area with highlighted text under 'War and Diplomacy,' a floating action bar with cut, copy, delete, and highlight icons, and a green footer reading 'Chapter 10 – War and Reformation: 1509-1547' and 'Page 365.'

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.