How Might We Make Shopping Meaningful?
Carlo Catholic Services | A School Project | Redesigning their e-Commerce website on mobile
Context
2020 highlighted eCommerce
Have you noticed a transformation in your shopping habits? You may have bought something recently online right from your phone! The pandemic in 2020 showed us the importance of having a strong eCommerce platform.
So as a User Experience designer, I have taken this eCommerce project to redesign an existing website by using UX Methodologies such as applying user research techniques, wire framing and prototyping.
With good UX, my aim is to make shopping experience more meaningful online.
I chose Carlo Catholic Services.
I chose this gift shop as they have an out-dated eCommerce website and I want see how might I be able to improve it! This also offers a very meaningful beginner project for me as a UX learner.
​
Carlo Catholic Services runs a book and media as means to promote Christian literature and provide religious articles. Publishes a Chinese Catholic Newspaper Hai Sing Pao twice a month, which is distributed in Singapore and Malaysia.
The two main objectives of the company is to bring the Christian message of salvation to all people of good will and to encourage believers to receive deeper Christian formation and to promote spiritual growth.
​
The challenge.
How might we make shopping experience at Carlo Catholic Services eCommerce platform more meaningful?
On-Site Observations
Understanding what people do.
I visited their gift shop to make observation on actual customer shopping behaviors during a peak hour. There were mainly three types of shopper profiles based on on-site observation.
Gift Planners
"I am looking for a good gift"
Browsers
"I want to explore the wide variety of materials on display"
Inquirers
"I want to know more information"
Behaviors
-
Time-Sensitive: 2 customers did not stay long | I-Statement: I am shopping for a short while.
-
Close-Ended Goals: 3 customers have specific interest and clear goals in mind | I-Statement: I am looking for a unique product that fits my taste.
Needs & Goals
-
Acquiring Catholic Materials: 3 customers were looking for books, rosaries and statues | I-Statement: I need to get this item to pray with my community.
-
Getting Gifts: 1 customer was thinking of what to get for a present | I-Statement: I want to get a memorable gift for my friend.
Challenges
-
Product Discovery: 1 customer had a specific need and was looking for help from staff | I-Statement: I need a specific design.
-
Decision Making: 2 customers had open-ended goals and were looking for recommendations | I-Statement: I need to ask around for more information before getting this item.
User research interview
Understanding what people say.
I conducted 10 user research interviews to gather qualitative data based on what people say about their shopping experience in general. Using a research technique called affinity mapping, I listed common behaviors, goals, needs, challenges and motivations as to why people shop online or in physical stores. Here are common trends I found!
Behaviors
-
Prefers Familiarity: I feel comfortable visiting websites that I'm familiar with.
Goals
-
Fulfilling Personal Needs: I shop on a needs-base situation.
-
Satisfy Social Influence: I value recommendations from others.
Needs
-
Decision Making: I need clarity to decide on what to choose.
Challenges
-
Price Sensitivity: I hesitate to purchase if I think about price.
-
Evaluating Purchases: I want to feel good about my choices!
Motivations
-
Out of Necessity: I shop when there’s a need.
-
Under External Influence: I’m inspired to shop for special occasions!
-
Self-Care: I tend to shop when I stumble upon something good.
I remember buying a gift for my mother. It was like a mother's day gift, so I bought her a rosary
'John' | Interviewee #7
Creating a persona
Now, let's think about the users.
The following two personas are based on common insights gathered from what people do and say, while being in line with the two business objectives to bring the Christian message of salvation to all people of good will and to encourage believers to receive deeper Christian formation and to promote spiritual growth.
Faithful Faith
A practicing Catholic. Occasionally distributes Catholic materials in her church. Remembers special events and reaches out to friends and contacts to celebrate.
It is in giving that we receive!
​Needs and Goals
Needs to prepare a list of gifts for contacts in her church on special occasion.
​
Challenges
Unsure what options to get for specific contacts.
Have difficulties in personalizing selections for each recipient.
Faith, a practicing Catholic, needs a better way to manage her gift preparations so that she can bring delight to her recipients.
Curious Lucius
A non-practicing Catholic who is looking to get started. Likes to explore with literatures to expand his knowledge and understanding.
Reading has made many saints.
Needs and Goals
Wants to understand more about the faith.
Needs new recommendations on what to read next.
​
Challenges
Has to validate information from external sources.
Identifying appropriate literature for his level as a beginner.
Lucius, a non-practicing Catholic, needs to find the right list of books for his level so that he can get started learning about his religion.
Sketching ideas
Planning out the information architecture.
I sketched out some ideas to get started. At the same time, I analysed results from my open card sorting which allowed my to imagine the where certain buttons should be placed in the information architecture!
Building user flows
Finding the happy path.
After brainstorming possible solutions, quantitative research on existing competitors, and identifying suitable features for each personas, I built a user flow to help us see specific actions users would take to accomplish their goal
.png)
.png)
.png)
.png)
Moodboard
Finding the tone that fits the theme.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Development
Developing the eCommerce
Make shopping online meaningful by planning gifts for your love ones or exploring lists of selections tailored for you!
My Giftlists
Add products to you Giftlists for that special occassion!
Reading Ladders
A series of reading materials, specially curated, to get started!​
Giftlists
Save items and organise your list of gifts!
Reading Ladders
Explore lists of recommended books.
Usability Test
Identifying areas to improve.
Usability test is a user-centered interaction design technique to understand how actual users interact with the design in order to improve the product's usability. I conducted usability test with 7 participants to identify issues that users may experience.
Before
“I didn't notice the gift icon on top” UST Participant #2
Confusion on Add to Giftlists icon | Critical Issue
​
5 out of 7 participants struggled to find a way to save a product to the Giftlists.
​
5 Made feedback that they did not understand the gift icon.
2 Did not notice the existence of the gift icon.
​
Analysis: The gift icon took a lot of cognitive load from users in
trying to understand what it is and it was hard to see.
Recommendations:
Using "Recognition Rather than Recall" in Usability Heuristics, I replace the gift icon with a traditional heart shape. The icon also needs to be darkened so that is looks pleasant enough to be tappable.
After Usability Test
.png)
In retrospect
Personal Reflections
This project has given me a great opportunity to analyse and apply user research techniques and UX methodologies within the double diamond structure. It's with good time management that I managed to gather 10 user research interviews and 7 usability study sessions via Zoom. There are areas where I can improve on such as having confidence in idea exploration. In terms of UI, there is room for improvement when it comes to button sizes and design styles. Some immediate actions moving forward would be to improve my understanding on auto-layout, being sensitive to button sizes and to explore more ideas through low-fidelity sketches.
Thank you for your time!
Feel free to reach out to me if you have any questions, feedback or thoughts that you would like to share!