- Project Title: Arcanum
- Platform: IOS devices
- Duration: 4 Months
- Design Software: InVision, Procreate, Photoshop
- Development Software: VS Code, Angular, Ionic, xCode
Arcanum is an iOS app I designed, built and submitted as part of my Master’s Major Project in Creative Digital Media and UX Design.
This product is a companion app for beginners and enthusiasts of tarot. Arcanum provides its users with a wealth of tarot knowledge in a clear and concise guide, educating them on the core elements of the practice. Detailed information is provided on how to perform tarot readings, how to interpret a spread and methods of gaining further insight on a reading.
Arcanum also performs a variety of readings, including traditional spreads such as the Celtic Cross. The deck includes 78 new illustrations based on the original Rider-Waite deck, typically used in readings.
Arcanum is available to download on the app store here.
Tarot can be difficult to grasp when starting out. There are endless sources of information on it available online and in bookstores, however these sources can often overcomplicate the practice and turn beginners off tarot entirely. There are numerous decks to choose from, complex connections to astrology and confusing card layouts. It is Arcanum’s aim to provide its users with a structured set of information about tarot and answer the most common questions about the practice, while also performing a mixed selection of new and traditional readings.
Various research methods were carried out on potential users to inform the build and design of Arcanum.
Interviews were carried out on a few individuals to gain further insight on their understanding of tarot and their practice of it. The questions asked were always open ended, encouraging the interviewees to expand on their replies.
Pain points highlighted included:
- Lost cards
- Damaged cards
A quantitative method of research was also carried out, which involved the release of an online survey. The survey gathered responses from a combination of participants who had read tarot before and those who hadn’t. The survey looked at the participant’s understanding of tarot and their interest in the practice itself. It was found that each of the participants had a general interest in tarot, regardless of whether they had done a reading previously or not.
Overall, the participant’s general understanding of tarot was found to be split between reflecting on life and predicting the future. These findings were used to help define the meaning of tarot, as seen in Arcanum’s tarot guide.
The frustrations highlighted by the participants who practice tarot related mostly to the physical nature of the deck. These frustrations included:
- The time it takes to set up a deck
- Having to jump between the reading and look up the definition of each card in their phone/ a book
This section gives an in-depth analysis of identified competitors within the same domain as Arcanum. The competitors identified in this section include Trusted Tarot and Daily Tarot.
Trusted Tarot uses scans of the original Rider-Waite tarot deck to perform readings for their users. The home page includes thirteen spread options for the user to choose from. When the user selects a reading, they are brought to a page which displays the entire seventy-eight card deck, face down. The reading calls on the user to select their cards from the deck for the reading. When the user selects their cards, they flip around. The user can then read the card’s description by tapping on it once.
Overall, the look and feel of Trusted Tarot is inconsistent. The readings display each of the seventy-eight cards in a face down position, which is an interesting approach as it gives the user the opportunity to manually select their own cards. However, this also means that the cards appear incredibly small. This makes seeing them and selecting them awkward and difficult.
Like Trusted Tarot, Daily Tarot uses the original Rider-Waite deck to perform readings for its users. When the app is opened, a home screen with three buttons appears. When the user selects the image of the three cards in the centre of the screen the app moves to its reading page. The user can select a card by dragging it into the bottom half of the screen and find more out about the selected card by clicking on the “Show Result” button.
The opening page of Daily Tarot can be unclear at first, as it isn’t indicated that the three glowing cards at the centre of the page lead to the app’s reading page. On the reading page, the seventy-eight cards are drawn before the user. A space at the bottom of the page calls on the user to select and drag a card to it. As the cards are very small and spread out on top of each other in three lines, it can be difficult to choose a specific card. Also, the select and drag feature is not ideal as the card sometimes slips away from the user and back into the deck.
Overall, what these apps offer is very limited. Trusted Tarot undoubtably offers its users the most features, with a variety of readings to choose from and a section to explore each of the cards and their upright descriptions. However, the experience of each of these apps and their overall design is poorly put together.
As Arcanum is an iOS product, the design requirements of the app need to follow Apple’s Human Interface Guidelines (HIG) for iOS devices. The design principles outlined by Apple’s HIG include:
The design process of Arcanum includes wireframing, the prototype and the design of the assets used in the final artefact.
The wireframes above outline the basic structure of the three navigation tabs and the general display of a tarot card. The navigation tabs include home, readings and library.
Research into traditional reading layouts helped decide how Arcanum’s readings would be designed. A traditional three card reading calls on the reader to shuffle the deck and lay the cards down in a row. However, larger readings with more complex layouts would be more difficult to arrange. As there is limited space on a mobile screen, a ten-card spread such as the Celtic Cross may be difficult for the user to navigate.
As seen in the competitors, Trusted Tarot and Daily Tarot, including more cards on a screen uses up a significant amount of space and makes it difficult to select certain cards.
The above mockups helped conclude that, although a traditional display of the reading may be more familiar, it was not an efficient method of displaying the readings on a device. It was decided that the readings would be displayed side by side, in a carousel, for users to swipe along through a reading.
The prototyping for Arcanum was done using InVision Studio, which proved to be a useful tool in making connections between the screens and UI elements. A simple prototype using scans of the original Rider-Waite deck was explored, however this direction was decided against early on.
The three tabs in the prototype include Home, Readings and Library. The home screen displays a daily reading, Arcanum’s updated twitter tweets and additional content. The readings screen displays a carousel of the reading types. There is also a button which allows the user to browse all of the readings. The library includes a search button for the collection of tarot cards and buttons that lead to additional information on tarot.
The layout for the readings, informed by the research done during the wireframing phase, came together in the prototype. The tarot reading sits in a carousel and a swipe motion moves the reading along. To view the cards description the user needs to scroll down.
Details about practicing tarot, the major arcana and the minor arcana can be accessed through the library tab. Scrolling down the library tab brings the user to a major arcana button and a minor arcana button. Selecting one of these will bring the user to a page with more information on that arcana and a list of the tarot cards included in it.
In summary, the prototype played a huge role in bringing Arcanum to life at such an early stage. It defined the interactions, experience and design of the overall project and it’s clear from looking at the final product, that the prototype’s foundations held strong throughout the project’s development.
Illustrating the deck involved copying the original concept of the image and refining the larger details. Cards that were busy and included a lot of tiny details were simplified as too much information would clutter the image and take away from the overall illustration. The drawings were completed in red (personal preference) with Procreate’s studio pen. The images below include the original Rider-Waite Death card to the left and my red lineart sketch of the same card to the right.
The illustrations were exported to Photoshop, where the borders, text, numbers, colours and gradient backgrounds were added. Adding these details in Photoshop ensured better control over the images and made it easier to spot elements that didn’t match. The cards were sized down and exported in JPG format in their upright and reversed positions to Arcanum’s project folder. Overall, there are 156 tarot cards in the assets folder.
Arcanum’s additional assets were designed with the product’s overall theme in mind. The ion-cards incorporate the designed tarot cards into various patterns against a gradient background. Additional designs use pinks, blues and yellows, taken from the app’s overall theme and are displayed at different opacities. The ion-cards are accompanied by buttons that also follow this theme.
Arcanum was designed for iOS devices and developed with the Ionic and Angular frameworks. Visual Studio Code was used as the primary development environment and XCode was used to test the product in the emulator and on a device. It was also used to submit the artefact to App Store Connect for user testing via Testflight.
First round testing
The first round testing of Arcanum involved a group of individuals testing the product on an iPhone 6s device. The testing involved two moderated testers and three unmoderated testers. Each of the participating users were asked to fill out a survey after the testing session. The testers consisted of 60% of users who had done a tarot reading before, with a remaining 40% who hadn’t.
Pain points highlighted by the testers included:
- Hidden back buttons
- The dark-mode colour scheme was very different to the light-mode colour scheme
The back button issue was directly related to the different colour schemes issue, so solving one solved the other. The default dark-mode colour scheme lines were commented out of the variables.scss file. This guaranteed that the theme will remain the same on every device regardless of its colour mode.
The first round testing successfully highlighted the snags in Arcanum and brought to attention the areas that needed additional work. Overall, the product was well received.
Beta testing for Arcanum involved unmoderated remote usability testing with a number of participants on their own iOS devices. The testers were required to explore the usability of Arcanum and provide feedback in an online survey.
TestFlight was used to share the beta version with testers. TestFlight allowed for easy distribution beyond friends and family, reaching further afield.
Overall, Arcanum was well received with 100% of testers voting that navigating the product was clear. 90.9% of testers found the app to be informative with 72.7% of the testers rating it as very engaging.
As well as rating the navigation, information and engagement of the app, testers were asked to comment on any issues they may have encountered. The issues brought to my attention were minor and simple to fix after some online investigations.
In summary, the feedback gathered from user testing proved to be invaluable as it highlighted the areas that had initially been overlooked. The survey results effectively underlined the most common issues encountered by the testers while also providing positive feedback about the product.
The user research and outlined aims and objectives of this project highlighted the critical success factors of Arcanum. The critical success factors included the qualities of the product that were necessary for it to be a success. These factors included:
Clear, reliable information provided to the user.
An engaging user experience.
Ease of use.
Based on the feedback gathered through the final testing stage, the results of these factors proved to be successful:
In conclusion, Arcanum meets its critical success factors by providing its users with an informative, engaging and intuitive experience. The four month project meets its user goals by being a helpful tarot companion.