top of page
GJ top image2.jpg

Case study : General Johnston


UX/UI project

Duration : 4 weeks

Solo project

Goals :

   Add to the UX process some UI fundamentals such as : UI laws, Interaction and Navigation design, colours and fonts, Information Architecture.

   Giving a solution to users' needs in creating the clearest and easiest way to navigate on an e-commerce website related to gardening supplies and reach the goal of any e-commerce : Expand the commercial reach and build customer loyalty.

Project presentation :

This project was the second made in the GA intensive course and was aiming to familiarise ourselves with one of the most valuable type of online artefact : an E-commerce.

One type of e-commerce has been attributed to each one of us with a name and mine was General Johnston, a plants and gardening supplies store.



The goal of doing these interviews was to understand people's expectations when they buy gardening supplies. Consequently, I decided to interview customers to have details about feelings and frustrations, but also business owners/managers of gardening stores to have a more general feedback about customers' habits

Interviewees : 6 customers and 3 business owners/managers


I chose to focus my competitive analysis using 3 main commerces of plants/gardening supplies in Sydney : Eden Gardens, FlowerPower, and Plantgirl. It was useful to have different models to compare the forms and contents of each shop, analysing their similarities and differences.

GJ - edengardens logo.jpg
GJ - flowerpower logo.jpg
GJ - plantgirl logo.jpg



GJ - I statements.jpg

What did I learn?

  • Plants first! When customers talked about gardening, the first which popped up on their mind was a plant. When we talked about gardening tools, soils, fertilisers,... They already were thinking about a plant.

  • Customers like to go into a store because they like to feel close to nature and so it is easier to be physically close to nature. Furthermore, as a plant is unique, they like to see it to pick the one they will take care of. That brings the insight of communicating the stock availabilities.

  • The navigation system (primary, secondary, tertiary navigations) is more useful to customers with less knowledge in gardening to find a product, as savvy gardeners know pretty well what they want/need. For them, a community where they can exchange would be what they feel attracted by.

MAIN TRENDS (related to plants)


This persona was created to help me in developing the design, to create something which could be easy to understand even for people not familiar with plants.






GJ - user flow.jpg

With this user flow, I tried to elaborate a clear and simple pathway to help users finding the product they want. As a majority of the results I had during the research part concerned plants, I focused on a plant searching path.

Comparing home pages/feature inventory

Goal : Comparing features present in other websites to decide what artefacts are important for the General Johnston website.

Comparing local navigations

Goal : Comparing shopping categories on other websites.

I also included two other websites to inspire me : Bunnings, the Australian leader of hardware supplies, and Plant in a Box, specialised in selling plants.


To help us, GA tutors provided us a list of more than 50 items which could potentially be sold by our e-commerce. I organised a card sorting with 3 people to help me understanding users' logic to classify these items and so, how they would navigate on the website if they had to look for them.

This task added to the competitive analysis led me to establish a satisfying navigation system.


GJ - navigation system.jpg


Developing ideas from insights about what could be visually attractive using UI laws such as alignment, contrast, proximity, "F" shape reading, and give the right amount of information for users. 

GJ - sketchmainpage1.jpg
GJ - sketchmainpage2.jpg

Home page

GJ - sketchplantpage1.jpg
GJ - sketchplants2.jpg

Navigation/category search

GJ - sketchproductdetails3.jpg
GJ - sketchproductdetails2.jpg
GJ - sketchproductdetails1.jpg

Search results/products details

GJ - sketchcommunity1.jpg
GJ - community3.jpg
GJ - sketchcommunity2.jpg



First usability testing

GJ - usabilitytesting11.jpg
GJ - usabilitytesting12.jpg
GJ - usabilitytesting13.jpg

   After only one person testing the first version of the prototype, I already had a lots of insights for improvement to make it clearer.

   Some insights concerned the test itself and I had to rephrase some challenges

Second usability testing

GJ - usabilitytesting25.jpg
GJ - usabilitytesting21.jpg
GJ - usabilitytesting23.jpg
GJ - usabilitytesting24.jpg
GJ - usabilitytesting27.jpg

Insight : need to make the titles more obvious, maybe in increasing the size?

Solution : Doing this challenge again using a different vocabulary

We can see that when I wanted users narrow down the research with filters, they clicked on the flower product straight away.

GJ - usabilitytesting22.jpg

Third usability testing

GJ - usabilitytesting31.jpg
GJ - usabilitytesting32.jpg
GJ - usabilitytesting33.jpg
GJ - usabilitytesting34.jpg

To change this score, I should ask users how they figure out to represent this information, collecting and grouping the answers.

Some of users' answers were pretty precise about what they would prefer to have when they tested the prototype.

Proposing an option "Maintenance : easy" (for ex.) and proposing an A/B testing


Home page

GJ - wireframe homepage.jpg
GJ - wireframe navigation.jpg

The home page presenting the primary navigation, and the latest informations related to gardening like events, sales, ...

The secondary and tertiary navigations are displayed with an overlay appearing on click. 

Local navigation

GJ - wireframe filters2.jpg

Missing information : number of results found

GJ - wireframe outdoor plants orange.jpg
GJ - plant caracteristics.jpg
GJ - wireframe pots matching2.jpg
GJ - wireframe pots matching.jpg
GJ - wireframe tips and tricks2.jpg
GJ - wireframe outdoor plants2.jpg

A few more pages

GJ - wireframe pots list.jpg
GJ - wireframe our history.jpg

Page on the left : Shopping pots

Page on the right : "Our history" giving to users the opportunity to know a bit more the personal life of a company

GJ - basket page.jpg

Finally, the Basket page and the steps process of payment page, essential to any e-commerce

GJ - checkout page.jpg


Even if this project has many ways to be improved in terms of UI design, as the final prototype is a mid-fidelity greyscale proposition, it remains a solution of e-commerce with strong bases to sell plants and gardening supplies.

In a bigger timeframe, some elements such as the colours, different interactions, other fonts explorations could be made and tested on users and so, improve form and content

bottom of page