RS Components.compressed
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>RS</strong> <strong>Components</strong><br />
Design of a new digital experience
Improve the homepage experience, and improve a number of key aspects:<br />
• Search box prominence<br />
• Expose the navigation<br />
• Make the quick order more prominent on page, and consolidate the logins to a single part of the page<br />
• Can we make it flexible on layout to use more of the page on bigger screens – It would be good if you could look at the stats<br />
for this do help guide what we do.<br />
Phase 1 stage focus on the UK as a starter. Once we have the proposal, we can agree where it sits in the priority for delivery,<br />
but I believe that we can change a large amount through the webmate so might not need to compete with the agile backlog.
User Strategy<br />
Discover<br />
Discuss<br />
UX Design<br />
Activities include:<br />
Activities include:<br />
Activities include:<br />
• Business Objectives<br />
• Shadowing<br />
• Walkthrough Workshop<br />
• Data Analysis<br />
• Note Taking<br />
• Competitor Analysis<br />
• Workshops<br />
• Lo Fi Sketches<br />
• Information Architecture<br />
• Wireframes<br />
• HTML Development<br />
• Visual Mock Ups<br />
• UI Style Guide
Analytics
Data Analysis<br />
5<br />
Dwell Time Width Depth<br />
Background<br />
One of the fundamental questions new customers are likely to ask is:<br />
‘why should I abandon my online shopping patterns and start a<br />
relationship with <strong>RS</strong> <strong>Components</strong>?’ Whats in it for me? Creating this<br />
customer-focused experience that will set you apart from the crowd.<br />
Question to ask<br />
Who are your customers?<br />
How do customers currently use your home page?<br />
What tasks do customers want to complete when they visit your home<br />
page?<br />
What content are customers looking for via your home page?<br />
How can you help customers find the information they need via your<br />
home page?<br />
Notes<br />
• Customers are spending only 90 sec or so on homepage<br />
• Opportunity to provide rich content for customer with larger screen<br />
sizes use screen real estate up to 1200px<br />
• Half of user are accessing <strong>RS</strong> content through mobile device and will<br />
increase over time. One of the most appealing aspects of targeting<br />
Mobile devices is a responsive website can provide a great userexperience<br />
• Repeat visitors vs New visits—search<br />
3
Usability Review<br />
68<br />
Search<br />
Improving search bar design for extra dominance<br />
Faceted Navigations<br />
Provide a way to help the user find products<br />
more easily. Faceted navigation is normally found<br />
in the sidebar of a website and contains facets<br />
(or indexed categories) and filters (which are not<br />
indexed-more on that later).<br />
Navigation<br />
Narrow selection of menu item to chose from<br />
require effort in way finding<br />
IA<br />
Re -categorise and structure information<br />
• Labeling: And best representation of<br />
product information<br />
Overload<br />
Reduce short-term memory load by<br />
reducing information on page and<br />
allow page to be scannable.<br />
• Navigation Systems: Reduce number of<br />
click allows customer to move through<br />
information quickly<br />
• Search Systems: How users look for<br />
information auto suggestion<br />
Streamline the number of elements<br />
on your page.<br />
Aesthetics <br />
Site is out of date and would benefit<br />
from a refresh (including changing<br />
the colour scheme, the usage of<br />
images of text and being responsive)<br />
to improve trust
Homepage UX Best Practice<br />
Amazon<br />
Best Practice<br />
The navigation opposite:<br />
John Lewis<br />
Darnell<br />
eBay<br />
• are extremely large,<br />
• are many levels deep,<br />
• are made up of many micro-websites and subsections,<br />
• cater to many audiences,<br />
• have multiple entry points.<br />
Websites of this size and complexity bring some unique<br />
navigational challenges. Opposite shows the difference<br />
between <strong>RS</strong> and some competitor websites.The header<br />
navigation divides the content of the site into appropriate<br />
sections, making it straightforward to find the relevant section.<br />
The navigation options are presented using a neutral colour<br />
palette, allowing the products to take precedence over the<br />
navigation features.
Workshops
Homepage Workshop<br />
Background<br />
Cluster problems, issues, needs and themes into groups, discuss<br />
technically feasibility.<br />
• Set Agenda<br />
• Discuss the goals<br />
• Deliver an outcome<br />
• Sketch
UX Storyboarding
Agile UX<br />
Card<br />
Conversation<br />
Confirmation<br />
Improve search box prominence<br />
Enable frequent users to use shortcuts.<br />
Add UI prominence to repetitive tasks<br />
Efficiency,<br />
Expose the navigation<br />
Reduce number of clicks or keystrokes<br />
required to complete goal.<br />
Effectiveness<br />
Make the quick order more prominent<br />
on page, and consolidate the logins to<br />
a single part of the page<br />
Providing an interface that allows user to<br />
easy learn and control goals Freely.<br />
Productivity, Efficiency<br />
Flexible on layout to use more of the<br />
page on bigger screens<br />
Providing an interface that allows user to<br />
easy learn and control goals Freely.<br />
Efficiency, Effectiveness
IA
IA Rationale<br />
Search<br />
Add extra dominance to the most important<br />
section of the page<br />
Faceted Navigations<br />
Visibility of faceted browsing, accessing<br />
information organised according on new<br />
classification system.<br />
Promote Trust and credibility <br />
Present users with a reason that <strong>RS</strong> service is<br />
different from and better than competition .<br />
Primary business objective<br />
Large attractive headers. Most of these<br />
images are photographs which directly relate<br />
depth of range.<br />
Language<br />
Re classification and structure<br />
information and use of language.<br />
Secondary business objective<br />
Promoted product that will make a profit<br />
Visual Hierarchy<br />
Arrangement and presentation of elements in<br />
a way that implies importance.
Design
Stock Photography<br />
Hero Image Static<br />
Hero Image Static with text<br />
15
UI Navigation<br />
Menu Default Red<br />
Quick Quote<br />
What Component?<br />
LOGIN | REGISTER<br />
£0.00<br />
Menu Default White<br />
What Component?<br />
HI JOHN APPLESEED<br />
£0.00<br />
Tab Panel<br />
<strong>RS</strong> PRO BEST SELLE<strong>RS</strong> INVITED COLLECTIONS [5] PUBLIC COLLECTIONS [2]<br />
16
UI Buttons<br />
Buttons<br />
NORMAL HOVER PRESSED<br />
ITC Avant Garde Gothic Pro<br />
BUTTON<br />
NORMAL HOVER PRESSED<br />
NORMAL HOVER PRESSED<br />
NORMAL HOVER PRESSED<br />
GHOSTED HOVER PRESSED<br />
Tabs<br />
Checkboxes & Radios<br />
Dropdown<br />
Iconography<br />
DEFAULT<br />
Option<br />
DEFAULT<br />
Option One - Selected Dropdown<br />
Option Two<br />
Option Three<br />
Option Four<br />
17
Final Concept<br />
Search<br />
Add extra dominance to the most important section of the page<br />
Navigations<br />
Top sections of pages to draw<br />
users in as opposed to left<br />
sidebars<br />
Utility Navigation<br />
secondary actions and tools, such as contact,<br />
services, store locations and language<br />
selectors<br />
Primary business objective<br />
Large attractive headers. Most of these<br />
images are photographs which directly relate<br />
depth of range.<br />
Simplify Language<br />
Secondary business objective<br />
Promoted product that will make a profit
Final Concept<br />
Search<br />
Add extra dominance to the most<br />
important section of the page<br />
Navigations<br />
Top sections of pages to draw<br />
users in as opposed to left<br />
sidebars<br />
Checkout<br />
When user add something to the cart.<br />
show notification feedback<br />
Contrast<br />
Use color to highlight or contrast<br />
differences
Test
Participants<br />
Guerrilla Test was made in order to have a clearer overview homepage for<br />
mobile. Research aimed to compare mobile to desktop experiences.<br />
• All participants do shopping on-line on desktop and were familiar with at<br />
least an e-commerce platform.<br />
• All participants browse/explore products on desktop and purchase at<br />
least a product through desktop in the past.<br />
Mos<br />
Age: 30’s<br />
Fashion Business Owner<br />
All day internet usage<br />
Mobile Tech-savvy: High<br />
Motivation: Looking for<br />
specific cable ties”<br />
Greg<br />
Age: 20’s<br />
Royal Mail Contractor<br />
maintenance<br />
Mobile Tech-savvy; Mid<br />
Motivation: Labels for his<br />
company<br />
Geoff<br />
Age: Late 40’s<br />
Furniture Designer<br />
New to <strong>RS</strong> <strong>Components</strong><br />
Mobile Tech-savvy; Low<br />
Motivation: Just Browsing<br />
• Despite that 2 out of 3 participants liked mobile version and have no<br />
hesitation on buying through mobile.<br />
<br />
Design Based Questions<br />
• Please describe this page and what you can do here?<br />
• How would describe the organisation of this page?<br />
• Do find this page user friendly to navigate?<br />
• Do you find this page appealing?<br />
• Do fonts, colour, images easily readable?
Desktop Questions<br />
Design Based Questions<br />
• Please describe this page and what you can do here?<br />
• How would describe the organisation of this page?<br />
• Do find this page user friendly to navigate?<br />
• Do you find this page appealing?<br />
• Do fonts, colour, images easily readable?<br />
Tasked Based Questions<br />
• Please locate the Parcel Tracking button<br />
• On arrival, you would like to find panasonic products. Explore page to see if<br />
anything meets your needs?<br />
• How do you feel about the level and relevancy of New Products (Very much<br />
satisfied, satisfied, not satisfied)
Mobile Test<br />
Please describe this page, what you can do here?<br />
Design Based Questions<br />
Participant #1<br />
“Search is the first thing I<br />
would use”<br />
• Please describe this page and what you can do here?<br />
• How would describe the organisation of this page?<br />
• Do find this page user friendly to navigate?<br />
• Do you find this page appealing?<br />
• Do fonts, colour, images easily readable?<br />
Participant #3<br />
“Would prefer more space<br />
between menu items for<br />
fingers”<br />
Feedback<br />
• All 3 users were complete task 8 seconds or less<br />
• 3 out of 3 users successfully completed tasks with minimal to<br />
no-support<br />
Participant #1<br />
“Like the swipe reminds me of<br />
Amazon. Nice size images<br />
Participant #2<br />
“Can to view product using<br />
button drop menu”<br />
8<br />
seconds<br />
7 /10 8 /10
Thank you
Change language