Case study : General Johnston
E-commerce
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.
RESEARCH
INTERVIEWS
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
COMPETITIVE ANALYSIS
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.
SYNTHESISE
AFFINITY MAPPING & "I/THEY" STATEMENTS
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)
PERSONA
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.
JOURNEY MAPPING
PROBLEM STATEMENT
USERS SEARCHING FOR PLANTS NEED INFORMATIONS TO PICK THE RIGHT ONE(S) BECAUSE THEY DON'T ALL HAVE ENOUGH KNOWLEDGE IN GARDENING
IDEATION
USER FLOW
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.
CARD SORTING
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.
NAVIGATION SYSTEM
SKETCHES
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.
Home page
Navigation/category search
Search results/products details
Communication/community
PROTOTYPING AND TESTING
First usability testing
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
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.
Third usability testing
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
FINAL PROTOTYPE
Home page
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
Missing information : number of results found
A few more pages
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
Finally, the Basket page and the steps process of payment page, essential to any e-commerce
CONCLUSION :
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