Hi-Viz is a brand that centers on women in construction jobs as its core target audience. As a part of the brand system, a magazine app was developed to bring print media into the hands of users in a digital format. The goal was to create an experience that was accessible, approachable, and solved for pain points found in existing magazine applications.

The Problem

Based on my survey results, people don’t tend to use magazine apps due to a lack of interest, poor design, and a preference for printed materials. Survey data shows that despite a desire for personalized content and interactive experiences, magazine apps aren’t being utilized to meet these interests. Additionally, users hesitate to use magazine apps because the interface is often confusing and difficult to customize. There is an opportunity to address these challenges by designing a magazine app that prioritizes personalized content, interactive elements, and a beginner-friendly design while keeping the experience engaging enough to maintain long-term interest.

The Target Audience

User personas were developed to better understand the user, their goals, and their potential pain points while using the app.

User Flows and Wireframes

A series of user flowers and wireframes were developed for key interactions in the app, including the process of logging in as a current user, signing up as a new user with content customization, and main screens of content like the home page and article pages.

Design Solution

The app demo features the log in and new user customization experience in addition to one article that is interactive. The demo also shows interaction within the explore page and collection page, showcasing how a user might find and save content to their personalized profile.

User Testing and Insights

In general, users found the experience satisfactory while using the demo. Interactions with the cards, scrolling, and overall impressions were good, however the type size and placement needed further refining to account for different types of devices.

In addition, two testers remarked that they’d like to see more movement in the log in screen, and wondered where the loading screen was between the sign-in flow and the home page. These comments would inform the next design/refining phase where smaller flows between sections of the app, micro-interactions, and movement are added.

What I Learned

This demo was developed in Figma and marks my first major jump into product design. The overall process has a lot of overlap with design thinking and opens up a lot of opportunities to expand brand solutions into a digital space.

Motion design was something sorely missed based on the feedback from testers, and I look forward to seeing how it can be incorporated into future projects!