ONLINE-LED-STORE

CREATIVE STRATEGY & DIRECTION

UX | UI RESEARCH & DESIGN
CONTENT STRATEGY
 PHASE 1:
Product Attributes | Priorities | Research | User Profiles
 Current Brand Assessment

Online-LED-Store is due for a make-over. With the introduction of general

automotive accessories, Online-LED-Store is not only selling “LED”products
anymore. This re-brand is needed to expand with the evolution and survival
of this company. While the current customers are business or independent
professionals outfitting work or emergency vehicles for their own pleasures, we
need to explore a general and friendlier brand & identity to broaden interest
for customers to come. We have to let our shoppers know that this brand is the
best for certain qualities (if not quality then price-point). Our shoppers have to
believe that our shop is the safest bet, and safest choice for LED and OTHER
AUTOMOTIVE products.
 Product & Brand Attributes

OUR CULTURE OUR CUSTOMER THE VOICE BENEFITS VALUES X-FACTOR

TRUST-WORTHY ADVENTURER HUMAN HELPFUL RESPECT EXPERIENCE

LOW PRICE
GENUINE ALTRUISTIC APPROACHABLE TRUST POSITIVITY
HIGH QUALITY

BRAVE &
INTIMATE BEST PAL KNOWLEDGE HONESTY EASE-OF-USE
HUMBLE

BROTHERHOOD SECRET HEROES SIDEKICK INFORMATION LIFE & SAFETY CONTENT

 Renaming Proposal for SEO

The name “Online-LED-Store” is redundant and not catchy at all. More importantly it needs

to evolve with the future of the company. “ONLINE” is unnecessary and dated, since now-a-days

all products are assumed to have an online presence. At the same time we should shift the brand’s

image gently so that we do not confuse or disorient our sensitive customers. By renaming and shifting

to “OLS,” “OTO,” “OTOLIGHTS,” “OTOSTORE,” or “OTOSHOP” accompanied by a company

explanatory tagline such as, “LED, Automotive Lighting & Goods,”will inform our customers that other

products are offered. OTO also visually looks like the front of a AUTO-mobile.

Visiting Google Analytics, popular pages that dealt with “lights” or “LED” content were the

most clicked due to the current implications of the company name. Other products then suffered

from high drop-offs. Searching social media and search engines for lighting and automotive products,

Online-Led-Store does not shine up top. FOUR STEPS: 1.) Reduce competition by using an unique and

creative name, 2.) Clear name throughout popular social networks, 3.) Rid keywords in the company

name, and 4.) Remove dashes or underscores in URL all together for better SEO.
 UX | UI Problem Statement
The guy next door need a way to feel safe, and ensured that their purchase
choice is the right choice. At the same time, they want a fluid and easy
experience to streamline their decisions making process. Because they
are afraid of new things or too many options, our customers will only be
comfortable with what they are accustomed to from previous to little or zero
experience with online shopping. Currently the website feels overwhelming
and slightly dated in flows and information architecture. Also it does not
address the honest, down-to-earth, and trustworthy approach these guys want
to respect.
 Hypothesis #1
Although studies show that locking a customer into checkout lessens drop-
off rates, I want to challenge this fact based off our indifferent and tight
customer demographics. Without proper care and attention it may hinder the
online shopping experience. Amazon uses a method of fading out options
at checkout but we still need to keep a consistent look & feel so we don’t
alert and unease our customers at end of the purchase flow. The user-flow
from shopping to checkout needs to be closely analyzed and tested by our
target users. I believe by ensuring the customers their safety while addressing
whatever concerns they may have before the checkout process, we will
achieve more purchases through the completion of user goals and tasks. We
will know this to be true when we see a slight increase of checkouts through
tracking and analytics.
 Hypothesis #2
By cleaning up the homepage we will encourage optimization of user flows
to exploring other areas of the site. I believe by cleaning up the homepage,
making it feel safe, comfortable, and easy to navigate through visuals, content
and information architecture, we will achieve a less stressful and overwhelming
e-commerce shopping experience with lesser drop-offs after our landing
page. We will know this to be true once we compare tracked analytics.
 Hypothesis #3

We are not trying to compete with our Amazon store. So we need to

distinguish certain use-cases to separate our online presence and Amazon
store. Amazon is already a top preference for usability which is trusted by
everyone. It provides a general yet predictable pleasant shopping experience.
We need a better on-boarding process for users to sign up or sign-in to the
OLS shop. We need to integrate deals, bundles, wholesale options, blogs,
news, hot items, and coupons to our product. We will be benefiting from
the separation of the two use-cases instead of competing with each other.
Amazon’s convenience provides to some customers while other groups may
benefit from or are more satisfied with our personal shop. We will know this to
be true when we see an increase of users on the OLS site.
 OLS Research Plan
Research Goals:
Discover problems dealing with the current OLS website while better understanding our user’s everyday work, personal goals and

motivations, what they need and why they need it, and what pains them.

Audience:
A diverse pool of recent OLS users. Location doesn’t matter as much but age groups should be divided to track time and progress.

Methods:
Company Resources: Interviews, Insights, & Google Analytics

1-3 Customer Surveys

3-5 User Interviews

Hypothesis:
I suspect major drop-offs due to unpleasant flows and visuals that may be hindering the completion of checkouts.

Professionals desire to shop on a trustworthy and simple website to get what they want quickly and clearly.

Individuals desire to shop best prices and deals, with clear specifications and details with smooth navigation.

User Task: Shop! Search and learn about products for personal or work needs.
User Goal: To be happy, content, and satisfied with their purchase at the end of the day.
 Customer Experience
OLS is a safe and trust-worthy place where respectable volunteers and
enthusiasts can explore an array of lighting and vehicle goods catered and
suitable to their own specific needs in leisure and at the comfort of their
own home. Our mission is to make our road-side partners feel safe about
the experience and products offered. We offer a wealth of information and
specs for our products here at OLS along with excellent customer service:
free-shipping, flexible return policies, and chat / e-mail / phone support thats
gonna brighten up your day.
Current Customer Experience
Analysis + Insights
 User Interviews
I. Chris Kushman, 35, Manager / Volunteer Firefighter
II. Christopher Coyle, 45, Civil Engineer / Boyscout Captain
III. Charles Barton, 30, Paid On-Call Firefighter / Military / Information
Technology
 Love / Hate
Things we love: Things we hate:

Staying Active, Busy, & Working Laziness

Easy Usage, Comfort, & Organization Recklessness
Universal & Equality Hindering, Lag, & Delays
Saving Time & Money Bothersome & Hindering
Streamlined Details, Specs, Info, & Facts Criminals, Bad-guys
Photos & Videos from Customers & Company Walmart & Parking Lots
Wish-list Checkout Corporate, Snooty Service
Helping Other People Bad, Generic, & Repetitive Photos and Copy
Building Things & Being Hands-On Shoddy Design
Amazon Shop & PayPal’s Trust Bad Information Architecture, Bad Structure
Safety Buyer’s Remorse & Shady Warranty
Family & Community Bad Quality & Expensive
Persona No.1
 SCOTT THOMAS, 32
Primary Persona
“I don’t know why but I enjoy looking after people, offering someone
a helping hand, and just giving back to the community. There is this
bond when being apart of a team. I work part-time as a fire-fighter
because there is this sense of brotherhood similar to what you’d get
from the military. A team of guys who just want to make the world
Occupation a better place. It really makes me happy assuring others with care
Infomation Technology, and safety. Being a firefighter there’s a slight sense of adventure and
& Firefighter thrill but it’s not as cinematic as Hollywood. Sometimes people just
Income need help getting a cat down from a tree, checking pipes for leaks,
$67,000 escorting someone with a medical attention, etc. It’s defiantly not
Residence about the pay or the thrill, it is about community and brotherhood.
Chicago, Il Since I just got engaged too I began training and working in the I.T.
Eduction field. I’m just trying to save money towards our future - to survive as
College Degree long as I can to do the things I love doing.”
 A DAY IN THE LIFE OF
SCOTT THOMAS
Scott wakes up to his old Shepard dog, Buddy nudging him. Scott
rolls out of bed and takes Buddy for a morning jog. Once he returns
home he jumps into the shower then gets ready to leave the house.
While having cereal he skims through his books and notes just before
he rushes off to class. He reads up on specific security related topics
in the information technology field. As an ex-militant and ex-coast
guard he further develops his skills while already working in I.T.
Occupation
He misses the brotherhood aspect from being in the military, and
Information
working as a team to help others - that is why he became a paid
Technology, &
on-call firefighter. During his regular work day he often checks his
Firefighter
phone for fire-runs updates and other emergencies. After work, he
Income
takes his truck and dog for an off-road adventure, always taking the
$67,000
long way home to enjoy the breeze, nature, and the sunset. Some
Residence
nights he has dinner alone with the dog, or with his parents, with his
Chicago, Il
firefighting buddies, or fiancé. Before bed he watches TV series such
Eduction
as Archer, Family Guy, and other shows streamable online while also
College Degree
browses prodcuts for his truck, offroading, and fire runs.
 SCOTT THOMAS, 32
Behavioural Tribes
Auto Enthusiasts, Unseen Heroes, Wolf Pack,
The Good Samaritans, Outdoor Enthusiasts.

User Goals
Occupation 1.) Find products
Information 2.) Research products
Technology, & 3.) Purchase Products
Firefighter
Income Pain Points
$67,000 1.) If his heart is not in it, he won’t do it. He loves clarity and ease.
Residence 2.) Misses team work, if something is too corporate it is too sterile.
Chicago, Il 3.) Dislikes people that are bad role-models. He needs to feel trust.
Eduction 4.) Terminology needs to be specific to industries yet generic so it is
College Degree easier to search and find products late at night.
Persona No.2
 FRANKIE BELLEFLEUR, 53
Secondary Persona

“I’ve been in the business for decades. A lot has changed within
the years: there’s the convenience of technology, then there’s my
son getting ready to expand our business - heck I even got myself
a granddaughter now. I want to keep my business up and running
Occupation but sometimes shopping online can be a headache to deal with. I
Civil Engineer, & rather just use Amazon or Ebay, I trust them so I’ll stick with them.
Business Owner It saves me a lot of time and the trouble of going to the store, but
Income at times I want to see what I’m going to buy in-person so I go to the
$125,000 store. Usually I get caught up at home or want to spend time with my
Residence family I have three sons and one granddaughter - that is where online
Houston, TX shopping comes into the picture. I’m just looking for trust, a great
Eduction deal, a partner to do business with. It is certainly nice to have a more
Graduate Degree intimate shopping experience with intimate human interactions.”
A DAY IN THE LIFE OF
FRANKIE BELLEFLEUR
First thing at 6 am he sips coffee as he reads business articles and
news on his iPhone. As the morning progresses he prepares lunch
for his youngest son in high-school. Once little Jimmy hops on the
school bus, Frank quickly gets ready. At work he checks and replies
to his e-mails and makes all the necessary phone calls needed. At
the office computer he browses sales from his e-mail subscriptions,
then researches new, interesting, or improved products that may
help his employees get the job done. For his vehicles, he searches for
good prices, quality, and new products that would make his business
reliable and modern. After lunch, he goes on-site and orchestrates
people around. He also speaks with the concerned community to
inform them about safety, what, and why they are doing what they’re
doing as civil engineers. By 5:30 pm he goes home and squeezes
in time to work on his own truck before and after dinner. Being a
business owner he seldom gets to work hands-on. Between going
to bed, he watches shows on the Home Improvement, History, and
Discovery Channel with his family, while he browses things for his
truck on his mobile. He moves items from his wish-list to his cart and
checks-out.
 FRANKIE BELLEFLEUR, 53
Motivational Tribes
Do-It-Yourselfers, Auto Enthusiasts, Family Guy,
The Good Samaritans, Outdoor Enthusiasts

User Goals
1.) Browse products
Occupation
2.) Research products
Civil Engineer/Owner
3.) Purchase Products
Income
4.) Save items for later
$125,000
Residence
Pain Points
Houston, TX
1.) He is too busy, really needs something streamline his shopping.
Educution
2.) Discouraged when things are messy and can’t find what he needs.
Graduate Degree
3.) Buyer’s Remorse, “What if...”
 PHASE 2:
MVP | User Flows | Site Map | Wireframes
MASTER DESKTOP FLOW
MAJOR LANDING
MAIN ENTRY POINTS PRODUCT PAGE
MAIN TASKS: PAGES
> Browse/Find Products
> Add Products to Cart
> Begin Checkout

Homepage
1st Action 2nd Action 3rd Action
Notes: Clean, Human, Builds
Trust, Good Reviews, Recently
Viewed, New & Updated. Users
Direct Visitor need to be impresed by our
company. We need to build Search Feature Search Results Page
Returning Customer
awareness. Click Search Bar > Scrolls down and
Types in URL
> Types Keyword Finds Product
add to cart

Deep Links Side Navigation Feature

Organic Search Visitor YES
HOW TO HOW TO FIND Clicks Category >
Opens web browser and ADD TO CART?
LAND? A PRODUCT? > Expands Menu +
searches for keywords. Applications / Specialty +
Browsing Page

Vehicle Specific Specialty Page

Promo Visitor
Category Page Finds Product > Clicks to
User clicks on something
open Product Page NO
they stumble on.
(Banner, Email, PPC, etc.) Applications / Specialty
Clicks Category>
Product Page Goes to Browsing Page
Specialty Page Vehichle Specific Page
User Clicks into Finds Product > Clicks Continues Browsing
Notes: Above the fold -should Vehicle Specific Pages to open Product Page
include “Frequently bought
together” or “Customers who Notes: 3rd Action reqquired only if
bought this item also bought.” users are curious, want to browse, or want
specific and more defined categories.

Notes: Should only take 2-3 clicks or actions to find what they want based on competitors.

MAJOR LANDING
PRODUCT PAGE
PAGES

Homepage
1st Action 2nd Action 3rd Action
Notes: Clean, Human, Builds
Trust, Good Reviews, Recently
Viewed, New & Updated. Users
need to be impresed by our
company. We need to build Search Feature Search Results Page
Click Search Bar > Another Product Page
awareness. Scrolls down and
> Types Keyword via Frequently Bought
Finds Product
add to cart Together Items
or Recommendations

Deep Links Side Navigation Feature Confirmation Pop-Up

HOW TO FIND Clicks Category > YES + Product Overview
ADD TO CART? Begin Checkout
A PRODUCT? > Expands Menu + Recommended Products
Applications / Specialty + Frequently Bought Together
Browsing Page

Continue Shopping
>Clicks outside the pop up
Vehicle Specific Specialty Page window or closes it, or via
Category Page Finds Product > Clicks to “continue shopping” option.
open Product Page NO >Animation of product
Applications / Specialty minimalising into MiniKart
Clicks Category> Feature
Product Page Goes to Browsing Page
Specialty Page Vehichle Specific Page
User Clicks into Finds Product > Clicks Continues Browsing
Notes: Above the fold -should Vehicle Specific Pages to open Product Page
include “Frequently bought
together” or “Customers who Notes: 3rd Action reqquired only if
bought this item also bought.” users are curious, want to browse, or want
specific and more defined categories.

Notes: Should only take 2-3 clicks or actions to find what they want based on competitors.
 CHECKOUT FLOWS
SHOPPING CHECKOUT OPTIONS ORDER CONFIRMATION COMPLETE ORDER
MAIN TASKS: ENVIRONMENT
> EDIT CART
> CHECK OUT AS GUEST
> CHECK OUT PAYPAL EXPRESS
> CHECK OUT W/ CREDIT/DEBIT
> CHECK OUT AMAZONPAY

Default Checkout
1. Review / Edit Cart
List of Item & Quantities, tax,
subtotal. Add Promo Code / CREDIT/DEBIT
Discounts? Enters Payment Details and REVIEW & SUBMIT
Billing or Clicks ORDER
“Same as Shipping?”

2. Shipping Options
Defaulted to Free Shipping,
then other options, and zip OR
code/ address required.
SUM TOTAL
Express Checkout
SELECT SAVED / ADD
MiniKart Feature YES SUBMIT ORDER
SHIPPING ADDRESS EVERYTHING
Making the Shopping Cart Prompts Users to Sign In OKAY? + Confirmation
visible at all times to promote
AMAZON PAY
free shipping and tax - less
anxiety for users, less drop
off
TWO WAYS TO Log In YES
BEGIN CHECKOUT OR
SIGNED IN?
NO
Shopping Cart Icon
Accessible on all screens
PAYPAL EXPRESS
on top right main
navigation bar
NO Click to Create
Click to Edit
New Account /
Information
Password

EXISTING YES
Sign In
CUSTOMER?

NO

Continue as Guest
Pop Up Window to enter
Name and Email

Note: Option to create an

account at the end of
checkout.
MINiKART FEATURE FLOW

MAIN TASKS:
> Remove Item
> Move to Saved For Later
> Begin Checkout
> Sign In / Create An Account MOVE TO
CART

REMOVE
ITEM

CART
OVERVIEW

MY SAVED
LIST

BEGIN
CHECKOUT SIGN IN

LOGIN / POP UP
MINiKART HOME SIGN UP WINDOW

CLOSE
/ EXIT
SAVE FOR
LATER
REMOVE
ITEM

CHANGE
QUANTITY
SITE MAP
O.O HOME GLOBAL NAVIGATION

0.4 LOGIN 0.5 CREATE AN

0.1 LIVE CHAT 0.2 WHO ARE WE? 0.3 CONTACT US
MY ACCOUNT ACCOUNT

MAIN NAVIGATION
1.0 PROMO BAR
0.4.1 MY ACCOUNT

1.0.1 NEWS
0.4.2 ADDRESS
3.0 SIDE NAVIGATION 2.0 SEARCH 4.0 MINI KART 5.0 MY CART

1.0.2 SALES 0.4.3 PAYMENT

2.0 RESULTS + FILTERS CART OVERVIEW / SHIPPING DETAILS
TYPE

1.0.3 TRENDS CHECKOUT OPTIONS / 0.4.4 MY ORDERS

PAYMENT

CATEGORY

REVIEW & SUBMIT

CONFIRMATION

6.0 BROWSE

OFF-ROAD & EMERGENCY & FIRST

SERVICE HAULING & TOWING GENERAL MARINE SALES
RECREATIONAL RESPONDERS

NEW
SPECIALITY PAGE

SUB SPECIALITY PAGE

PRODUCT PAGE
 PHASE 3:
Visual Design & Content Stategy | Competitive Analysis
| Prototypes
Visual Content Analysis
Currently, OLS may be perceived by customers as a generic carrier of LED knock-offs
imported from Asia. Photos need to be tasteful, watermarks need to be removed,
content needs to be organized and placed properly. We need to ensure our customers
that we offer higher value to our products at a lower price point. We need to pivot
the current perception to something like IKEA is to furniture or TRADER JOE’S to
groceries. We are the “go to” shop for everyday LED lighting. Although we offer
lower prices our products are still highly usable, reliable, trending, and high-quality
along with our customer support of being knowledgeable, respectful, intimate,
approachable, and friendly. Since the competition is fairly small in the LED industry
we have time to achieve a higher boost in customer conversion through improvement
in content. Our content’s voice and visuals should be very genuaine and human, not
corporate, sterile or generic. We shouldn’t bombard users with advertisements. Since
our customers are DIY addicts and arrays of Engineers, they have an sub-conscience
sense of where things should be, what works, and what doesn’t. Having excess
content may come off as fake, counterfeit, deciteful, and unsafe.
Visual Content Competitive Analysis
PHOTO OVERVIEW
PROS: Clean, Clear, Variety, Good
Angles

CONS: Sterile, Generic, Static,

Boring. Images are vvwRepetitive
redundant angles. The images should
be ordered from the exciting, large
picture, action, then end with small
details, specifics at the end.

COPY OVERVIEW

PROS: Informative, SEO. Answers,

when, where, what, why? Material
keywords: “shatterproof.” To the
point.

CONS: Sterile, Generic, Tasteless.

Advertises & Highlights optional
products sold differently.
PHOTO OVERVIEW
PROS: Clean, Clear, Sexy, A good
kind of sterile. Order of importance.

CONS: Not enough angles. Same

images for different colours. Doesn’t
show how it looks like on. Doesn’t
show how it looks like applied to a
vehicle.

COPY OVERVIEW

PROS: Informative, Detailed,

Numbers, How to Install, Power,
Material: “shatter proof, heat
resistant, dust-proof, water resistant.
Flash Patterns. Bullet point features.

CONS: Lengthy, Generic, Boring,

PHOTO OVERVIEW
PROS: Clean, Clear, Variety of
Angles, Measurement and scale.

CONS: Doesn’t show how it looks

like on. Doesn’t show how it looks
like applied to a vehicle. Doesn’t
show how it looks like in specific
colours. Generic, Doesn’t stand out.

COPY OVERVIEW

PROS: Informative, Detailed,

Numbers, How to Install, Power,
Material: “moisture, dust,
temputure.” Assurance via Warranty.
Bullet point features.

CONS: Lengthy, Generic, Boring.

SUGGESTIONS FOR PHOTO REFINEMENT
First photo should be the big bang to gather interest. It needs to show action, human interaction and
involvement either in a car or their hand in the photo. Remove the water mark. People are always going
to copy and steal photos online and in the industry. Consider other options, like bumper stickers, or a
logo on your product instead. The watermark makes the company seem overly cautious and unsafe.
Customers may perceive it as tacky and trying too hard. It’s not helping your overall image. By keeping a
consistent photo gallery people will get to know your imaging choices and style. Photos galleries should
be reduced. Less is more. The following photo can be an image of the same product of various views.
To save space consider photographing two of the same products in opposite directions. Think of all the
necessary angles. People want specific images for different colours and options. Show the product in use
on a vehicle. Photograph different colours. Video tape variations of movement.

SUGGESTIONS FOR COPY REFINEMENT

Structure it wisely. The first description paragraph should be fun, bragging, making customers feel this is
the best choice and option on the market. Should try to answer when, where, what, why? No more than
4-5 sentences. Keep it short and sweet. Don’t over share here.

Tone & Voice: The light-hearted charm and wit of Archer the Spy meets the expertise of sidekicks
such as Alfred, butler of Batman, and Kitt the car from Knight Riders. The tone should be friendly and
approachable. It should have human qualities, admirable, unpretentious, interesting, and genuine. It
should not be boring, snotty, generic, sterile, or advertising anything.

Bullet point things into categories. This is where you can over-share to an extent. Order information with
the most important content first. Features, Is it Element Proof?, Materials, Warranty, Accessories, Etc.
WHAT TO ASK TO EVALUATE COPY

Is it informative? Correct answer: YES

Does it sound trust-worthy and safe? Correct answer: YES

Is it snotty or pretentious? Correct answer: NO

Is it interesting, funny, engaging, and exciting? Correct answer: YES

Is it too much, over the top, over-sharing, or too lengthy? Correct answer: NO

Are the most important information/details placed on top? Correct answer: YES

After skimming through the entire copy, I personally would buy the product. Correct answer: YES
WHAT TO ASK TO EVALUATE PHOTOS

Is it exciting? Does stands out with the competitor’s images? Correct answer: YES

Is it informative? Does it feel fresh and clean? Correct answer: YES

Does it look trust-worthy and safe? Correct answer: YES

Can you see someone using it? Does it feel human? Example, A face, or hands. Correct answer: YES

Are the images ordered by most salable and important first? Correct answer: YES

Do the images match the product description? Correct answer: YES

Do you have different products shown in the image group? Correct answer: N

After skimming through the entire image gallery, I know exactly what I’m buying. Correct answer: YES

I know how the style looks. I know how the colour looks on and off if applicable. Correct answer: YES

I get an idea how the product works, I can see the product applied onto a vehicle. Correct answer: YES
COPY EXAMPLES AND
MOOD BOARD
COPY EXAMPLES AND
MOOD BOARD
 PART 4, NEXT STEPS:
Ideas for the Future | Final Thoughts | Other Features
Bravery Neu Bravery In-the-Moment Brick Solid Bravery Bonded by Bravery
HEX (E16B3E) HEX (E26B2E) HEX (EE5E23) HEX (DD592E) HEX (E2592D)
CMYK (8, 71, 84, 0) CMYK (8, 71, 94, 0) CMYK (1, 78, 100, 0) CMYK (8, 79, 93, 1) CMYK (7, 80, 94, 0)
RGB (225, 107, 62) RGB (226, 107, 46) RGB (238, 94, 35) RGB (221, 89, 46) RGB (226, 89, 45)

Current Color Palette