LUCIA
PALACIOS
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?
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...
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.
USER FLOWS & USE CASES
INFORMATION ARCHITECTURE
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:
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.
Grids as a structure on which to place content and Hierarchical Tree Navigation.
Multiple tasks: Browse/Search/Filter
Stack.The Oracle design:
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.
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
APPLYING USER FEEDBACK AND CREATING THE HIGH-FIDELITY PROTOTYPE
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.
