20

TOOLS TO DESIGN
USER-FRIENDLY ONLINE
STORES
By CommerceBlend
 IN ORDER TO CREATE A MEMORABLE ONLINE
EXPERIENCE, IT IS ESSENTIAL TO ALIGN THE
DESIGN PRACTICES TO THE USER’S NEEDS AND
EXPECTATIONS 1. COLLABORATION …………………………………..….…Pag 3
2. EFFICIENCY AND SPEED……………………………Pag 9
3. PERSONALIZATION…………………………………Pag 13
User experience is not just about design, it is
about integrating the user’s psychology into 4. ACCESSIBILITY………………………………..……………Pag 18
the design in order to evoke an special 5. TESTING……..………………………………………..……….…Pag 22
emotion between customer and brand.

CommerceBlend created this free list with 20

tools that will help you personalize, design, Download more
test and improve your site based on the user's ecommerce resources
experience and behavior.  Enjoy! here
1. Collaboration
Back to menu

“
One of the biggest problems we all face
in product development is getting
everybody on the same page regarding
the vision for the product under
development. A sure-fire method for
getting everybody to understand a
project in the same way is to have
“
everybody working together throughout
the project.

UX Matters
Read more
Balsamiq Mockups $$

Balsamiq Mockups is a wire framing

tool that helps you  work faster and
smarter.  Perfect “in-between tool”
for Product Managers, Developers
and Designers. Mockups makes
wire framing and interaction easy by
getting  immediate and meaningful
feedback.

Features:
Features
• Apple
• Android
• Interface Library
• Whiteboard Sketching
https://www.balsamiq.com/
 Concept Inbox $$

Easily prototype ideas and

collaborate with the rest of the
team. Upload live visual notes
and comments and keep
everyone up to speed with
customized notifications.

Features:

• Unlimited files
• Work on the go
• No coding skills required
• Realistic animations

http://conceptinbox.com/
 $$ Red Pen

Super easy tool for collaboration. Point and

click to give feedback. Everyone sees
comments live as they happen. With Red
Pen, you’ll see who has the page open. It
feels just like they’re standing next to you,
without the annoying hovering or pressure.
Organize projects, keep track of versions
and get everyone involved.

Features Features:

* Unlimited collaborators
* Highly praised support
* Live comments and notes
* Private or public feedback
https://redpen.io/
 https://www.invisionapp.com/
InVision $0

Simplify your feedback process by

having clients, team members, and
stakeholders comment directly on your
designs. User test your prototypes
directly from an iPhone. Capture
recordings of interactions with your
prototypes while seeing users' faces
and hearing their voices.

Features:
Features
* Design prototyping tools
* Boards: flexible spaces to share
ideas
* Web and mobile design
 $0 Origami
Features:
Origami is a great tool for instant iteration,
• Scroll, swipe and tap and to collaborate directly with developers
components by exporting code snippets that your
• Full screen presentations engineers can use. It is also a powerful tool
• Prototype for desktop, mobile or for fine-tuning animations and interactions.
tablet. Ideal for the detail stage of a project.

http://facebook.github.io/origami/
 2. Efficiency/Speed
Back to menu

“
In an age where internet speeds
have galloped ahead to full pelt,
web users expect almost instant
speeds when browsing online. In
fact, research has suggested that
practically half of all online“
consumers expect a web page to
load in two seconds or less.

Shopify – Editorial Team

Read more
 $ Pingdom

Pigndom lets you identify what

about a web page is fast, slow,
too big, what best practices
you’re not following, and so on.
The team at Pingdom have
tried to make it useful both to
experts and novices alike.

Features:

* Interactive microsites
* eBooks and infographics
* Over 1000 professionals on
board working for the team

https://www.pingdom.com
 $0 GTmetrix
GTmetrix's Report Page neatly
summarizes your page performance
from different regions and provides
actionable recommendations on how
to optimize it. Get your page's  load
time,  total page size  and  total
number of requests.

Features:

* Track performance with

monitoring graphs and alerts
* Annotate areas of interest and
set dates

https://gtmetrix.com/
 Google Page
$0 Speed

Google Page Speed Insights

analyzes the speed of a website
on mobile and desktop devices
and makes suggestions on how
to improve it. This tool has a big
focus on mobile performance.

Features:

* Easy to use platform

* Page Speed Google Rank
* Customized suggestions and
solutions

https://developers.google.com/speed/pagespeed/insights/
 “ Personalization goes a step
beyond customization in that it
doesn’t just affect the way things
look to users, it also is the way
things feel to users. It delivers
the content users want it, based
“
on their past use, their
preferences, or their location. 

UX Magazine
Read more

3. Personalization
Back to menu
 Woopra $$

Assist customers in a more personalized

way by seeing their entire history when
your team interacts with them. Customer
Profiles will tell you their lifetime orders,
purchase history, promotions used, and
all other activity – in 100% real-time.

Features:
Features
* AppConnect all your tools
* Real time analytics
* Personalized customer
experiences

https://www.woopra.com/
 $ $ Crazy Egg

Great tool to see study user habits. It

generates heat maps that show clicks,
scroll and referral sources. You can get
better understanding of how different
segments of customers experience your
website. If you run a blog, you would see
how people read your article.


Features:

* Easy to set up
* Free heat map
* Heat map , scroll map, overlay
and confetti tools.

http://www.crazyegg.com/
Site Apps $$
SiteApps allows you to customize
how the apps behave depending
on the user data and behavior.
Based on BTBuckets or Google
Analytics data, you can choose
when the apps will appear, who
will see them and how the apps
interact with visitors.


Features:

• Hundreds of free aps

• Instantaneous free
recommendations
• Personalization filters
http://siteapps.com/
 Usability Hub $$$$

Usability Hub allows you to upload

a file (landing page, website, logo
or marketing piece) for an specific
test and ask people what they recall
from it. Easy and fun to use.

Features:

• Features
5 different tests (click, 5
seconds, navigation, question,
preference)
• Demographic data collection

https://usabilityhub.com//
 4. Accessibility
Back to menu

“
What stops people from interacting
normally with your site? This is not
just about disability but could also
be about technology. Those who are
using an old version of Internet
Explorer probably won’t have the
best experience on a modern “
website. Here are some tools to
help with this issue.

Crazy Egg
Read more
 $ AChecker
A free tool to check the
accessibility of a website.
Submit a page by its URL
or uploading the HTML file
and evaluate the web page
based on a wide variation
of international guidelines.

Features:

• Markup validation
• Customize standards
• Groups and users
management
https://gtmetrix.com/
 $0 W3C Validator

Check errors and validity in

web documents. Analyze the
HTML and XHTML markup of
your webpage.

Features:

• Documents written in the

most markup languages
• SGML, HTML, XHTML, SML
• Includes related resources

https://www.pingdom.com/
 $ Stylify Me
This tool help designers quickly gain
an overview of the style guide of a
site, including colors, fonts, sizing
and spacing. This tool allows the
designer to research sites efficiently
without the need to inspect each
element.

Features:

• Free tool
• Easy to use
• Headers, images,
typography and text

http://stylifyme.com/
5. Testing
Back to menu

“
User testing doesn’t have to be
lengthy, complicated or formal. The
important thing to remember is to
stop, validate and refine. When we
were re-imagining the Uber app, we
performed a lot of informal testing by
asking family, friends, colleagues to
“
perform specific tasks for key
scenarios. 

Shalin Amin
Head of Experience Design - Uber
Read more
 Chalkmark $$

Use Chalkmark to increase

your customer conversion and
task oriented success rates by
getting quick feedback on
designs before you implement
or update them.

Features:

•
•
Heat maps
Click density grid
Features
• Intuition tests
• Custom selection zones

https://www.optimalworkshop.com/
Morae $$$ Morae offers an all-encompassing testing
experience for its users. Morae gives you
the ability to record a user's interactions
with your application, site, or product, and
allows multiple people to remotely observe
the study, collaborate, and take notes--all
in real-time.


Features:

* Editable groups
* Stencils and mimic interface
elements
* Real time collaboration

https://www.techsmith.com/morae.html
https://gtmetrix.com/

$$ Browser Stack

Test real desktop, mobile and tablet browsers.

It provides a wide range of development tools
for testing. Your personal cloud of physical
mobile and tablet devices, instantly available
for mobile browser testing. Our list is
constantly updated with the latest and
greatest of Android and iOS devices, like
iPhone, Nexus, and Samsung Galaxy.

Features:

* Track performance with

monitoring graphs and alerts
* Annotate areas of interest and
set dates

Build, publish and A/B test different ideas
on responsible landing pages. Marketing
teams can easily work together on
campaigns by assigning roles for team
members and stakeholders.
http://unbounce.com/
$ Unbounce
Features:
* Interactive microsites
* eBooks and infographics
* Over 1000 professionals on
board working for the team
 Optimizely $$

A/B, multivariate and multi-page testing

and build personalized pages for
different segments of customers. Keep
track of your customers behaviors and
experiences.

Features:
Features
• Industry leading stats engine
• Online community and support
• No technical knowledge

www.optimizely.com