This student project prompt was to design
an online merchandising store for philosophy/psychology lovers.

The product.

Anima is an online merchandising store for philosophy/psychology lovers.

Project duration.

March 2023

The problem.

Clothing is a too abstract form of self-expression and way to signal one’s identity and interests to the world.

Project goal.

To design and iterate on a online merchandising store website, desktop and mobile versions. 

My role.

Lead UX Designer, UX Researcher, Visual Designer, Illustrator, Merchandise Designer and Brand Designer.

Tools used.

Adobe XD, Illustrator, Photoshop, Spotify, Google Slides, Google Forms, Miro, Hand-Drawing, Jamboards, WordPress and Elementor.

My responsabilities.

Brief market and benchmarking studies. Conducting interviews, paper and digital wireframing, low-fidelity and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs. Brand design and visual design. Merchandising Design.

1. User research

Pain point I

Lack of specificity can make it difficult for others to identify the wearer's specific interests

Pain Point II

Limited availability: It may be more difficult to find general clothing items that express a specific concept or idea

Pain Point III

Less sense of community: wearing general clothing items may make it harder to connect with others

Meet

Karl Jeune.

Lives in Paris with his parents and dog.

Frustrations.

Not able to abstractly express his personal identity through his clothing style;

Thinks Jungian theories should be read from everyone;

Can’t maintain casual talking;

Too shy to spark conversations with people in public spaces.

Goals.

To express his personal identity through his clothing style in a easy yet subtle manner;

To promote awareness about the Jungian philosophy;

To casually spark conversations with interesting people.

I

INTROVERT

Karl is typically reserved and energized by being alone/with individuals he praises and trusts. He feels more comfortable focusing on his inner thoughts and ideas, rather than what's happening externally. However, Karl also tends to be very sociable and friendly.

N

Intuitive

Karl's hyper sense of observation allows him to easily access the information he needs when it comes to making a decision, with limited need of acessing proof or evidence.

F

FEELER

Karl is typically aware of not only his own emotions but the emotions of others around him , making him protective of those he values. Also, he tends to interpret information based on emotions and empathy rather merely on logic.

J

JUDGER

Karl seeks closure from the outer world through order, planning, and organization. When possible, he prefers for things to be settled and crossed off his list. Karl may want to find work that allows him to set goals, be organized, and make decisions.

A

Assertive

Karl tends to be more calm, confident and laid-back, and less anxious about external information.

2. User Journey Map.

To empathise with Karl it was created an empathy map and user journey map to dig deeper into each stage that Kai goes through while ordering in a generic type of online store.

31.Problem Statement

32.Hypothesis

Karl user name is an 20 years old literature studentuser characteristics who needs to promote awareness of the importance of psychology,user need because he believes that society’s morals and values are not well aligned. insight

If Karl orders apparel from our online storeaction then He is able to promote awareness about psychology/philosophy importance in our lives as conscious beings.outcome

41 Ideation

Some rapid ideas were drawn in order to speed-idealize what could the user flow help on ordering philosophy/psychology merchandising items.

5. Competitive Analysis

In order to understand how merchandising stores work, user flows and usability tests were made in order to understand how they differentiate from each other. Taking to account that there aren't a lot of philosophy/psychology merchandising stores, also musical and cultural themes were cross tested.

The Philosopher's Shirt

Unkind

Merchbar

Grindstore

Anima

Philosophy

Music & Culture

Music & Culture

Culture

Philosophy

Blog

Mockups

Good mobile experience

Good desktop experience

Outstanding features

Acessibility features

User Flow

Navigation

Brand Identity

UX References

UI References

6. User Flow

After exploratory and market research, I had gotten a fair understanding of the primary user flows for the Mary app. User flow allowed me to see the complete app experience at a holistic level. Furthermore, this flowchart helped me make a checklist of all the pages to be designed.

8. Site Map

8. Paper wireframes

9. Lo-fi prototype

(mouse hover the images
to make them slide down)

1. Homepage

2. Product Page

10. Usability Testing

To test the low-fidelity prototype with real
users it was planned a usability testing session.

Introduction

  1. the straightforward design process of ordering a product item from the Anima online store;
  2. the amount of “resume design” sessions needed for a successful design process.

Methodology

Time On Task;

Use of Navigation;

User Error Rates;

System Usability Scale.

Research
questions

A)  To determine whether users are able to complete core design tasks within the lo-fi prototype and gather feedback from the process of:

  1. Exploring the home page store
  2. Choosing Item details
  3. Fill up forms
  4. Checkout Cart
  5. Finish Order

Participants

Participants will be divided into genres (3x Male and 3x Female) and online shopping experience (5x have online shopping experience and 1x does not have online shopping experience); 

Participants will be 25-35 years old;

One participant with special disabilities is included.

KPIs

How long does it take a user to order a product in the website?

What can we learn from the user flow, or the steps that users take to order an item?

Can users complete all the steps without help?

Are there parts of the user flow where users get stuck?

Are there more features that users would like to see included in the website?

Do users think the website is easy or difficult to use?

Schedule

Unmoderated usability study

Location: Lisbon PT, remote (each participant will complete the study in their own home)

Date: Sessions will take place during the week of March 10-12, 2023

Length: Each session will last 20 to 45 minutes, based on a list of prompts, with a SUS following the study

Compensation: Free expresso and snack

11. Affinity Mapping

Observations were divided and categorized from usability testing sessions:

(mouse hover the cards to
see reverse information)

Homepage Display

"I think it would be better to classify each kind of products, related to differente types like "on sale", "neutral colors", etc. White and black t-shirts are the bestsellers"

"It's not easy give opinions about an homepage without having graphic information. It's the most important in online stores"

"I think the homepage is to simple to simply give opinions. It's easy to proceed and therefore not easy to give feedback about it. I don't know the product I am ordering"

 

Forms

"Looks like a regular online store for me"

"Everything seems ok, I don't feel it's hard to order in this store"

"I don't see any delivery option, what if I want it to be delivered before sunday?"

"I'd add a delivery option page or pop-up"

Product Items

"It's nice that it has a description about the philosopher, but I would love to know what are the sources of the fabric I am ordering. Is it good, is it environment friendly?..."

"I feel I would like to know more about the product I am ordering. Social proof or the acknowledgemnt of the quality of the product, etc."

Bad Practices

"I feel like being binged to add more t-shirts in every page..."

"I'd make the Related Items more subtle in every step" 

 

Order Process

"I think everything seems to be in the right place. I suppose it makes me feel secure about the product I am ordering. I don't feel the rush of proceeding and procedding and proceeding forward" 

"I would like to know more about the philosophers (the ones I don't know) before ordering. However, I understand I'd lose focus about the order itself"

General Feedback

"I think you could add a more related communication format, to make it different from the other online stores"

"I think it's too normal, kind of boring and conventional store. If its purpose is different from the competition, I see some room to diversify and make it unique"

12. Pattern Identification

It was observed:

Insights:

It was observed that 4 out of 6 felt binged about a 'too common' related items pop-up section in most of the steps. This means that it is important to make it more subtle and more friendly.

For most users,a pop-up section for related items is too annoying, an insight is: users need a non-pop-up section to provide related items and to next to the cart information, either to make it more subtle and to help conversions.

It was observed that 4 out of 6 participants felt necessary to provide more info about the quality of the product. This means that it is important to add social proof information.

Most users needed to know more about the product they are ordering, an insight is: users need social proof about the products.

It was observed that 2 out of 6 participants would like to know more about the fabrics that the products are made from. This means that it is important to provide information about the the sources of the fabrics that are used to make the products.

Some users needed to know more about the sustainability features of the products, an insight is: users some sustainability certificates in the product description/or in a parent page.

It was observed that 4 out of 6 participants felt that this online store is too conventional. This means that it is important to differentiate from the competition.

Most users felt that the prototype is too conventional, an insight is: users need to feel a direct association to philosophy/psychology in the content/copywriting/etc.

42 Merchandising Design

Some rapid ideas were drawn in order to speed-idealize what could the user flow amuse the user on a such atypic process of designing and planning a virtual wedding venue.

43 T-Shirt Mockup

Accounting the users' both no1 priority needs of providing content and of feeling that Anima should not be a conventional website, it was created special types of mockups to be included in all products:

Erwin Schrödinger
T-Shirt.

Isaac Asimov
T-Shirt.

Friedrich Nietzsche
T-Shirt.

Jordan Peterson
T-Shirt.

13. Brand Design

Color Palettes

#7B0252

#DB5461

#707070

#F5F5F5

#FFFFFF

Typography

Section titles | Mary's tutorial

Section subtitles | Action buttons I Menu items

Text boxes | Action buttons II | Avatar names | Venue names | Preview buttons

Accessory product descriptions

League Spartan Regular 22px 700weight 0spacing

League Spartan Medium 18px 600weight 0spacing

League Spartan Regular 15px 600weight 0spacing

League Spartan Regular 12px 300weight 0spacing

121. Final UI Desktop Designs

(mouse hover the images to slide down)

1. Homepage

2. Product Page

3. Cart Page

4. Checkout Page

5. Order Page

6. Success Page

122. Final UI Mobile Designs

1. Homepage

2. Product Page

3. Cart Page

4. Checkout Page

5. Deliver Type

6. Deliver Type II

3. Confirmation

4. Checkout