Case Study: Reimagining a Nairobi-based independent bookstore's online presence

SOMA NAMI BOOKSTORE - WEB REDESIGN

Overview

Soma Nami, an independent Pan-African bookstore would like to redesign its website in order to increase sales and customer satisfaction.

Sprint Duration: 2 weeks
Industry: E-Commerce
Brief Type:
Concept
Deliverables:
High fidelity prototype and client presentation
Team: 
Solo Project
My Role:
UX Designer
Tools:
Figma, Slack, Excel, Zoom

My Contribution: User Research and Analysis, Competitive Analysis, Card Sorting, Designing and iterating wireframes for webpages, Creating the high fidelity prototype, Developing visual design, Usability testing, and Presenting the final product

Product: Restructured the site's information architecture easing the flow of information through the website, developed 2 guest user flows, and resolved a brand identity that captures Soma Nami’s values and energy among its customers, therefore driving sales and customer satisfaction.

5
USER INTERVIEWS
5
CARD SORT PARTICIPANTS
5
TEST PARTICIPANTS
1
TESTING ROUNDS
2
ITERATIONS
9
SCREENS

Approach

I followed a UX Double Diamond design process beginning with research, problem definition, and then moving onto product development and product delivery. Some of the processes that were applied were user research, competitive analysis, card sorting, ideation, visual design, branding, prototyping, and usability testing. Design followed applying research findings to ensure the product was user-focused. The final delivery includes next steps for Soma Nami’s website redesign

Discovering The Problem

I dove into a 3 pronged research approach - user research, competitive analysis, and card sorting to better emphasize with users and understand the current market.

USER RESEARCH

I conducted  5 user interviews using qualitative research methods to understand users’ experiences with Soma Nami and similar independent bookstores in Nairobi.

I found that users care about:

COMPETITIVE ANALYSIS

I conducted a feature inventory of 78 features across 3 direct competitors and 3 indirect competitors. I identified direct competitors as similar independent bookstores serving both online and in-person stores in Nairobi, and identified indirect competitors as bookstores doing the same, but based outside of Kenya. For the selection of features we looked at research from the Nielsen Norman Group on what features an e-commerce website should have. Our competitive and comparative analysis revealed that there were 8 critical features missing on Soma Nami.

Card Sorting & Site Mapping

To create the most relevant information architecture structure for the site, I conducted an open card sort with 5 users and 97 product titles. I combined the open card sort analysis with a competitive analysis of the information architecture of competitors.

These are the steps I followed to create 42 book categories under 3 hierarchies for redesign.

Following analysis of the card sort, I created a new updated sitemap that included 3 levels of hierarchy with:
3 Level One categories,
16 Level Two categories, and
14 Level Three categories.

Defining the Problem and Goal

Using analysis of the user research, competitive analysis, and card sorting, I moved into problem definition using persona creation, jobs to be done, and user flows. Although I usually avoid persona creation due to unnecessary and unhelpful stereotypes, I felt that in this case, a persona would communicate to the client their customer base, which they were interested in identifying.


To capture the problem statement I created “Jobs To Be Done” by the user, to specifically inform how the product design would help them accomplish their jobs. I followed the Jobs To Be Done with user flows to inform the design stage.


I decided to focus on guest users and their journeys buying books on Soma Nami. Navigation and Features were considered as part of the redesign process using research implications

Designing and Developing the Product

The design process was conducted on Figma, starting with basic wireframes, and then moving on to visual design. The table below summarizes decision making for the navigation, features and visual design through the design process.

I iterated between rounds of protoyping and usability testing as the final design came through. Usability tests were conducted remote and moderated, using both quantitative and qualitative metrics in assessment. In the last round of testing, 100% of tasks were completed, while only 50 were completed on time. User feedback concerning the tasks was positive for, colors, product categories and navigation with features such as the ad designs being received as distractive.

NAVIGATION AND FEATURES SUMMARY

The following images highlight design decisions concerning navigation and features.

UI AUDIT

Soma Nami's uses a simple visual style to identify their curated space, portray the physical Soma Nami experience online, and communicate their values. Gold is used as the primary color and reflects Soma Nami's values such as magical experiences and enthusiastic communities, while brown reflects the Pan-African and cultural experience. Soma Nami's main visual, an owl, appears on the logo and on other webpages. However, Soma Nami's brand identity also loses consistency with the various typefaces, fonts, image styles, and random appearances of color.

VISUAL DESIGN

To communicate a more intentionally curated visual experience, I narrowed down the typefaces and fonts, and made the owl a central identifier of the Soma Nami brand and experience. I also used imagery that captured their cultural identity and community of Soma Nami. Overall I created a visual style that expressed Pan-African, royalty, wonder, discourse, and belonging, illustrating the intimate connection Soma Nami lovers share.

A Walk Through the Final Product

Key Learnings & Next Steps

One of the key things I observed from this project is that keeping design simple addresses a large part of the experience troubleshooting. In the case of Soma Nami, simplifying typefaces, illustrations, and logos solved a large part of the visual design challenges.

The next steps to launch Soma Nami's new site would be to address missing features such as high quality images of products, and to prototype and test the remaining sections:

1. Supplemental Navigation - About Us, Social Media, Policies,
2. Faceted Navigation/Filters
3. Pages 
- All Primary Navigation - Events, Blog, Book Club, Book Box, Soma Nami Cafe, Deals, Contact, 
- Product Categories and Subcategories - New, Bestsellers, Children & YA, Fiction, Nonfiction, Pan-African Literature, Gifts
- All Contextual Navigation
- Product Details