ui & ux

Digital Cat Magazine

Roles

Designer Content writer

Tools

Adobe XD

Summary

I took a print magazine that I designed and converted it into a mobile app while keeping the content the same, paying close attention to accessibility, usability, and interactivity. The user I was designing for was someone who wants to learn more in-depth information about cats in an understandable format.

I had to problem solve to determine how to best transfer the print magazine (which had a lot of space available) to a mobile app (where horizontal space was at a premium).

Mockup of homepage of mobile cat magazine displayed on a phone

The situation

I took a magazine that I designed previously and converted it into a mobile app while keeping the content the same and paying close attention to accessibility, usability, and interactivity. The user I was designing the mobile UI for was someone who wants to learn more in-depth information about cats in an understandable format.

User persona

I created a user persona that shows the intended reader of my digital magazine.

User persona for mobile cat magazine

The design process

Design decisions

The infographic I designed for the print version of my cat magazine

My print magazine infographic

The infographic I designed for the mobile version of my cat magazine

My mobile infographic

The image grid I designed for the print version of my cat magazine

My print version of an image grid

My mobile version of the image grid

Outcome

I turned a print magazine I designed into a mobile prototype while keeping all the content the same.

Lessons learned

Content across different mediums

Final design

View video below to see full design. If YouTube embed doesn't work, click here to view the video.

View other projects