Typorama

Curating experiences for an online stationery store

Client Self-initiated Project

Sector Lifestyle, E-commerce

My Role UX Researcher, UX/UI Designer

Tools Figma, Adobe Illustrator, Photoshop, Optimal Workshop

Project Time 2 weeks

Have you ever gone shopping on an online store, only to be presented with flashing discount ads, badly categorised product selections and clickable buttons that don’t seem to lead to anywhere? Through interviews with 10 people with experience shopping online, I discovered that this situation is more common than we thought – that users can be turned off by an information overload and not knowing where to begin.

Tasked with the following client brief from Typorama, I adopted the EDIPT design thinking strategy to discover users’ pain points and explore solutions that could improve the experience of an online stationery store.

1. Highest priority will always be given to face-to-face contact

2. “Small shop” appeal and great customer service

3. Highly curated inventory focusing on hand-picked quality over quantity

1 - Empathize

Analyzing the competitors

3 local and 1 global online stationery stores were analyzed to see what features worked and what could be improved. After going through each store with a comprehensive user task of finding a notebook and checking out the item, a features comparison table was drawn up to determine what could be adapted for Typorama.

An example of completing a user task on a competitor’s online store

2 - Define

Online shopping should be stress-free. Why isn't it?

I spoke with 10 people who has varying degrees of experience in shopping online, focusing on the following 2 objectives:

1. Find out about users’ pain points and what improvements they hope to see

2. Discover users’ motivations behind shopping at physical stores over online stores (or vice versa)

It turns out that user behaviours generally clustered around 3 main areas as shown:

Curated Selections
" I like it when there are personal touches and items are curated for me. ”
Product Details
“ I want to know how the actual product looks and feels like. ”
Credibility
“ I want to see ratings and reviews that are useful. ”

It was also interesting to note that on top of wanting to know how the product actually looks like, knowing how the product feels like would be a game changer for users. It was a cue to appeal to the other senses other than the sense of sight, to enable the user to make a better-informed purchase.

Developing user personas

Two user personas were created based on the insights gathered so far to help gain a deeper understanding of how we can approach the problem.

Defining the problem

Through the creation of the user personas, the pieces of the puzzle were slowly coming together. We now know that,

” I believe that by providing more informative AV resources of product usage and offering online personal product curations based on user interaction, the online stationery shopping experience will be more reliable and personal for the user.

Reworking the site navigation

Users mentioned that they wanted an intuitive way to navigate around websites. Through an open card sort, I invited 8 participants to sort all 75 products in Typorama’s inventory into categories for a better navigation experience. This resulted in a global navigation of 6 categories and local navigation of 14 categories as shown below.

Reframing the problem

Poorly-taken product pictures, messy navigation, showing products as-is and a general lack of a store narrative are key factors that frustrate users. This led me to ask the following questions:

1. How might we provide resources to help the user to identifythe product better?

2. How might we simplify the website to make navigating to the product easier?

3. How might we offer a curated approach to help users enjoy the online shopping more?

4. What could happen if we let users personalize their own shopping experience?

By providing more informative audio-visual resources of product usage and offering online personal product curations based on user interaction, online stationery shopping can transform into a more reliable and personal experience.

My key proposal was to introduce Typorama Curations, a quiz feature that can help users determine product groups based on their personalities and the inclusion of detailed product usage videos to help users in their buying process.

3 - Ideate

What would our users do?

Going back to the drawing board with our user personas, I created two user flows that would mimic their behaviours.

Greyscale wireframes of the website were then sketched to test out the space allocation, intended behaviours and its corresponding functionalities.

4 - Prototype

Launching the hi-fi prototype

Once the greyscale wireframes were checked and good to go, I went on to build a clickable hi-fi prototype that would be used for usability testing later on.

View Prototype

5 - Test

Testing with real users

5 users were recruited to test the usability of the hi-fi prototype based on the following task goals and scenarios.

GOALS

User flow 1: Locate black notebook, view video and add item to bag under 3 minutes
User flow 2: Locate curations, enter quiz, locate black notebook from recommended
products and add to bag under 5 minutes.

SCENARIO

You are on the last few pages of your favourite black notebook. You heard that a popular local stationery store has launched its web store and you’re planning to buy a new black notebook there.

Show me how you would locate a black A5 notebook, look for ways to view the paper
texture and add the item to the bag
Show me how you would look for a notebook via personalized recommendations,
and add the item to the bag.

Analyses and recommendations

All users were able to easily complete the task of locating the notebook and there were both enthusiastic and favourable feedback regarding the product video feature. Users were happy that they could witness the product in use and together with the sound aspect, it seemed to increase confidence in buying the product.

1. Access to the Curations feature

While the majority of users like this feature, the concept seemed to be confusing for users who are used to shopping on generic e-commerce sites. A simpler and more straightforward approach to explaining Curations could be a better way forward, perhaps by including text in the hero image or the use of more contrasting CTA colours.

Before

After

2. Social Sharing for Curations

Again, while all users were able to complete the quiz and enter the curated products page, there was feedback that it might be helpful to have the function to save curated collections or post curations to social media. A solution to this could be to designate a curations segment in the user’s account to save all past curations and add SNS-sharing features on the curations page.

Before

After

The solution at present

” I believe that by providing more informative AV resources of product usage and offering online personal product curations based on user interaction, the online stationery shopping experience will be more reliable and personal for the user. “

Next steps

1. Perfect navigation options
Perform more user tests to better categorize navigation levels. Dive deeper into the categorizations of the cardsorting results to understand what users deem as intuitive.

2. Social engagement for “Curations”
Look at how we can leverage SNS to take the curations feature further. Perhaps build on users’ preferences and social media sharing habits to curate a more accurate collection based on user personalities.

3. Further develop intuitive flows for discovering product features
How else could we make the flow more seamless?

4. Responsive design adaptations
Conduct usability testing for mobile versions.