ShippingToGo Logo

App & Responsive Website

ShippingToGo

UX Research | Paper & Digital Wireframes | High-Fidelity Prototype

Project Overview

This platform allows the user to compare between different types of shipping methods and shipping companies around the world and offers the best solution for sending parcels. ShippingToGo came to me as a new product in his infancy. The client already conducted a small research, I made a persona and a story out of it and finally defined the problem.

My Role

Product & UI/UX Designer for this project.

I was in charge of part of the UX research, paper & digital wireframes (which cannot be displayed here) and high-fidelity prototype.

UX Research

User Persona | User Story

User Persona

Marta is a married woman who has a successful online business. She sells many items to many countries around the world every day. She can't find the best solution for sending parcels easily. She also wants to have a way to compare fairly the shipping methods she can use.

ShippingToGo - User persona

User Story

Creating a user story helps us understand the user's perspective and understand more his pain points.

User StoryShippingToGo - Responsive website design

Define

User Problem Statement

Problem Statement

Problem Statement

Marta is an owner of a successful online store
who needs to send parcels, compare between shipping methods and get the best one
because she needs to manage her business and not dealing with such things.

Ideate

Paper & Digital Wireframes

Paper Wireframes

The ideate phase contains some serious steps in the way to a final product. First, I started sketching some ideas for the home page using pencil and a paper and using the client's desires. After I have five different sketches, we started brainstorming on the sketches and finaly decide on the main structure of the product. These paper wireframes are not authorized to be displayed here becasue of contracts between the client.

Digital Wireframes

After we decided on the basic structure of the product, I started to sketched them on Adobe XD and make digital wireframes out of it. In this part, we can see how elements in the product should appear and organized. The next step is to create a Low-Fidelity Prototype, which indicates us how the user should intercat and move through the product. These digital wireframes are not authorized to be displayed here becasue of contracts between the client.

Prototype

High-Fidelity Prototype | Visual & Interaction Design

ShippingToGo - Responsive website designShippingToGo - Responsive website design