The document discusses redesigning the ship page on the Ship Sticks website to make the golf club shipping process simpler for users. Insights from analytics showed users were dropping off when inputting origin and destination. A step-by-step redesign with clear instructions was created with wireframes and visual design. Testing showed users needed to see a shipment summary as they progressed through steps. The redesign is now in closed beta testing.

1. Wireframing & Protyping/Visual Design/Creative Direction

2. Re-design a responsive Ship Page catering
towards the everyday user.

4. BACKGROUNDAt Ship Sticks, the mission is to make golf
travel simpler, easier, and more
affordable. In 2014, U.S. airlines collected
$2.6 billion in baggage fees and
mishandled 24 million bags. The goal is to
provide golfers with a hassle-free
alternative to lugging their clubs to and
from the airport – so as to improve the
golf travel experience, increase the
number of rounds played annually, and
grow the game
BACKGROUND

5. THE CHALCurrently, most shipments are booked by
calling into a customer service
representative and one of them will book
it for you. The current ship page is very
covoluted showing too much information
to the user at once. To streamline the
process, they needed a ship page that an
average user could figure out on page
load.
THE CHALLENGE

6. Concepting began by studying the
current ship page, analyzing insights &
sketching new ideas.

7. INSIGHTSTo beign with, analytics for the Ship Page
were studied using Heap Analytics,
Google Bounce Rate & LuckyOrange. This
allowed us to see where users were
dropping off and getting stuck. From
there, conclusions were drawn based on
the numbers shown. Users seemed to be
giving up right from the beginning when
it asks them to fill in their origination and
destination. It seems too many fields were
being shown at once and it needed to be
simpler.
1. INSIGHTS
0
200
40
0
60
0
80
0
100
0
120
0
140
0
160
0
1 2 3 4 5 6 7 8 9 1
0
1
1
1
2
Returning customers

8. VERIFICATIONTo verify that the analytics were accurate,
15 people outside of the Ship Sticks
company were asked to book a shipment.
These people were watched carefully to
see where they were getting stuck.
It seems that all our the insights were
correct. 12 out of the 15 people got stuck
on the first part when asked to put in your
origination and destination. The other 3
got stuck on the add bag part.
2. VERIFICATION

9. Once the results were found, the info was presented to the
shareholders. They had no objections as they then mentioned
that the current Ship Page was designed with the customer
service representative in mind so they could book shipments
quickly. It was time for a user focused Ship Page…

10. SKETCHESThe first step was to sketch an entirely
new UX for the Ship Page. It needed to be
very user focused and present clear,
concise instructions as to what to do
throughout the booking process. A step-
by-step flow seemed to fit just right in
this circumstance.
3. SKETCHES

11. WIREFRAMESThe next step was to wireframe the
sketches. These wireframes were made to
quickly create UI elements without
thinking about colors or art direction.
4. WIREFRAMES
Travelers
Bags
Checkout
Copyright 2015 Ship Sticks. All rights reserved.
CONTINUE
ROUND TRIP ONE WAY MULTI CITY
WHERE ARE YOU SHIPPING TO?

12. THE VISUALSShipStick’s existing brand consited of 3
main colors: green, black & white. Those
colors were placed on a minimal style
canvas with big headers, big text fields
and user validation every step of the way.
The design made sure that it rewarded
the user with a verification such as check
marks if they did something right and
collapsable cards once data was filled in.
It made filling out the form fields a little
more rewarding for the user since forms
can seem very long and daunting.
5. THE VISUALS

13. After the visuals were completed, a mockup of the Ship Page
was uploaded to Invision App. It was then sent to all the
office staff (32 people) where they were asked to book a
shipment and take notes where they got stuck.

14. SHIPMENT SUMMARYWhile the staff booked shipments on the
Invision App, none of them seemed to
have a problem with the user flow. Their
main concerns was that they needed a
way to see what they were booking
throughout each step. Now that it’s a
step-by-step process, the user couldn’t
see what was done for any previous steps.
A real-time shipment summary/shopping
cart was decided upon. As the user is
adding their destinations, travelers and
bags they would see a right-hand
shipment summary update
simulataneously.
6. SHIPMENT SUMMARY

15. An updated Invision App link was sent to the staff and asked
to book a shipment on the updated mock app. 28 out of the
32 staff members loved the shipment summary and 4 didn’t
even realize it. They decided to keep the shipment summary
in the first build.

16. THE BUILDAfter the designs were approved by the
shareholders, assets were passed to the
developers via Zeplin App. The use of
Zeplin greatly reduces the guessing and
checking when the developers are
building the UI. Zeplin creates a blueprint
of your design showing padding, margins,
sizes and font types.
Currently, the app is still in closed beta
testing. They are still making tweaks to
the UX trying to improve the flow.
7. THE BUILD
require 'socket' # Get sockets from stdlib
server = TCPServer.open(2000) # Socket to listen on port 2000
loop { # Servers run forever
client = server.accept # Wait for a client to connect
method, path = client.gets.split # In this case, method = "POST" and
path = "/"
headers = {}
while line = client.gets.split(' ', 2) # Collect HTTP headers
break if line[0] == "" # Blank line means no more headers
headers[line[0].chop] = line[1].strip # Hash headers by type
end
data = client.read(headers["Content-Length"].to_i) # Read the POST data as
specified in the header
puts data # Do what you want with the POST data
client.puts(Time.now.ctime) # Send the time to the client
client.puts "Closing the connection. Bye!"
client.close # Disconnect from the client
} DEV 3DEV 2DEV 1
DESIGNER

17. Ship Page Beta: Launching soon…