Website Design

Company - Loop

Stage 1: Setting expectations and strategy

Project task

I was asked to design the content for Loop’s first website launch and this project had a deadline of one week. Here is the process that guided how I approached and designed the content.

Questions to start:

~ Who is our audience? How many types are there?

~ What are the targeted pains that we want to address so that users can see what the product can solve for them?

~ What is the full extent to Loop’s product capabilities? Do we want to convey this through broad concepts, or does Loop prioritize granular detail?

~ What values dictate our brand content personality?

Identify the problem

Create content that can outline the product's abilities and appeal to the user, while keeping a basic flexible structure for future scalability.
Be thorough in Loop’s objective and values, despite being the early stages of the business.
Convey value propositions to users, user specific pages for shippers and third-party logistics companies (the two main target audiences), and core product services
Include components of interaction: demo request, user pages, contact page, designing the base structure of a standard B2B and B2C website.

Research objectives

1. Learn the priorities and goals of users from marketing, sales, product design, and data team
2. Discover capabilities of the product
3. Research which pains users have and how our product solves them

Stage 2: Researching internal and external

Low fidelity sketch of website:

Research

Methodology:
- Gathering user pain, persona, and interests by speaking with teams that work directly with the user (customer success, sales, product).
- Conducting user accessibility tests and implementing feedback

User Personas Based on Research

As a user, I need to understand what services Loop offers, how that would apply to me as a shipper/carrier/3PL, and what additional benefits would make this service worth purchasing.
As a user, I need to understand Loop’s core values and brand. What is the brand value and what are they willing to do for me and my business?
Is Loop beneficial to my team’s current workflow. Will Loop make my workflow easier and smoother, or will it add an additional point of maintenance that takes time and money from my business?

Gathering specific pain per user

As a shipper, my external pain points include...

being unable to address a large volume of invoice discrepancies, instead picking and choosing significant amounts that disrupt the business's overall finance
using too much manpower on manual auditing, which limits business to staff numbers
taking up too much time manually integrating data into bookkeeping system
losing money because my team can't address discrepancies that are too insignificant, eventually building up and impacting business — scalability at risk.

As a 3PL: External pain points include...

being unable to scale business because with each customer added to network, a new internal workflow to cater to that customer leads to a more complex system of bookkeeping via Google docs or excel sheets.
integrating data manually can’t handle scale or volume
resolving disputes for clients take time and create friction for a 3PL, stuck between communicating for the two parties that are involved in the dispute

Stage 3: Strategy, draft and outline

After meeting with sales, product, customer success, and users, we decided to divide the website into three interactive pages: one for shippers, carriers, and third-party logistics.

Priorities with content:

Communicate Loop's value propositions
Emphasize the solution Loop brings: its new approach to freight logistics and how its services can enhance audits, invoice processing, and payment flow
Incorporate industry-specific terms to describe the user's potential interaction with Loop and legitimize its service

Medium fidelity designs:

Bird’s eye outline of the website:

[Top header]: what is our main selling point/feature
_{Draft: cutting edge technology that can take in your data and add to your system seamlessly}

[Short blurb under header]: what that selling point can do for the user
_{Draft: we have an advanced language processing system that can automate audits and help the user manage payments}

[Header + blurb on the first selling point feature]
_{Draft: automating your audit without compromising the quality that comes from manual inputting}

[Header + blurb on the second selling point feature]
_{Draft: features of managing payment such as quick pay, scheduling large volumes, and calculating contract rates}

Finalizing draft with higher fidelity designs

At this point, plugging and drafting as the pages come in from design. We know the basic concepts that go into what section, now it's all about the character count, punchy user-friendly language, and headliners.
‍

Final product

These designs and content were given to a brand management site, who then edited and implemented the content. Click into the designs to see current site.

Home

About

Work

Contact

Website Design

Company - Loop

Stage 1: Setting expectations and strategy

Project task

Questions to start:

Identify the problem

Research objectives

Stage 2: Researching internal and external

Research

User Personas Based on Research

Gathering specific pain per user

Stage 3: Strategy, draft and outline

Priorities with content:

Medium fidelity designs:

Bird’s eye outline of the website:

Finalizing draft with higher fidelity designs

At this point, plugging and drafting as the pages come in from design. We know the basic concepts that go into what section, now it's all about the character count, punchy user-friendly language, and headliners.
‍

Final product

Home

About

Work

Contact

Website Design

Company - Loop

Stage 1: Setting expectations and strategy

Project task

Questions to start:

Identify the problem

Research objectives

Stage 2: Researching internal and external

Research

User Personas Based on Research

Gathering specific pain per user

Stage 3: Strategy, draft and outline

Priorities with content:

Medium fidelity designs:

Bird’s eye outline of the website:

Finalizing draft with higher fidelity designs

At this point, plugging and drafting as the pages come in from design. We know the basic concepts that go into what section, now it's all about the character count, punchy user-friendly language, and headliners. ‍

Final product

At this point, plugging and drafting as the pages come in from design. We know the basic concepts that go into what section, now it's all about the character count, punchy user-friendly language, and headliners.
‍