top of page
Artboard 26.png

STACK, 

THE ORACLE

UX/UI/Product Design

As part of my Masters on IxD and UX Design, I designed, prototyped and tested a mobile App that would offer a digital version of articles included in the printed magazines sold by the British online shop STACK Magazine Club.

 

RESEARCH   

DIGITAL PUBLISHING RESEARCH 

The market research was focused on ​​culture and fashion magazines such as The Face, Dazed, and The Gentlewoman 

WHAT

UX

UI

DESIGN SYSTEM

PRODUCT DESIGN

INDUSTRY

Digital publishing 

WHEN

2020

INFORMATION ARCHITECTURE ANALYSIS

USER SURVEYS: HOW MUCH AND WHAT DO PEOPLE READ ON THEIR PHONES?

GRAPHS-07.png

PERSONA CREATION

DEFINE AND IDEATE PRODUCT

ABSTRACT

Stack define themselves as a magazine club. They launched their online shop in 2008 and I have always found the concept of the shop very interesting. Users can either purchase single magazines from the website or subscribe for a monthly handpicked magazine-surprise (users pay a monthly fee and get a different independent magazine-surprise delivered to them)

 

Stack. The Oracle would serve as a mobile app to promote Stack Magazine Club, offering a digitized selection of some of the articles from the physical magazines. Stack don’t digitize any of the articles that the user can find in the magazines. The Oracle aims to offer their potential subscribers a digital sample of what they would be getting if they joined the Stack Club, presented in a fun way. It is an app that simultaneously keeps the mystery of the original concept of the online shop while also offering some handpicked digitized articles, presented using various digital media such as video, graphics, audio... 

THE ORACLE 13-09.png

It is both magazine and game. Each article (users get only one article one per day) is randomly selected for the user and presented in the form of a card in an oracle deck. The daily articles are free. With a €6 subscription fee, they can also collect cards and share them online. Subscribers are contacted at the end of the year by a member of The Oracle team and asked to select their 50 favourite cards. These cards are then printed and delivered in a magic box, in the form of an oracle deck. Three surprise issues are also included.

Final high-definition prototype. The video on the left shows all the steps required in the customer journey designed for the usability tests. The video on the right shows the parallax effects designed for the long scrollable article.

 

Due to time restrictions, some screens were not included in this last version such as the subscription and payment screens.

Link to the prototype

Link to parallax effects in the article

USER FLOWS & USE CASES

Screenshot 2021-04-02 at 10.25.39.png
USE CASE-01-01.png

INFORMATION ARCHITECTURE

Screenshot 2021-04-02 at 16.52.33.png

UI AND NAVIGATION PATTERN SOLUTION

As noticed before digital newsstands tend to present content using a common patterns and interactivity. Regardless of whether the magazine is more contemporary or more traditional, users are allowed to either browse through the featured articles and website in general or find specific content via the search bar. Content is organised into categories. There is no gamification, little interactivity and articles are often presented in a linear way.

The product designed for this project aimed to present itself as a challenge to this pattern, introducing both game and promotional aspects. It would work alongside the printed magazines that The Stack sells, rather than trying to substitute them.

Common navigation and display patterns in digital newsstands:

Screenshot%202020-11-21%20at%2018.18_edi

The content on THE FACE might be edgier than the Irish Times but in terms of navigation and interactivity they look very similar and offer a similar experience.

Screenshot%202020-11-21%20at%2018.14_edi
4-navigation-and-search-9-1024.jpg

Grids as a structure on which to place content and Hierarchical Tree Navigation.

Multiple tasks: Browse/Search/Filter

Stack.The Oracle design:

Screenshot 2020-05-04 at 08.49.14.png
4-navigation-and-search-12-638.jpg

Center Stage design pattern and Hub and Spoke navigation pattern.

 

This pattern is better suited in the app due to the task-based approach of the "oracle-newsstand". It helps to minimise distraction and keep the navigation as flat as possible.

Focused on a single task. No browsing/searching available but random selection is made for the user.

 

SKETCHING AND WIREFRAMING

A low fidelity prototype was designed for a first user testing where participants had to follow a specific user journey. They needed to complete a number of tasks and fill in a post-task questionnaire to provide feedback.

Artboard 4 copy 5_1.png

This early prototype was tested remotely with five participants. They were given a link to the prototype and some instructions to follow (user flow) and a link to a questionnaire they completed after using the prototype.

DESIGN ITERATION

Overall, the results were positive and the concept was understood and well-liked. However, a few participants thought it was unclear how to return to the homepage from the article, which was taken on board in the following iteration, among other adjustments that were made and some features that were added.

In the following iteration, a visual identity and design system was also created and implemented.

USER FEEDBACK

Artboard 4 copy 7.png

APPLYING USER FEEDBACK AND CREATING THE HIGH-FIDELITY PROTOTYPE

Prototype-02.png

DESIGN SYSTEM

A funcional minimalist Source Sans Pro font was paired with Mackay, a chunky bold serif font that gives off the almost esoteric tone of the product while keeping it upbeat and friendly.

 

Careful attention was paid to a minimalist but fun and edgy color palette to emphasise the playful aspect of the app. White space was used generously to keep the layouts uncluttered and to balance out the vibrancy of the colours and gradients.

Style Guide2.png
bottom of page