Brief

Create a new attractive e-commerce for both businesses and consumers with full business admin capabilities. Furthermore, new branding was needed and required to be used to deliver the Jenks Brands message.

Initial Plan

When I started to understand the requirements for this project the client was already working on this business by selling in person to businesses and with a small percentage of consumers buying from a self-made Shopify e-commerce.

Because this e-commerce website needed to have advanced business admin capabilities, to basically allow the owner to manage the whole business by himself, I had to review his current practises understanding his future needs.

Furthermore, I needed to clarify the current customers of this business and the future targets for this e-commerce. Understood the target I had to understand the tasks that they needed to complete on the website considering both business and consumer buyers, comparing them also with market and product competitors.

After this understanding I was able to proceed to a wireframe stage to define all the features required and the basic structure of the website, also considering security requirements to handle customer’s personal and payment info.

I was then planning to define the branding of JenksBrands and to use that to create an interactive mockup, to get client sign off for both and go over the front and back-end development.

Discovery

To create a solution I always start from the why so from understanding the key areas as much as I can. I do this at the beginning of every project during the discovery phase.

To get a proper picture of the requirements for this website I started by understanding and defining the main goals, and the key metrics to track.

Discovery / current business, market, payments

/ current data / 

To start I reviewed the current database of active and inactive clients (which I already knew from the client’s brief was meant to be converted into e-commerce users), to understand the types of users in percentage (business or consumer), their normal amount of orders and frequency, their current preferred payment methods, their common requests to the business owner as well as the business managing methods and practises.

/ competitors /

To better understand the market, and its users, I researched and studied competitor brands (same products), similar businesses (same market) alongside successful and unsuccessful e-commerce with similar goals.

/ user data-flow /

To define the user data flow, particularly related to payment information, I worked with the data from the current customers and the requirements given by the clients. I identified the payment methods in cash, card and invoice. Then I studied the available options from payment handler Stripe and, working with the developers, I combined their API data flow with the product data and user flow. With these, I created the first version of the User Data Flow, User Payment Flow and Payment Logics Flow.

/ business workflow and tools /

To understand and define the structure of the admin dashboard, I worked with the client.

This allowed me to see not only his current digital and analogue practices but also the pro and cons of them. I was also able to study and use his current workflows and tools for both the online and offline sales (as they were both going to be integrated into this new site).

With this understanding, I was later able to simplify and streamline some of the existing practices (aligning them to the new functions of the website) and to adapt or convert them, to a new cohesive digital workflow (later tested and presented in the form of an interactive wireframe).

Discovery / Users

With these initial data and knowledge, I started to evaluate and test a selection of possible hierarchy for the website content and main users tasks, JTBD and personas connected to them. In particular, to validate hierarchy assumptions and to find possible issues or grey areas, I started to understand the differences between a business user flow and a consumer user flow, considering for both of them also the connected admin user flow.

Discovery / results

• Goals
  1. Create an e-commerce custom experience direct to B2B and open to B2C
  2. Structure the e-commerce to be easily managed by one person
  3. Support online and offline sales (and payments)
  4. Integrate with a fulfilment partner

• Targets
  1. Businesses
  2. Focus on small local shops
  3. Pro – consumers

• Key Metrics to track:
  1. Steps to place an order
  2. Quantity of tools to manage the business
  3. Amount of repeated orders

• The full definition of required managing methods

Discovery / wireframe

/ user / 

To define the initial structure, using all the knowledge gathered, I started from the common elements of the e-commerce (shop page, product page, basket and checkout), then I added the custom elements required to meet the specific user and business needs. When the e-commerce user side initial structure was completed I moved to the business side.

/ admin /

To structure the admin side I considered, again, first the common e-commerce elements, starting from the structure defined for the user, I applied the extra features related to the specific business-admin flow (like impersonating a user to make an order on their behalf or to support). Then with the key metrics studied before, compared and combined with the standard e-commerce metrics and the existing business workflow practises, I created the map for the management dashboard. After a few rounds of optimisation and simplification (to provide only what was needed with no superfluous or redundant information) I combined them into their wireframe structure.

Discovery / Branding

Using the gathered knowledge regarding the industry and his competitors, as well as the user target information, and combining these with the current single products Branding, I created a cohesive Brand Design System to market all the different products and brands under the ‘JenksBrands’ brand and to create a shared marketplace for all of them.

Shapes connected to the Natural world are obviously organic, so they had a harmonious soft structure. All the 3 existing JenksBrands had naturally made products ( this was one of their strength and selling points) and each brand image was coherent in the shapes and colours with this product strength; they were consistent in this overall theme whilst still keeping their own identity.

So I took the key elements and colours from the four sub-brands and I combined them to one cohesive brand identity, also updating and improving each sub-brand. The new JenksBrands logo itself followed the same criteria of harmonious softness, simplicity and connection to nature of the sub Brands.

Prototype / UI

When the wireframe, and so the structural foundation of the product, have been tested by user testers, engineers and the client, and once it was approved, I was able to move in the next step of the process creating a mobile-first UI.

I first considered which elements were present on the tested wireframe, then, using the Branding created before, I defined a hierarchy of colours and shapes. With these, I created first the main building blocks of the UI (such as buttons, headers, dropdowns, text headings etc.). Once the main elements were ready I worked page by page, following the wireframe, creating the mobile UI of both the user and the admin sides of the product.

I then made an interactive prototype, of the mobile version, using Invision and principle, to test this UI with users and engineers and finally to get approval from the client.

With the mobile UI fully tested and approved, I moved from narrow to wide creating the tablet and desktop UI versions the product. This UI then went through the same testing process described above.

With the full UI, presented in an interactive prototype, I defined and ran an internal user testing with a controlled group of 20 people. Using the feedback gathered I made the needed adjustments and got the final approval from the client to move to the development phase.

Development

With a clear structure, a defined UI, interactive prototypes, and comprehensive data flow and user flow, I started to work closely with the engineers. Thanks to these resources, the product was clear, and everyone knew exactly what to do.

During the build, I use my full understanding of the product, and my technical understanding, to support the developers to find solutions and make adjustments when needed.

Front-end

The Build started from the desktop front-end development. During this, I helped by providing detailed and specific material (like existing prototypes for specific pages, flows, micro-interaction animations etc.) and by testing the solutions during the building process.
Once the fully-responsive front-end was completed, I organised and also took part in the full testing on every supported device and browser. When all the feedback from this was implemented, I simultaneously ran a user usability testing, providing a specific task to the users (for both user and admin side), and provided the front-end to the client to test (and show progresses).

Back-end

With the front-end completed, I again worked closely with the developers in building the back-end to make sure that all the functionalities were built according to specs, providing specific user and data flow when needed as well as helping them finding solutions where any agreed flow or functionality wasn’t working as expected of fully feasible to build.
As I did for the front-end development, here as well I organised and ran testing throughout the back-end development and final testing on all devices and browsers.

Content

Once the development was proceeding I worked with the client to create the content for the website. Even more, using the knowledge gathered above about users and the new brand guidelines, I guided the photo shooting for the products.

When the product was fully built, and all the content was ready and uploaded, I organised a final full functionality testing and user usability testing.

Once it was fully tested the site went live.

It was advertised by the business owner on one side and on the other side, a welcome email was designed to allow existing customers to transition to this new product.

Alongside going live I worked together with the account manager and the developer manager to create simple and comprehensive documentation and guide for the client, provided together with full training. These were provided in a pdf format supported by video snippets created with Loom.

Post Live Results

Since its launch, the site was able to increase the number of orders from returning customers by over 20%, and increase the customer amount from 50k to 65k.

The need for support in placing an order has been drastically reduced, and a good amount of great feedback has been given by customers.

The client reports that the time and complexity of managing his business has been reduced as well, thanks to easy access to the info he needs and full reliable integration with the fulfilment partner.