LUCIA
PALACIOS
STACK,
THE ORACLE
UX/UI/Product Design
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?
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.
INFORMATION ARCHITECTURE
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.
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
APPLYING USER FEEDBACK AND CREATING THE HIGH FIDELITY PROTOTYPE
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.
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:
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.
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.