WITCHY
Witchy is a project I have done for the Career Foundry UX Design Program, intending to deliver a responsive Web application from early concept all the way to developer-handoff while also illustrating the user-centered design process from start to finish.
Witchy was my first UX project and the beginning of my UX/UI learning journey. That’s also the process of how and why I decided to become a User Experience and Interface Designer -How did I embrace my mistakes, learn from them, and began developing and understanding my passion for human behaviour, inclusivity, and accessibility.
Duration of the Project:
October 2019 — April 2020
Approach: Design Thinking
Tools:
- Adobe XD
- Optimal Workshop
- Usability Hub
- Balsamiq Wireframes
- Google Forms
- Pen and Paper ;)
The Challenge:
I always liked symbolism and its meanings. I am an artist and spent some years painting portraits, using symbols to represent people and myself. After profoundly studying and experimenting with symbols and signs, I understood that tarot is a language of symbols. Due to my interest in this subject and in technology, I knew there is a lack of trustful tarot apps, digital services and websites in the market. The majority has dark patterns and suspicious tarot interpretations.
At CareerFoundry I could choose between different project briefs, and I found one that triggered my desire to increment tarot and technology, an Expert app.
UX IMMERSION COURSE PROJECT BRIEF: Expert
Objective: Enable anyone, anywhere to instantly chat with an expert in virtually any field.
My challenge was to create an application that instantly connects with an expert in the tarot field — a responsive web app with a mobile-first approach.
Design Criteria:
Get Help When You Need it: We’ve all found ourselves in situations where we just need advice or guidance from a professional, but we don’t have any friends or family that fit the bill. This app fills that gap by providing access to a professional in virtually any field.
I assumed that The Design Criteria for an expert app has much in common with why people look for tarot services. Sometimes, they need advice and find their answers in tarot readings. This assumption proved to be right in the very beginning of my user research =)
Discovery Phase:
To define and test my hypothesis, I talked about tarot readings with some tarot enthusiasts and professional readers. All of them agreed that feeling connected with an expert is what makes the experience of reading exciting and useful. After empathizing, chatting/interviewing, and researching this theme, I collected some insights, defined the Potential Problems, a Problem Statement, and described Possible Solutions.
Competitive Analysis:
I wanted to find out the existing approaches that other similar products use to solve problems and their weaknesses from a UX point of view to avoid them in my design. I was also looking forward to identifying underserved market opportunities. I analyzed the six following categories in my competitors. My goal was to find actionable snippets of information that I could use to create a better product.
- Usability
- Layout
- Navigation Structure
- Compatibility
- Differentiation
- Calls To Action (CTA)
I searched the market for tarot experts and found out that there are two relevant apps in the market offering tarot, astrologic readings and “Psychs services,” Kasamba and Fortunica. I wanted to see how they connect users and experts and what users expect when using a tarot reading service.
The information gathered from my competitive analyses helped me to understand the competitor’s strengths, weaknesses, opportunities, and threats.
The competition:
1- Kasamba
What’s good…
Kasamba is a physics network that started in 1999. They have a long reputation for helping people and thousands of reviews on some of their psychic advisors to prove it.
They are an instant messenger app that connects the user with psychics and provides many sorts of esoteric services. The user also can stay anonymous.
SWOT PROFILE:
2- Fortunica
What’s good…
adviqo GmbH develops Fortunica. They are a European company that created a ‘marketplace’ for readings, providing various psychic services that are easy to access, affordable, and take very little of their customer’s time.
Fortunica provides a question answering service where a user can do a public or private question to a psychic.
Similar app, similar SWOT profile:
What’s not good…
Kasamba and Fortunica have similar issues in their navigation. When searching for something in the apps, there are no filters or information about the searching.
Differentiation:
Both applications are relatively easy to use with a simple interface, but it is not clear how users receive their readings. While chatting with tarot enthusiasts and readers, I could understand that psychic services’ main problem is that it sounds a bit suspicious. Many people into tarot do not identify with this kind of product/service/methodology.
Once anyone can read and become a tarot expert, my application would provide this possibility for users and attend the need to read and reflect on tarot with friends. I thought it would be an inclusive and transparent way to sell the services.
User Interviews
At this point in the project, I have gained a better knowledge of the problems that users may encounter and what would potentially frustrate them in real settings. Next, I interviewed some potential users for Witchy and tried to understand and look at things from their perspectives.
I crafted questions based on my analysis of the competition. This stage was crucial because it validated some of my assumptions while prompting various new and more focused questions. I was able to extract valuable information, namely user pain points and goals.
Lastly, I used an affinity map to group my findings into different categories, which led me to the following insights and findings.
Findings:
- People like to reflect with friends about tarot readings.
- People look for tarot readers that can advise them about the tarot symbology. They want not only reading but to understand a bit about the cards.
- People like to associate tarot and astrology. When getting readings, they want to understand what it has to do with their astrological chart.
- My interviewees like to follow tarot readers on social media. They also want to know about tarot card meanings on Instagram, Facebook groups, and Twitter.
- People think the fortune-telling and the concept of Psychic powers are not real and distort the meaning of tarot and astrology.
- Tarot enthusiasts like applications as Co-star, The Pattern (Astrological apps), and Golden Threat Tarot (tarot app).
- Tarot is used is used in moments of a search for a new perspective. People want to identify and trust readers because they feel vulnerable and want to practice self-analysis with someone trustworthy.
Insights:
- Create a tarot software where users can learn card meanings, read cards as an expert, share their spreads with friends, reflect, and learn about their readings with experts and friends.
- The application must have an expert profile with its technics, methods, personalities, and social media links.
- The interface must be simple as Co-star and Golden Thread Tarot. Focused on the card meanings
- The application must also contain the users’ natal chart. Once for many tarot enthusiasts and readers, it adds value to the reading.
- Users must be able to share their readings and astrological charts with friends, experts, and on social media.
- The signup screen must ask their astrological information so that experts can make tarot readings considering their charts.
User Personas:
The information gathered allowed me to narrow in on user’s needs. Creating the following personas helped me empathize with the user’s goals, needs, and frustrations.
Concepting…
The Goal:
To create a tarot astrology community where people can easily connect with trustworthy experts, learn about tarot card meanings and share it with friends.
I decided to craft a simple interface focused on the interaction between the user and the readers (experts).
User Flows:
Once the user personas were complete, I was able to address the user’s needs. I needed to create a site map with a clear and realistic user objective. Next, I created user flows that revolved around the user’s needs and goals. I began accordingly to each user’s possible entry point and ended the flow on achieving the intended user goal.
Wireframes:
I began creating paper sketches, then low, middle, and high fidelity prototypes to get started on the design. I used my primary persona, Bruna, as my North Star in this process.
I wanted the app to be simple while still addressing all user needs and goals. I paid particular attention to my personas’ frustrations to not make the same mistakes as the competitors.
After several iterations, you can observe how the design has changed.
Home/Dashboard:
Search for an Expert:
Usability Test:
My goal for testing my mid-fi prototypes was to see how easily users could complete each task from my user stories throughout the test.
I documented the user’s behaviours and reactions. This allowed me to see what worked and what didn’t. The tests were done remotely moderated and in-person moderated tests over zoom.
You can see some iterations examples on the booking a reading process I did after the usability tests.
Suggested Changes:
- The pop up with a price per minute removed
- lead the user directly to book screen
- A screen to confirm appointment added
- User is asked if they want to visualize the appointment
- Added a way in booking to pre-select how the reading would be (text, audio, video)
Evidence:
- When booking a reading, participants mentioned they would like confirmation and the possibility to see the reading schedule and asking if they are ready to pay.
- The pop-up signalizing prices made participants confuse, giving the idea the reader is prepared to attend. They comment they felt afraid clicking in “booking.” It gave them the idea the reading would start immediately.
- People also commented they like to add appointments to their calendar and receive emails confirming it.
Refinements:
UX and UI design process is getting and implementing feedback. You can see below how the app has progressed in different interactions. The next step in this process would be to continue to collect and implement feedback during the development of the application.
Test Findings & Solutions
During the usability test, my possible users pointed out that my prototype was too raw and without personality. I thought using black, red, and white would be a great solution to bring some character to the app without affecting its minimal style. I asked some interviewees what they think about the colors, and they mentioned it was cool but referred to apps like Netflix and youtube.
I got it, and when trying to change the saturation of the colors, I realized that red could be a bit too close to pink in contrast with the grey background; this brings a childish and female impression I would like to avoid. Witchy is a tarot application that has a technological and minimalistic approach. Its target audience has no defined gender. The tarot already has many colors and symbols. To avoid confusion and keep simple and visually appealing, I decided to use fewer colors as possible and keep a monochromatic color palette with white backgrounds and black buttons.
The design for accessibility made me understand the possible user’s limitations and integrate strategies that make it useful for all. I added an input label to tell the user what sort of information they’re expected to enter and change each text’s color inside the inputs to black #000000, making it is easier to read the texts.
To avoid that user forgets to input information or perhaps inputs incorrect information, WITCHY now provides an error prompt to let users know. When signalizing error, each input box is also marked with an asterisk and text explaining something went wrong to help people with visual Impairments identify it.
My first onboarding Prototype has no intro screen. I was focused on thinking about how to present each feature in a way that the user can skip jumping straight into the app after logging in. This screen calls my attention to how every detail is crucial in developing an intuitive application. The intro is the first screen a new user will visualize.
After the usability test and many color experiments, as I explained before. The design collaboration made clear to me that the word “next” and progress icons were unnecessary. I took the progress circles out and made the link a little bigger with a font size of 20 for better visualization.
The last iteration I did was to change the link color to a darker grey; Although I understand that the color red can be used to signalize messages and notifications, it can make some users confused and afraid to click on the link.
Retrospective
What went well:
Testing my prototypes early in the design process made me achieve a final design that attends to user goals and needs.
- Skills: User testing, prototyping, wireframing, interactive design
- Process: User-centered design
- Solution: Iterate, repeat.
What didn’t went well:
Witchy was my first UX project. I spent a lot of time learning alone so its interface is not so well designed. Because the course’s focus was to construct an expert application, many details that make Witchy a unique product were not possible to research and test as people want to be a reader and their flows.
- Skills: Adobe xd, writing study cases, iterating, attention to detail, learning focus.
- Process: prioritizing, learning, quality, polishing design.
- Solution: Break the project into time blocks to better manage workload and better manage my time setting deadlines.
What can be improved:
User interface. I believe witchy is an exciting product. Its user interface can be enhanced now (almost one year after i finished this project) once I developed my user interface and experience skills throughout other bootcamps and one year of investments in learning UXUI Design.
- Skills: Figma, prototyping, visual design, video, and presentations.
- Process: Using Figma to illustrate my process, prototype, present.
- Solution: Reprototype Witchy on Figma and test it =)
