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.

Stack. The Oracle is magazine and game. It is digital but offers printed collectable cards. It is a magazine in the form of a digital oracle deck.  

 

RESEARCH AND EMPATHY  

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 INTERVIEWS: 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.

INFORMATION ARCHITECTURE

info_architecture -10.png

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.

1_Open the app

2_Find the information icon, click to see information. Close the information box.

3_Shuffle, and see the article. You don’t need to read everything in the article if you don’t want to. Just have a quick look (and again, bear in mind there is no interactivity just yet, but it will be added (some motion and more pictures)

4_Scroll to reach the button and pick the save option. 

5_Go back to the home page. 

6_You can either keep browsing if you want to explore other sections or just quit the app here. 

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.

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.

DESIGN ITERATION

USER FEEDBACK

Artboard 4 copy 7.png

APPLYING USER FEEDBACK AND CREATING THE HIGH FIDELITY PROTOTYPE

Artboard 4 copy 5_2.png

DESIGN ITERATION II

A second user test was carried out with three more participants. In this design iteration I made the customer journey more concise. These are the tasks that will be given to the new participants:

 

1_Open the app

2_Visit the  “About” page

4_Shuffle.

5_Tap to see your card

6_Tap again to flip it over and see the article. . It’s a nice article, but you don’t need to read it all if you don’t want to, just scan through it. Bear in mind there is no interactivity just yet, (audio clips or galleries don’t work at the moment)

7_ Scroll to the bottom and return to the homepage.

Based one the results some adjustments were made and some features were added. Here are some of examples:

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

UI & IxD PATTERNS AND STYLE

CHALLENGING A PERVASIVE GRID PATTERN AND A BROWSING/SEARCHING TYPE OF EXPERIENCE

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.

 

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