Science of Spirituality

Designing a mobile-first, responsive book and media store for a global non-profit

Screenshots of SOS Media Store Mobile Website

Project type

Freelance

Team

Project Manager
UX Researcher
Developers
Stakeholders

My role

Heuristic Evaluation
User Research
UX/UI Design
Prototyping

Tools

Figma
Fig Jam

Duration

4 week design sprint

View Interactive Prototype →

Overview

Background

Science of Spirituality (SOS) is a worldwide, nonprofit organization dedicated to transforming lives through meditation. SOS presents spirituality as a science that can be practiced by people of all backgrounds and faiths.

Sant Rajinder Singh Ji Maharaj, spiritual head of Science of Spirituality, is internationally recognized for teaching meditation globally to millions through meditation seminars and media, including bestselling books and audiobooks.

People from around the world use the SOS Media Store to purchase books, audiobooks, and other media focused on the benefits of meditation.

The Challenge

The percentage of users accessing the media store from mobile devices is growing, however the current website is not optimized for mobile devices and some users have experienced issues while accessing the site from their phones.

The Task

Determine the wants, needs and pain points of customers who shop on the SOS Media Store, and use the research and analysis to optimize the website for mobile devices.

Empathize

Research Goals

We want to learn what’s most important to people when using on the SOS Media Store, so that we understand how to increase sales and customer satisfaction

Methodologies

Heuristic evaluation

User interviews

Persona building

Usability testing

Heuristic evaluation

After meeting with stakeholders, I conducted a heuristic evaluation of the SOS Media Store.

The heuristic evaluation was a valuable tool because it was fast and inexpensive, and helped identify flaws that were previously overlooked in the original web design.

Key insight

The mobile version of the website was not easy to use

Post it notes with list of evaluation criteria

Image showing current carousel slider for the SOS Media Store

Visibility of System Status

Navigation is not clear

There's not enough contrast on the carousel indicators, and the text on the images is not clearly leligible. This makes the content difficult to read and navigate.

Consistency and Standards

Inconsistent visuals

The product images are different sizes, and the whitespace between items is inconsistent, which can create confusion.

Image showing inconsistent spacing on the SOS Media Store mobile website

Image showing book details page for SOS Media Store

Flexibility and Efficiency of Use

No quick way to select book format

Some books are offered in paperback, audiobook, and ebook formats, however each book format has it's own page and there's no quick way to switch between available formats.

Internal stakeholder interview

After the evaluation, I presented my initial recommendations to an internal stakeholder to get buy-in to continue the project. I used the opportunity to conduct an internal interview.

Research objectives

Understand the organization goals for updating the SOS Media Store

Understand the technical considerations and development limitations

Sketches of the proposed new design for the SOS Media Store home page

Screenshot of zoom meeting with user interview participant

User interviews

I interviewed members of SOS to learn about their goals and objectives when using the SOS Media Store.

Research objectives

Gain insight from users on how they currently use the SOS Media Store

Learn what's most important to users when shopping on the SOS Media Store

Discover any pain points or obstacles users experience when shopping on the SOS Media Store

Define

Business Goals &
Technical Considerations

Insights from stakeholder interviews

Business goals

Increase sales

Increase customer satisfaction

Increase member usage

Technical considerations

The new website should improve the accessibility

The updated design needs to be ready for handoff to developers within 8 weeks

A Venn diagram showing business goals, user goals, and technical considerations

Insights from User Interviews

I used the atomic research method to synthesize my research into facts, insights, and opportunities.

Design Opportunity

How might we help members of SOS find and purchase books on the benefits of meditation quickly and conveniently on their mobile device?

Atomic Finding #1

Fact (what we heard):Instead of vertically scrolling through one item at a time, "I think being able to swipe through product categories would be easier."
- user interview quote

Insight (what we learned):Users want to be able to quickly see what's available on the website, but vertically scrolling through one item at a time is not intuitive.

Opportunity (how we can improve):Adding swipeable card carousels will help users navigate more quickly and learn about what’s available and new on the SOS Media Store.
‍

Atomic Finding #3

Fact (what we heard): "We have some members who are visually impaired. Thinking about them and trying to include them is really important. Everyone should be given a chance to use the website."
- user interview quote

Insight (what we learned):Some users have difficulty using the current website because the text is too small and there's not enough contrast on some graphics.

Opportunity (how we can improve):Use larger text and high contrast colors to improve accessibility.
‍

Atomic Finding #2

Fact (what we heard): "I definitely want to have access to the latest books from the ashram. A lot of times we don't get them available locally until later. That’s one thing we always look for, what is the new book or material that came out."
- user interview quote

Insight (what we learned):Users want access to purchase the latest book releases online because they cannot purchase them locally.

Opportunity (how we can improve):Feature new book releases prominently.
‍

Atomic Finding #4

Fact (what we heard):"When I am access something on my mobile, I want it right away to be convenient. When I'm in the car, before a long drive, I'd like to browse the SOS Media Store and see what is available that I can listen to immediately."

Insight (what we learned):Mobile users value convenience and want to be able to easily purchase content on the go and listen to audiobooks immediately.

Opportunity (how we can improve):Make it easy for users to find and download audiobooks and other downloadable media.

Experienced Meditator Persona

Bio

The experienced meditator owns a collection of books on meditation. They use the media store when there’s a new book release, and they know exactly what they’re looking for when they shop.

Wants & Needs

Learn what’s new on the media store

Quickly navigate to new releases

Easily find and purchase media using their phone

Frustrations with current website

Unable to easily find and purchase content on the go using their mobile device.

Beginning Meditator Persona

Bio

The begining meditator is interested in the physical, mental, emotional and spiritual benefits of meditation. They want to learn how improve their meditations.

Wants & Needs

Shop for books, audio and videos on the benefits of meditation

Learn about available products and make a selection

Frustrations with current website

Unable to easily view different categories of media offered.

Man reading in a field of tall green grass.

Prototype

High fidelity prototype

I created a high fidelity prototype to test with users.

Research Goals for usability testing

Evaluate if users are able to quickly learn what’s available and see what’s new

Learn how users find a book and add the desired format to cart

Identify any pain points or confusion with the layout or navigation

Usability testing was essential to validate my ideas and identify errors before development.

Business goals for usability testing

Save money by validating designs before development.

Save time by finalizing designs before handoff to developers.

Get buy-in from key stakeholders.

Visibility of System Status

Improving legibility and accessibility

I added carousel indicators, enlarged images, and added a clear CTA button to make the home screen more accessible and easier to navigate.

Animated GIF showing updated slider for SOS Media Store

Gif showing design for the most popular books category on SOS Media Store

Flexibility and Efficiency of Use

Creating intuitive navigation

I added card carousels with clear product categories, and consistent image sizes to help users quickly learn about what’s available and new on the SOS Media Store with less clicks and scrolling.

Flexibility and Efficiency of Use

Speeding up interactions

I added an “available formats” feature to allow users to quickly view options and choose what format they would like to purchase with less clicks.

Gif showing available book formats on SOS Media Store

Test

Gif showing updated Home Screen for SOS Media Store

Usability testing

Usability testing allowed me to collect feedback directly from users in real time.

Success Metrics

Success rate (if users can successfully find a book and select from available formats)

Errors (are there unexpected errors or pain points that users are experiencing?)

Accessibility (is the text legible? Can users navigate easily?

Users' subjective satisfaction (do users like the new website better the old version?)

Analyzing test results

Key outcomes

Success rate5 of 5 users could successfully find a book and filter formats

Errors2 of 5 users were confused by the product categories and media formats

Accessibility5 of 5 users could read the text and navigate easily

User satisfaction5 of 5 users felt the new website was easier and more enjoyable to use

Feedback from usability testing

Prioritizing feedback

Design insight #1

Users were confused by broad product categories and want to see more specific categories.

Design insight #2

For books with translation, users want the option to select the book language from the details page.

Design Insight #3

Users want to know more details about a book before making a purchase.

Design Insight #4

Users need indicators to keep them informed about where they are and how to return to previous page.

Next Steps

What I Learned

Key insights from the project

Users shop on the SOS Media Store to purchase new releases online that they cannot get locally.

Users expect to purchase and download media on the go, directly to their mobile device. They want to listen to audiobooks or read ebooks immediately.

Users come from different cultures and speak various languages. They want content translated into their languages, including Spanish and Hindi.

Challenges

With a small design and development team, adding translated pages will not be possible for the initial launch date.

Hand holding phone with SOS Media Store on the screen

Next steps

The next step is to work with the development team to implement the updates.

Track web traffic, sales and customer satisfaction to measure the impact of the website redesign.

Work on continuing to improve accessibility

Detemine how best to implement translation for phase 2.

Want to discuss this project?
I'd be happy to connect with you!

Designsbykhari@gmail.com linkedin.com/in/khariscott

View next case study →

Science of Spirituality

Project type

Team

My role

Tools

Duration

Overview

Background

The Challenge

The Task

Empathize

Research Goals

Methodologies

Heuristic evaluation

Key insight

Navigation is not clear

Inconsistent visuals

No quick way to select book format

Internal stakeholder interview

Research objectives

User interviews

Research objectives

Define

Business Goals & Technical Considerations

Business goals

Technical considerations

Insights from User Interviews

Design Opportunity

Experienced Meditator Persona

Bio

Wants & Needs

Frustrations with current website

Beginning Meditator Persona

Bio

Wants & Needs

Frustrations with current website

Ideate

User & task flows

Wireframes

Prototype

High fidelity prototype

Research Goals for usability testing

Business goals for usability testing

Improving legibility and accessibility

Creating intuitive navigation

Speeding up interactions

Test

Usability testing

Success Metrics

Analyzing test results

Key outcomes

Feedback from usability testing

Prioritizing feedback

Users were confused by broad product categories and want to see more specific categories.

For books with translation, users want the option to select the book language from the details page.

Users want to know more details about a book before making a purchase.

Users need indicators to keep them informed about where they are and how to return to previous page.

Iterate

Priority revisions

Iterating based on user feedback

Final prototype

View interactive prototype in Figma

Next Steps

What I Learned

Key insights from the project

Challenges

Next steps

Want to discuss this project? I'd be happy to connect with you!

View next case study →

Business Goals &
Technical Considerations

Want to discuss this project?
I'd be happy to connect with you!