plantatree | reactjs e-commerce web application & iOS app

A time to grow.

Context

Plantatree is a gardening and landscaping store that sells gardening supplies, plants and other items in physical stores and online. Plantatree also hosts a marketplace for freelance contractors and has grown an active community, becoming known as a place to find tips, ideas and news related to the gardening and landscaping industry.

Plantatree needed a strong digital presence to stay relevant and increase sales. The online store and accompanying ios application was designed from the ground up to offer a digital version of the community atmosphere found in the physical stores and to offer a wider range of products and services.

This project was delivered as a part of a four person team for a software engineering final project at Auckland University of Technology, the client is fictional.

Contribution

UX/UI

Usability Testing, User Interface Design, Prototyping, Wireframing, CSS

Project Management

Product Owner

Developer

HTML, CSS, PHP, ReactJS

Exploring the brand
What makes Plantatree great?

With the digital age transforming the way consumers shop, and the likes of Amazon and other larger online retailers looming on the horizon, Plantatree needed a contemporary e-commerce solution to retain their existing client base and attract new customers.

An element that was crucial to the success of each retail store was the community. Avid gardeners could subscribe to a weekly newsletter and spend time in the store talking to other gardeners about the latest news, as well as share ideas and tips.

In the physical stores, each location hosted a bulletin board where freelancers and DIY handymen were able to post their availability. Taking a human-centred approach, we wanted to include the community feel within the online space and application to maximise exposure, increase sales and help grow the Plantatree community.

Transforming the brand
Finding a digital solution for a hands-on industry

After our initial consultation with the client, we decided that a modern e-commerce website with an accompanying iOS application would be the best way to capture the community aspect of Plantatree in a digital format.

We extracted that the website and app would be broken down into three main areas:

  • The shopping experience (buy plants online)
  • The marketplace (news & hire help)
  • The about/contact section (find and communicate)

Research
Understanding a Plantatree customer

In order to begin the design phase, I first wanted to understand the motivations behind different customers. Of the the challenges I faced was not having direct access to a Plantatree customer to conduct real world interviews. I instead created several personas to reflect different customers and explored the wants and needs of each.

This gave me the opportunity to discover how each user might approach the website and the different ways in which they would interact with it.

Design elements
Creating a digital identity

Plantatree came to us with very little in the way of design materials. They had a simple lettered logo with no brand guidelines to work from.

I wanted to create a brand aesthetic that resonated and reflected with the physical stores. This meant creating a logo, color pallete, sourcing an icon set and choosing a modern typeface to create consistancy across all platforms and design work.

Ideation
How will our customer interact and use the product?

Using the core areas discovered in earlier research I decided that the most logical and simplified layout would have three main sections:

  • Online shopping (buy plants & tools online)
  • Digital marketplace (news, tips & hire help)
  • Customer service (about and contact)

I created prototypes of each section, and tested the designs and interactions with users to gain insight and feedback.

Develop and deploy
Putting the developer hat on

Along with three other developers, we built the website using ReactJS, CSS, Html and PHP. The final product was received well and achieved the goals set out. Due to unforeseen circumstances the mobile application was left at the design stage to be developed at a later date. The prototype for the mobile application can be found below, with ideas for interaction and further development.

Plans for the future
Design and prototype for iOS

The prototype for the iOS application continues with the branding and aesthetic established in the website development. Below are a few samples of the interactions and style I was hoping to achieve.