SLAVI KALOFEROV

User Experience Designer

E-COMMERCE EXPANSION OF A WEBSITE

Freelance Project

Role: UX Research and Design

Duration: 4 Months

Context

Each academic year many freshers who are Christians come to Portsmouth to study and look to be integrated into new “family” communities of people sharing their faith. Acorn and the Vine, a Christian bookshop, aims to be the gathering place of Christian believers from all over Portsmouth.

However, their young adult target audience is not aware of what they offer finding it inconvenient which makes them select other competitor brands to shop for Christian materials online thus making them miss out on the opportunity to meet fellow believers in the bookshop.

Proposed Solution

The new website design provides information about items that are currently in stock and with the click-and-collect feature aims to bring the targeted young customers to the bookshop, by answering their needs of the ability to check before purchase and meeting with new Christians.

The solution will improve the experience of the local and international Christian students, while projects to make a 50%increase in revenue for the shop as well.

Process

Stakeholder interview to learn more about the business from the owner’s perspective

From the gathered insights, I made a working hypothesis about the users they want to target and created proto-personas. 

  • One of them is a young male student at University of Portsmouth passionate to reach out with the Word of God.
  • The other one is a 52-year-old lady with a mother attitude who loves to buy presents and caring about others.

Primary research: questionnaire, observations and interviews to test the hypothesised user persona and learn more about them and their behaviours

I designed a questionnaire informed by the insights from the stakeholder interview. I was interested to learn about:

  • target audience;
  • if there is a need in the audience for this service;
  • what information do they prioritise to know about such products;
  • competitors they shop at.

I shared it to collect the data with the help of the shop managers.

I spent one day at the shop observing the customers from where I noticed that in fact the major amount of customers is actually female students just about to graduate ages between 22 – 25. They were particularly interested in specific style when it came down to purchasing for themselves or something that will fit their loved ones.

Secondary research on the competition

With the collected responses from the primary research, I became aware of the direct national and local competitors of Acorn and the Vine.

The research on the market landscape also allowed me to situate Acorn and the Vine among the competitors and see where is the differentiation point of the shop among the others. I used that information on the website.

I did a content analysis of their websites to familiarise myself with the conventions in this industry such as how the items are presented, how the navigation is labelled and what is the most important information for their users. With these insights and my knowledge of what is offered in the shop, I created a draft information architecture for the website categories.

Developing the Information Architecture

Based on the created user persona I selected three people with which I ran three card-sorting exercises. The cards were with user goals related to items in order to collect more accurate data from the participants who grouped them and labelled them in the activity. I triangulated the gathered data with the current simple Information Architecture of Acorn and the Vine’s website and competitors ones, the weight was given to the responses of the users.

Changing the identity to fit better to the user

Acorn and the Vine did not have a defined brand identity. I used the findings about the actual female audience I was targeting to look at feminine websites for visual influences that would resonate with our user persona. Based on that I proposed a change in the typography to make the website more appealing to Angela.

Designing mobile first

My research pointed out that the most used device to shop (for such items) was the smartphone. I wanted to focus on only the most important elements in the design, therefore, I choose to start designing first the mobile screen as the space there is at a premium. 

By keeping in mind what information was most important to my user persona I used the crazy 8ths technique and laid out on the wireframe the information sections as blocks.

User testing the prototypes

I turned the designed wireframes into high-fidelity interactive prototypes in Figma. 

My aim was to test with as many people as possible and learn quickly so to achieve that I transferred the design to QuantUX which allows for capturing qualitative data and video recordings of the users’ behaviour on the screen. 

I conducted 16 unmoderated remote usability tests in total, with set tasks and follow-up questions. However, I set up the tasks wrong which skewed the collected results making them seem not successful as they were.

Iterating and scaling up to Tablet and Desktop

In the following two iterations, I designed for tablet and laptop view while keeping consistency with the mobile version I already had. I used printouts of the different versions of tablet and desktop in order to make changes faster by having a bird’s eye view of all of them. I considered how the content will expand in the different breaking points with the aim to make it easier to be implemented with code.

The final round of User Testing

I tested the final digital prototypes on mobile, tablet and desktop with four usability tests with participants from the target audience based on the user persona.

The results from the tests were positive: 

  • the users managed to do their tasks by ordering a book and reading the relevant information;
  • the digital prototypes were very believable, even clicked around on other items despite them not working;
  • they shared that they would use this website if it was real to check up and order if they liked the offering.

Limitations of the conducted research and the involved influencing factors

A weak point of my study because of the limited time and budget on the project which did not allow me to do more in-depth research and repeat the observations and expand the questionnaire reach.

My research was done during the time of the year (near Christmas) which presupposed the purchasing of gifts for loved ones.

Also, I did not have much chance to learn about the context of the use of the website in users’ life. I used my personal experience and informal chats with people from the target audience.

Technical considerations which I should have taken into account

Despite, being outside of my scope of the role as a designer, I designed with no experience or knowledge about the limitations and capabilities of WordPress because I have never worked with the platform before. WordPress theme, website performance and plugins (the needed one: WooCommerce) which were needed to technically achieve the design were foreign concepts to me that I did not take into consideration. 

That being said the basic block/ box structure of the web I designed in mind with I believe would still allow the design to be implemented without too much deviation from my solution.

Reflection

I should have done research probes with the target audience to understand their context better to find out the key (physical) influences while they are shopping online. 

Learning about how, when and why they use the different devices would have enabled me to design the website to suit better these moments for the user and their needs then.