Mark Russell User Experience Architecture Portfolio
Mark Russell User Experience Architecture Portfolio Rocket Lawyer on mobile & tablet Rocket Lawyer provide simple, low-friction access to the law though a guided proccess of creating essential legal documents and by connecting users with their value for money network of lawyers.
Looking to provide a responsive solution to their legacy desktopbrowser only web properties I undertook an exercise to redesign their existing product for mobile. This included revisiting their document ‘interview’ with a flexible system designed to work across devices. The result formed part of a future vision for the company.
Sensitive design for tablet, vertical or horizontal
iPad
11:50 AM
http://www.rocketlawyer.co.uk/
Would also adapt for mobile
1:1 mobile to browser parity
Welcome back Blake Rendezvous | Sign-out | My Account | About & terms
Tenancy Agreement for 157 Redwood ...
Tablet experience responsive and adapts by default
100%
Rocket Lawyer
All changes saved
Show tasks Business
Show extras
Dates Aenean pellentesque dictum imperdiet?
Family
iPad
11:50 AM
100%
Help ?
For example, Vestibulum ac nisi magna. Lorem ipsum dolor
Rocket Lawyer Lawyer consultation
http://www.rocketlawyer.co.uk/
Sit amet consectitir Adipiscing elit
Welcome back Blake Rendezvous | Sign-out | My Account | About & terms
Tenancy Agreement for 157 Redwood Road Business
People Blake Rendezvous Landlord
Family
Pierre Gonzalez Tenant Natalie Argossian Tenant
Lawyer consultation
Interview Help & guidance
Property details Dates
Hide tasks
All changes saved
Dates Aenean pellentesque dictum imperdiet? For example, Vestibulum ac nisi magna.
Provisions
Your document eSign Lawyer review Alerts
Help ?
Lorem ipsum dolor Activity & alerts
Help ?
Morbi turpis tortor, gravida eu convallis tristique? For example, Vestibulum ac nisi magna.
Show extras
Sit amet consectitir Adipiscing elit
Back
Next 18% done
Lorem ipsum dolor Sit amet consectitir
View your document
Adipiscing elit
Morbi turpis tortor, gravida eu convallis tristique?
Help ?
For example, Vestibulum ac nisi magna.
Term
Activity & alerts
Help & guidance
Assured Shorthold Tenancy Agreement
Lorem ipsum dolor Sit amet consectitir
This agreement was made on 7 January 2013.
Adipiscing elit
Between Blake Rendezvous, (the Landlord) and Pierre Gonzales (Tenant 1) and Natalie Argossian (Tanant 2)
Back
Next 18% done
View your document
Document preview only a swipe away
Property Details
Mark Russell User Experience Architecture Portfolio Back-office tools for Rocket Lawyer Rocket Lawyer’s suite of documents are created using a sophisticated back-office tool. Two things are combined which result in a finished, legal Rocket Lawyer document: 1. The ‘interview,’ a guided set of questions the end user answers on the Rocket Lawyer website. 2. The document which is constructed on the fly from the user’s interview answers.
The company were using a disparate set of tools and writing scripts by hand to create the interview and document templates. I redesigned the full back-office document creation suite, defining a common tool for all parts of the process and abstracting every part of the process into a consolidated and uniform experience. The pages that follow show a small portion of the interface specification for the tool, a large suite of documents that comprised of five iterative project phases.
Phase 3 – Interview structuring – Setting-up a conditional Question Defining the condition requires a target Answer to be selected and then the conditional test applied to it. The latter works in the same way that conditional text is set-up in the new Document Tool.
Document List
New:
§
Q
1
Question
A
Answer
C
Document
Conditional
Property address
C
A
Address line 1:
C
A
Address line 2:
C
A
City/Town:
C
A
County:
C
A
Postcode:
2
Q
Interview
3 Roles Set
P
Question
Delete
C
Conditional
Delete
1
2
Furnished or unfurnished
3
Show this question when
2
Show this question when
Q
Is the property being let furnished or unfurnished?
Q
Is the property being let furnished or unfurnished?
A
Furnished or unfurnished
A
Furnished or unfurnished
Is:
Furnished liability
Is:
4
Equal to ==
Is the landlord or tenant liable for insuring the supplied furnishings? A
§
Q
Is the property being let furnished or unfurnished? A
C
Equal to ==
This value:
Insured furniture.
This value:
6
5
Furnished
Furnished
Landlord Details P
Landlord’s name Q
C C Q
A
First name:
A
Last name:
Landlord’s address Address line 1:
C
A
Address line 2:
C
A
City/Town:
C
A
County:
C
A
Postcode:
P
3
Landlord’s name:
A
C
6. If the value was of a string type, the value field is a text-box. 7. If the IN operator is selected multiple values can be selected to form the condition.
Q
Property Details
Q
5. If the answer is of a pre-defined type (radio buttons, checkboxes or select list) the answer can be selected from a pre-populated select list of the answers.
Page
Property details P
Available operators are: Equal to == Not equat to != Less than < Greater than > Less than or equal to = IN Is not empty (Not null) Is empty (Null)
P
Section
Design mode:
Interview Structure §
2. The document creator then selects the Answer upon which the conditional test will be applied.
4. The conditional question and answer are then displayed with controls to select the operator, and the value.
9. Or the current set of conditions (in this case 1) can be saved and set.
Tenancy Agreement for a Flat
1. After the Define Answer button is clicked all questions have a small Conditional control applied to them.
3. The Wizard then updates to allow the specific conditional test to be defined.
8. Further conditions can be set using AND or OR logic.
Hello Matt | Sign-out
Document Builder
Add another condition (optional) AND
4
OR
8
2
Save and update the document Save
Cancel
9
Q
A
C
Q
C A
Company name:
A
Company registration number:
A
VAT registration number:
A
Furnished or unfurnished
IN
7
Legal status
Details about the Landlord’s company
Is the property being let furnished or unfurnished?
These value(s):
What is the Landlord’s legal status?
P Type of company Variation: Standard Agreement Creator: Matt Poulsom Edited: 20 Feb 13 Published: Not published
Q
Is:
Legal status
C
Show this question when
Test
Furnished Unfurnished
Phase 3 – Interview structuring – Grouping set conditionals Example 1
Example 2
IF “Furnished or Unfurnished” Is equal to == “Furnished”
IF “Furnished or Unfurnished” Is equal to == “Furnished”
1
88
AND IF “City/Town” Is equal to == “Grimsby”
Example 3
2 3
IF “Furnished or Unfurnished” Is equal to == “Furnished”
4
IF “City/Town” Is equal to == “Grimsby”
AND
OR
IF “Lorem ipsum dolor sit amet?” Is equal to == “Consectetir” AND
AND
AND
OR
Group selected
A set of simple rules governs the way conditions are resolved by the system and when grouping controls are displayed. i. If no or partial groups have been the order the conditions have been added. ii. Grouped conditions are resolved before ungrouped conditions. iii. Grouping controls are available if there are more than three groupable conditions (or groups of conditions) and there is a combination of AND and OR logic. In this example no groups have been in order. Also, rule 3 means grouping controls are available. 1. Here the document builder has selected the top two conditions, ready to group.
AND
AND
AND
After the Group selected button is used the selected items are grouped. 2. A visual line surrounding the group shows how conditions have been grouped. 3. The grouping selector now extends to control the group as a whole so it can be further grouped. 4. There is also an ungroup button
5
OR
IF “Lorem ipsum dolor sit amet?” Has a value
Group selected
AND IF “Aliquam erat volutpat.?” Is not equal to = “Massa”
IF “Etiam erat libero, dapibus id tincidunt nec?” IN == “eget”, “laucus”
OR
IF “Lorem ipsum dolor sit amet?” Has a value
OR IF “Lorem ipsum dolor sit amet?” Is equal to == “Consectetir”
IF “Aliquam erat volutpat.?” Is not equal to = “Massa”
IF “Etiam erat libero, dapibus id tincidunt nec?” IN == “eget”, “laucus”
OR
IF “Lorem ipsum dolor sit amet?” Has a value
OR
IF “Aliquam erat volutpat.?” Is not equal to = “Massa”
IF “Etiam erat libero, dapibus id tincidunt nec?” IN == “eget”, “laucus”
AND IF “City/Town” Is equal to == “Grimsby”
IF “Lorem ipsum dolor sit amet?” Is equal to == “Consectetir”
AND
IF “Aliquam erat volutpat.?” Is not equal to = “Massa”
IF “Etiam erat libero, dapibus id tincidunt nec?” IN == “eget”, “laucus”
AND
IF “Lorem ipsum dolor sit amet?” Is equal to == “Consectetir”
AND
IF “Aliquam erat volutpat.?” Is not equal to = “Massa”
IF “Furnished or Unfurnished” Is equal to == “Furnished”
IF “City/Town” Is equal to == “Grimsby” OR
IF “Lorem ipsum dolor sit amet?” Is equal to == “Consectetir”
Example 5
IF “Furnished or Unfurnished” Is equal to == “Furnished” AND
IF “City/Town” Is equal to == “Grimsby” OR
Example 4
OR
IF “Lorem ipsum dolor sit amet?” Has a value
Group selected
Here the currently grouped conditions and two others are selected, ready to be further grouped.
AND IF “Etiam erat libero, dapibus id tincidunt nec?” IN == “eget”, “laucus”
IF “Lorem ipsum dolor sit amet?” Has a value
Group selected
5. The inner group retains its grouping line and is now encloed by a second,
third and so on groups. now been selected for grouping. Note. If a non-contiguous set of conditions is selected for grouping the display will re-order the conditokns so that they are visibly grouped.
Group selected
Here we show the example of three groups. Because rule iii no longer applies (There are only two possible groups to group) only the remove group button is displayed next to the groups.
Phase 2 – WYSIWYG + Wizard – Adding Answers to Cyclical text blocks Answers can be added within Cyclical Text blocks just as they are added elsewhere. 1. The Wizard for this Answer shows the common tools for defining Answers. 2. The system makes an assumption that this Answer is related to the enclosing Cyclical Text block’s dependent question. (See note below.)
Hello Matt | Sign-out
Document Builder Document List
Tenancy Agreement for a Flat New:
A
C
Answer
Conditional
Design mode:
Cyclical
R
Reference
eSign Setup
Tenancy Agreement for a Flat
Interview
1 A
Note. The system should assume that Answers added within a Cyclical Text block are children of the Question defined for the Cyclical Text block. If, later the Answer is used elsewhere this relationship can be broken.
Document
Answer
Delete
1
Answer name:
2
Associate this answer with a question
Last Name
Create a new question
1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis gravida dolor eu scelerisque.
2.
Answers not dependent on the Cyclical Text block’s dependent Question can also be included within the block.
Praesent magna,
A Landlord Name: First Name
Select from list of existing questions
Other answers for this question
nibh, sagittis ac ultricies non, porttitor eget elit. Integer pretium, tortor ac
A Tenant name: First Name
tincidunt pellentesque, libero purus ipsum consectitir elementum nisl, sit amet tempus C
3.
Refer t o clause [X] for metus sem et sem.
C
volutpat sit amet volutpat sed, semper nec dolor, ullamcorper
velit a metus sodales ac fringilla nunc tempus.
Test answer Pender
tincidunt pellentesque semper, A Company name: Company name
dolor nisl congue libero, eget convallis elit ante vitae quam. Duis magna augue,
4.
3
Nulla ultrices odio vitae ligula blandit at suscipit sem auctor. Proin blandit, enim
2
Tenant name?
A Landlord Name: Last, Name ligula
4
Save and update the document Save
Cancel
Nulla ultrices odio vitae ligula blandit at suscipit sem auctor. Proin blandit, enim tincidunt pellentesque semper, dolor nisl congue libero, eget convallis elit ante vitae quam.
5.
6.
Nunc id imperdiet sem. Nullam tincidunt arcu nisi, id viverra metus. Cras sagittis massa:
A Tenant name: First Name
Congue libero:
A Tenant Name: Last Name
Nunc id imperdiet sem. Nullam tincidunt arcu nisi, id viverra metus. Cras sagittis massa: Congue libero:
7.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere. Morbi semper dui eget orci tempus fermentum. Proin eu gravida libero.
Variation: Standard Agreement Creator: Matt Poulsom Edited: 20 Feb 13 Published: Not published
Test
Mark Russell User Experience Architecture Portfolio Jon Baines Tours responsive design Jon Baines Tours operate study tours for medical professionals. They take small groups all over the world, allowing them to immerse themselves in the culture of their destination and meet local, professional counterparts to learn, understand and gain expert insight. See jonbainestours.co.uk
Jon Baines Tours approached me to define a ground-up redesign of their web presence. Taking the exisiting content and data the website was re-imagined for the current market. Mobile devices were considered from the ground-up. The resulting site was architected over four configurations: — For desktop web browsers and landscape tablets. — For protrait tablets — For landscape phones — For portrait phones
Jon Baines Tours responsive website For desktop & landscape tablets +44 (0) 20 7223 9485 +61 (0) 3 9343 6367
Jon BainesTours Home
Medical & Professional tours
Cultural tours
Tailor made tours
For portrait tablets
Contact us
Tour leaders
About us
+44 (0) 20 7223 9485 +61 (0) 3 9343 6367
Jon BainesTours Medical & Professional tours
Booking
Home
History of Medicine Cruise from Venice to Istanbul
+ Optional Extension to Istanbul
3 - 14 September 2013
14 - 17 September 2013
Itinerary at a glance
• Maecenas augue mauris, cursus in posuere a, fermentum non elit.
• Quisque in dignissim ipsum.
• Vivamus vitae pulvinar nulla, vel varius ante. Vestibulum at ultricies augue.
• Class aptent taciti sociosqu ad litora torquent per conubia nostra
• Suspendisse consequat, nibh ac congue posuere, turpis ipsum interdum purus
About the tour Cruise to a wide variety of fascinating destinations in the company of intelligent like-minded people. Hear about the history of medicine in the Adriatic and Aegean, with lectures by expert speakers including Dr Simon Chaplin, Director of the Wellcome Library, and Stephen Phillips. Embark in Venice and cruise to the coast of Croatia, visiting Zadar, Split, Hvar and Dubrovnik. Continue to Kotor in Montenegro, Sarande in Albania and onto Itea for a visit to Delphi. Cruise through the Corinth Canal and stop at the elegant town of Nafplion in Greece and visit Mycenae and Epidaurus, followed by visits to Athens and Lesbos. Continue to Turkey to visit Troy and Gallipoli and finish your tour in the magnificent ancient city of Constantinople - modern day Istanbul. From here, fly back to London or alternatively, spend three more nights in the exciting city of Istanbul on the optional extension. There is also the option to take a pre-cruise tour to Venice and Padua for four nights. NB - we hold a limited number of cabins per grade and these will be allocated on a first come, first served basis. On the three night extension to Istanbul, explore this vibrant and historic city, with its many ancient monuments and its cosmpolitan contemporary life. You may also choose to have a four night pre-cruise extension in Venice and Padua, which includes a visit to the oldest anatomical theatre in the world at the University of Padua. For full itineraries and costs for the extensions, please contact Jon Baines Tours.
Download our brochure History of Medicine Cruise from Venice to Istanbul
• Non dignissim ipsum magna ac justo. • Morbi lobortis, nibh eget eleifend dignissim, ligula enim dapibus nisi • Tempor quam lorem vel enim. • Quisque massa orci, ultrices suscipit suscipit id, congue id enim.
Tour cost £1,250 per person Relevant links Institute of Historical Research
Book now
Tour leaders
History of Medicine Cruise from Venice to Istanbul
Rialto Bridge, Venice
About the tour
Booking
About us
+ Optional Extension to Istanbul
NB - we hold a limited number of cabins per grade and these will be allocated on a first come, first served basis. On the three night extension to Istanbul, explore this vibrant and historic city, with its many ancient monuments and its cosmpolitan contemporary life. You may also choose to have a four night pre-cruise extension in Venice and Padua, which includes a visit to the oldest anatomical theatre in the world at the University of Padua. For full itineraries and costs for the extensions, please contact Jon Baines Tours.
14 - 17 September 2013 Sue Weir is a former Westminster Hospital nurse and a registered Blue Badge Guide. She developed a special interest in medical history and runs her own company Medical History Tours which takes groups and individuals to places of medical historical interest both at home and abroad. She has written Weir's Guide to Medical Museums in Britain, has a Diploma in the History of Medicine from the Society of Apothecaries, is a past-President of the History of Medicine section at the Royal Society of Medicine and is also President of the British Society for the History of Medicine.
Rialto Bridge, Venice
Cruise to a wide variety of fascinating destinations in the company of intelligent like-minded people. Hear about the history of medicine in the Adriatic and Aegean, with lectures by expert speakers including Dr Simon Chaplin, Director of the Wellcome Library, and Stephen Phillips. Embark in Venice and cruise to the coast of Croatia, visiting Zadar, Split, Hvar and Dubrovnik. Continue to Kotor in Montenegro, Sarande in Albania and onto Itea for a visit to Delphi. Cruise through the Corinth Canal and stop at the elegant town of Nafplion in Greece and visit Mycenae and Epidaurus, followed by visits to Athens and Lesbos. Continue to Turkey to visit Troy and Gallipoli and finish your tour in the magnificent ancient city of Constantinople - modern day Istanbul. From here, fly back to London or alternatively, spend three more nights in the exciting city of Istanbul on the optional extension. There is also the option to take a pre-cruise tour to Venice and Padua for four nights. NB - we hold a limited number of cabins per grade and these will be allocated on a first come, first served basis. On the three night extension to Istanbul, explore this vibrant and historic city, with its many ancient monuments and its cosmpolitan contemporary life. You may also choose to have a four night pre-cruise extension in Venice and Padua, which includes a visit to the oldest anatomical theatre in the world at the University of Padua. For full itineraries and costs for the extensions, please contact Jon Baines Tours.
History of Medicine Cruise from Venice to Istanbul
Sue Weir is a former Westminster Hospital nurse and a registered Blue Badge Guide. She developed a special interest in medical history and runs her own company Medical History Tours which takes groups and individuals to places of medical historical interest both at home and abroad. She has written Weir's Guide to Medical Museums in Britain, has a Diploma in the History of Medicine from the Society of Apothecaries, is a past-President of the History of Medicine section at the Royal Society of Medicine and is also President of the British Society for the History of Medicine.
Need more information?
+44 (0) 20 7223 9485 +61 (0) 3 9343 6367
Booking
Terms & conditions
Cultural tours
About us
Privacy
Tailor-made
Contact us
• Quisque in dignissim ipsum. • Class aptent taciti sociosqu ad litora torquent per conubia nostra • Inceptos himenaeos. • Suspendisse consequat, nibh ac congue posuere, turpis ipsum interdum purus
Sue Weir is a former Westminster Hospital nurse and a registered Blue Badge Guide. She developed a special interest in medical history and runs her own company Medical History Tours which takes groups and individuals to places of medical historical interest both at home and abroad. She has written Weir's Guide to Medical Museums in Britain, has a Diploma in the History of Medicine from the Society of Apothecaries, is a past-President of the History of Medicine section at the Royal Society of Medicine and is also President of the British Society for the History of Medicine.
Contact us
Copyright © 2013 Jon Baines Tours Ltd
• Morbi lobortis, nibh eget eleifend dignissim, ligula enim dapibus nisi • Tempor quam lorem vel enim. • Quisque massa orci, ultrices suscipit suscipit id, congue id enim.
Tour cost £1,250 per person
Download our brochure History of Medicine Cruise from Venice to Istanbul
Like
94
Medical & Professional tours
Booking
Terms & conditions
Cultural tours
About us
Privacy
Tailor-made
Contact us
Copyright © 2013 Jon Baines Tours Ltd
About the tour
Medical & Professional tours Cultural tours Home
Embark in Venice and cruise to the coast of Croatia, visiting Zadar, Split, Hvar and Dubrovnik. Continue to Kotor in Montenegro, Sarande in Albania and onto Itea for a visit to Delphi. Cruise through the Corinth Canal and stop at the elegant town of Nafplion in Greece and visit Mycenae and Epidaurus, followed by visits to Athens and Lesbos. Continue to Turkey to visit Troy and Gallipoli and finish your tour in the magnificent ancient city of Constantinople - modern day Istanbul. From here, fly back to London or alternatively, spend three more nights in the exciting city of Istanbul on the optional extension. There is also the option to take a pre-cruise tour to Venice and Padua for four nights.
Tailor made tours
Leaders
Booking
About us
History of Medicine Cruise from Venice to Istanbul 3 - 14 September 2013
14 - 17 September 2013
Rialto Bridge, Venice
Itinerary at a glance • Maecenas augue mauris, cursus in posuere a, fermentum non elit. • Vivamus vitae pulvinar nulla, vel varius ante. Vestibulum at ultricies augue. • Quisque in dignissim ipsum.
Embark in Venice and cruise to the coast of Croatia, visiting Zadar, Split, Hvar and Dubrovnik. Continue to Kotor in Montenegro, Sarande in Albania and onto Itea for a visit to Delphi. Cruise through the Corinth Canal and stop at the elegant town of Nafplion in Greece and visit Mycenae and Epidaurus, followed by visits to Athens and Lesbos. Continue to Turkey to visit Troy and Gallipoli and finish your tour in the magnificent ancient city of Constantinople - modern day Istanbul. From here, fly back to London or alternatively, spend three more nights in the exciting city of Istanbul on the optional extension. There is also the option to take a pre-cruise tour to Venice and Padua for four nights. NB - we hold a limited number of cabins per grade and these will be allocated on a first come, first served basis. On the three night extension to Istanbul, explore this vibrant and historic city, with its many ancient monuments and its cosmpolitan contemporary life. You may also choose to have a four night pre-cruise extension in Venice and Padua, which includes a visit to the oldest anatomical theatre in the world at the University of Padua. For full itineraries and costs for the extensions, please contact Jon Baines Tours.
Tour leader: Sue Weir
• Class aptent taciti sociosqu ad litora torquent per conubia nostra • Inceptos himenaeos. • Suspendisse consequat, nibh ac congue posuere, turpis ipsum interdum purus
Relevant links Institute of Historical Research
• Non dignissim ipsum magna ac justo. • Morbi lobortis, nibh eget eleifend dignissim, ligula enim dapibus nisi
Need more information?
• Tempor quam lorem vel enim.
+44 (0) 20 7223 9485 +61 (0) 3 9343 6367
Contact us
• Quisque massa orci, ultrices suscipit suscipit id, congue id enim.
Tour cost
94
Medical & Professional tours
Booking
Terms & conditions
Cultural tours
About us
Privacy
Tailor-made
Contact us
£1,250 per person
Sue Weir is a former Westminster Hospital nurse and a registered Blue Badge Guide. She developed a special interest in medical history and runs her own company Medical History Tours which takes groups and individuals to places of medical historical interest both at home and abroad. She has written Weir's Guide to Medical Museums in Britain, has a Diploma in the History of Medicine from the Society of Apothecaries, is a past-President of the History of Medicine section at the Royal Society of Medicine and is also President of the British Society for the History of Medicine.
Book now
Book now Copyright © 2013
Jon Baines Tours Ltd
Cruise to a wide variety of fascinating destinations in the company of intelligent like-minded people. Hear about the history of medicine in the Adriatic and Aegean, with lectures by expert speakers including Dr Simon Chaplin, Director of the Wellcome Library, and Stephen Phillips.
Cruise to a wide variety of fascinating destinations in the company of intelligent like-minded people. Hear about the history of medicine in the Adriatic and Aegean, with lectures by expert speakers including Dr Simon Chaplin, Director of the Wellcome Library, and Stephen Phillips.
Jon BainesTours
Book now
On the three night extension to Istanbul, explore this vibrant and historic city, with its many ancient monuments and its cosmpolitan contemporary life. You may also choose to have a four night pre-cruise extension in Venice and Padua, which includes a visit to the oldest anatomical theatre in the world at the University of Padua. For full itineraries and costs for the extensions, please contact Jon Baines Tours.
+44 (0) 20 7223 9485 +61 (0) 3 9343 6367
Book now
History of Medicine Cruise from Venice to Istanbul
Like
NB - we hold a limited number of cabins per grade and these will be allocated on a first come, first served basis.
Need more information?
Download our brochure
• Non dignissim ipsum magna ac justo.
About the tour Tour leader: Sue Weir
94
Medical & Professional tours
Book now
• Maecenas augue mauris, cursus in posuere a, fermentum non elit. • Vivamus vitae pulvinar nulla, vel varius ante. Vestibulum at ultricies augue.
For portrait mobile
+ Optional Extension to Istanbul
Tour leader: Sue Weir
Itinerary at a glance
Download our brochure
Tour leader: Sue Weir
Like
Tailor made tours
Cultural tours
• Inceptos himenaeos.
• Non dignissim ipsum magna ac justo.
Institute of Historical Research
Medical & Professional tours
• Class aptent taciti sociosqu ad litora torquent per conubia nostra
• Suspendisse consequat, nibh ac congue posuere, turpis ipsum interdum purus
£1,250 per person
Home
Contact us
Embark in Venice and cruise to the coast of Croatia, visiting Zadar, Split, Hvar and Dubrovnik. Continue to Kotor in Montenegro, Sarande in Albania and onto Itea for a visit to Delphi. Cruise through the Corinth Canal and stop at the elegant town of Nafplion in Greece and visit Mycenae and Epidaurus, followed by visits to Athens and Lesbos. Continue to Turkey to visit Troy and Gallipoli and finish your tour in the magnificent ancient city of Constantinople - modern day Istanbul. From here, fly back to London or alternatively, spend three more nights in the exciting city of Istanbul on the optional extension. There is also the option to take a pre-cruise tour to Venice and Padua for four nights.
• Quisque in dignissim ipsum.
• Inceptos himenaeos.
Relevant links
Booking
Jon BainesTours
3 - 14 September 2013
• Vivamus vitae pulvinar nulla, vel varius ante. Vestibulum at ultricies augue.
Tour cost
Tailor made tours
+ Optional Extension to Istanbul, 14 - 17 September 2013 Itinerary at a glance
• Quisque massa orci, ultrices suscipit suscipit id, congue id enim.
Tour Leaders
About us
History of Medicine Cruise from Venice to Istanbul
• Maecenas augue mauris, cursus in posuere a, fermentum non elit.
• Tempor quam lorem vel enim.
Cultural tours
Contact us
3 - 14 September 2013
Rialto Bridge, Venice
• Morbi lobortis, nibh eget eleifend dignissim, ligula enim dapibus nisi
For landscape mobile
Cruise to a wide variety of fascinating destinations in the company of intelligent like-minded people. Hear about the history of medicine in the Adriatic and Aegean, with lectures by expert speakers including Dr Simon Chaplin, Director of the Wellcome Library, and Stephen Phillips.
Download our brochure History of Medicine Cruise from Venice to Istanbul
Relevant links Institute of Historical Research
Need more information? About the tour
+44 (0) 20 7223 9485
Cruise to a wide variety of fascinating destinations in the company of intelligent like-minded people. Hear about the history of medicine in the Adriatic and Aegean, with lectures by expert speakers including Dr Simon Chaplin, Director of the Wellcome Library, and Stephen Phillips.
Like
Embark in Venice and cruise to the coast of Croatia, visiting Zadar, Split, Hvar and Dubrovnik. Continue to Kotor in Montenegro, Sarande in Albania and onto Itea for a visit to Delphi. Cruise through the Corinth Canal and stop at the elegant town of Nafplion in Greece and visit Mycenae and Epidaurus, followed by visits to Athens and Lesbos. Continue to Turkey to visit Troy and Gallipoli and finish your tour in the magnificent ancient city of Constantinople - modern day Istanbul. From here, fly back to London or alternatively, spend three more nights in the exciting city of Istanbul on the optional extension. There is also the option to take a pre-cruise tour to Venice and Padua for four nights. NB - we hold a limited number of cabins per grade and these will be allocated on a first come, first served basis. On the three night extension to Istanbul, explore this vibrant and historic city, with its many ancient monuments and its cosmpolitan contemporary life. You may also choose to have a four night pre-cruise extension in Venice and Padua, which includes a visit to the oldest anatomical theatre in the world at the University of Padua. For full itineraries and costs for the extensions, please contact Jon Baines Tours.
+61 (0) 3 9343 6367
Contact us
94
Medical & Professional tours
Booking
Cultural tours
About us
Tailor-made
Contact us Terms & conditions Privacy
Copyright © 2013 Jon Baines Tours Ltd
Book now Relevant links Institute of Historical Research
Need more information? +44 (0) 20 7223 9485 +61 (0) 3 9343 6367
Like
Contact us
94
Medical & Professional tours
Booking
Cultural tours
About us
Tailor-made
Contact us Terms & conditions Privacy
Copyright © 2013 Jon Baines Tours Ltd
Mark Russell User Experience Architecture Portfolio Aeon Timeline Aeon Timeline is a desktop Mac application that helps writers, researchers and historians plot stories and describe relationships between events over time. See scribblecode.com
I took the beta version of Aeon Timeline and fundamentally redefined the user interface, consolidating two modes into a unified view. Considerable usability enhancements were made including item editing, selection and improvements to the behaviour of the interface where events are associated with entities such as people or places.
UX and design work was combined in this project. See resaturate.com for case study.
Aeon Timeline Interface audit Long-label cut off (esp. w many entities.)
Entity 1
Entity 2
Entity 3
Event A Event A
Event B Event C
Timeline ticks switch axis between views.
Event B Event B
Event H
Event C Event D
Event D
Event E
Event E
Event F
Event F
Event G
Event G Event H Event I
x/y axis scrolling.
Entity 1 Entity 2 Entity 3 Entity 4
Existing beta: Multiple axes, text cut off, switch between entity and timeline views.
Proposed: Unified view, single axis, ability to toggle entity and story arcs, split panes. Date pref. setting: 23 May 1999 Zoom level 4 Day
Day
23 May 1999: Group 1, Item 1 23 May 1999: Group 1, Item 2 23 May 1999: Group 1, Item 3
Day 24 May 1999: Group 2, Item 1 24 May 1999: Group 2, Item 2 24 May 1999: Group 2, Item 3
Date pref. setting: 23 May 1999 Zoom level 8 Day
Day
Day
Day
Day
23 May 1999: Group 1, Item 1 23 May 1999: Group 1, Item 2 23 May 1999: Group 1, Item 3 24 May 1999: Group 2, Item 1 24 May 1999: Group 2, Item 2 24 May 1999: Group 2, Item 3
Date pref. setting: 1999 Zoom level 4 Day
Day
1999: Group 1, Item 1 1999: Group 1, Item 2 1999: Group 1, Item 3 24 May 1999: Group 2, Item 1 24 May 1999: Group 2, Item 2 24 May 1999: Group 2, Item 3
See resaturate.com for case study.
Mark Russell User Experience Architecture Portfolio Spark for Directgov Innovate Directgov Innovate were the small, rapid prototyping team within the larger Directgov organisation. We operated off-platform to provide rapid and experimental solutions to a range of teams and departments across government. Spark was a collaboration between the Department for Work and Pensions and the Department for Business, Innovation and Skills.
I was lead architect for Spark, a pan-government application that encourages cost sharing of projects within the public sector. The project involved defining a full application architecture. Also the user experience and interface for registered and public views of showcased projects, full search and categorisation, enhanced user profiles and more. Spark involved ground-up requirements gathering, research, design and documentation.
UX and interaction design work was combined in this project. See resaturate.com for case study.
Home
1 Home
Search
2
Branding
Mark Russell
Showcase
Sign-out
Search
Challenges
3
Home > Search
The home of pan-government innovation Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas eleifend ipsum, ut suscipit ligula dignissim et.
6
Duis faucibus eros eget justo sodales aliquam accumsan est fringilla. Nullam risus sem, lobortis a egestas a, pretium tristique urna.
Share your innovation Add your project to Spark >
Lorem ipsum Dolor Lorem ipsum dolor sit nomummy consectitir. Lorem ipsum dolor sit nomummy consectitir.
View
Showcase
Search
Challenges
Consistent primary navigation. Breadcrumb for orientation.
Project Name
4
Items in 4 and 6 comprise of the ten available case studies. Each should be
Lorem ipsum dolor sit amet consectitir.
Watching
Home > Showcase > Project name
Overview
2
Detail
Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
View project Play video
Case study 2 Case study 3 Case study 4 Case study 5
6
A brief introduction to Spark.
Case study 6
7
Consistent footer and copyright areas.
Case study 7
8
Area to display the most recent challenges.
Case study 8
00:00 / 18:34
View Video Showreel
View
6
View
Lorem ipsum Dolor sit amet consectetir
View
Lorem ipsum Dolor sit amet consectetir
Nullam risus sem, lobortis a egestas a, pretium tristique urna. Vivamus congue consequat neque, sit amet congue dui vulputate auctor.
Evidence & Context
View
Lorem ipsum Dolor sit amet consectetir
View
Lorem ipsum Dolor sit amet consectetir
View
Home
Date: February 2010 Organisation(s): DWP, BIS Domain: Lorem Ipsum
9
Partners: COI OPINION C H A L L E N G E
Further information is availble for this Showcase
I’ve used this project Let us know how useful it was.
10
Detail
I’d like to collaborate
11
Get in touch Contact the project owner.
7
Owner: John Peterson, DWP
13
Lorem ipsum dolor sit amet consectitir.
Lorem ipsum Dolor sit amet consectetir
Know somebody who might be interested? Send this project to a colleague.
Challenges
5
The rich media display unit can show video, audio, image and other content.
6
The item displayed is clearly disabled in the media menu.
7
Available media is available from a panel of tiles beneath the media display unit area.
8
Short description text.
9
Overview detail.
Ideas Management Competition Management
13 Challenge(s) (Type B) related to this Showcase are listed hre with alinked title, subtitle and badge.
25 July 2010 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, ridiculus mus.
Crown Copyright 2010
Robert McPherson – Kent County Council
14 Comments derived from an active Challenge related to this showcase also
13 April 2010
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, ridiculus mus.
Challenge status badge and include a button linkng to the originating Challenge.
Tags Lorem ipsum, dolor, sit amet, consectetur
1. I’ve used this project – Allows an endorsement that will show in the panel below. 2. Get in touch – Simple contact form which sends a message to the project owner. 3. I’d like to collaborate – A contact form that encourages participation. This sends a message to the project owner. 4. Know somebody ... – Simple send to a friend functionality. 12 Tags and an area for comments appear above the page footer.
Legal and IP Search
The Oveview tab of this particular showcase is selected.
11 Four functions are available promoting contact with the project owner and collaboration. These are:
Quick Detail
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas eleifend ipsum, ut suscipit ligula dignissim et. Duis faucibus eros eget justo sodales aliquam 8 accumsan est fringilla.
View
4
10 Controls lower in the page content promote switcing to content within the other tabs at 4.
Podcast
Challenge title >>
Showcase
7
Photostream
Executive Summary
Lorem ipsum Dolor sit amet consectetir
Innovation status badge. This shows the stage in the Inoovation lifecycle the current showcase has attained. The six statuses are Proposed, Committed, In Progress, Delivered, Adopted and Exemplar.
Case study 9 Case study 10
5
Rating and status area.
3
Spark Projects
5
Nullam Risus Lorem ipsum dolor sit nomummy consectitir.
2
125
4
The secondary 8 slots for showcased projects.
Watched (5)
S H O W C A S E
Diginissim Fringulla Lorem ipsum dolor sit nomummy consectitir.
Standard Spark branding, nav and breadcrumb.
COMMIT TED
3
Evidence & Context
Case study 1
basis. This, the main slot, will show the full-size video with appropriate controls. 5
Elit Consectetir
Home
1 Header
1
3
8 View
Bespoke Key Programme Branding including an appliction name (without reference to the Key) based on HM Government brand assets.
2
Got an award or opportunity? Set a challenge >
Latest challenges 4
1
Showcase page – Tab 1, Overview
12
Comments Vivamus congue consequat neque, sit amet congue dui vulputate auctor. Vivamus pulvinar, arcu non condimentum bibendum, sem quam posuere diam, quis pharetra massa diam at ante. Curabitur eget molestie est. Comment by Murray Chamberlain – DWP on 12 February 2010 at 9:32am Report this
Vivamus congue consequat neque, sit amet congue dui vulputate auctor. Vivamus pulvinar, arcu non condimentum bibendum, sem quam posuere diam, quis pharetra massa diam at ante. Curabitur eget molestie est.
OPINION C H A L L E N G E
Challenge Response
14
View Challenge
Comment by Murray Chamberlain – DWP on 12 February 2010 at 9:32am Report this
Leave a comment
Project: Key Programme Department: DWP sponsored by BIS Document: Application Architecture Prepared by: Mark Russell – Resaturate Ltd Release: 9 – Beta Final Date: 15 April 2011
Project: Key Programme Department: DWP sponsored by BIS Document: Application Architecture Prepared by: Mark Russell – Resaturate Ltd Release: 9 – Beta Final Date: 15 April 2011
Add project – Overview & Basics (1 of 3)
Header
1
The main form element selector. Switches beteween form sections.
2
The star symbol indicates a section
Add project – Messaging and Status Adding – Below mandatory threshold
2
Header
Projects can’t be published without all
2
Add your innovation
Overview & Basics 1
Media Owner & Partners
3
2
The process of adding your innovation has been split into 6 simple stages.
Project objectives
You will need to add certain information, but you can return and add things to your project at a later date.
Outcomes & budget
Required information is marked in yellow.
Notify colleagues
Basic information about your innovation 6
Publish and Make Live
15% Complete
5
4
3
5
4 6
Title & Subtitle Project title:
4
Each part of the form has a brief description setting expectations. Mandatory information is indicated by a tinted background. (See 5.) The completeion panel shows progress and encourages full completion of the form. (See later for full description.) The last item in the left menu, ‘Publish and Make Live’ remains greyed until the publishing threshold has been reached. When reached it is active and highlighted.
e.g. Carbon Reduction in Hospitals
*
You might want to consider adding: • More media including video, images and project documents.
Owner & Partners Project objectives Outcomes & budget Scope & security
Not yet published
Continue
All the required information is needed to publish your innovation on Spark.
Add your innovation
You might want to consider adding: • More media including video, images and project Overview documents. & Basics Information about your • Media objectives.
& Partners Budget information. • Owner
75% Complete
Project title:
form depending on the amount of information added to a project. If manadatory information is not complete messaging is displayed explaining this.
You might want to consider adding:
You will need to add certain information, but you can return and add things to your project at a later date.
Title & Subtitle
2
*
Sections above marked include required information.
The process of adding your innovation has been split into 6 simple stages.
• More media including video, images and project documents. • Information about your objectives.
Basic information about your innovation
Scope & security
Header
• Budget information.
3
When the mandatory information is complete it is possible to publish the project. The status panel and the top of page bands show a ‘Publish now’ button.
4
Users are encouraged to add a deeper level of information through a completion meter.
5
Hints are given about what to add in order to increase the completion meter percentage.
Mobile Food Store
Your innovation was saved successfully. Project Subtitle: When you are ready, click ‘Publish’ to go live.
Publish
Describe your innovation Brief description:
NHS Great Yarmouth and Waveney, in partnership Add your innovation Up to 100 words.
Adding – Above mandatory threshold
with the voluntary and private sectors, commissioned
The process of adding your innovation has to been split into 6 eating a Mobile Food Store promote healthy simple stages. behaviours in a targeted population
75% Complete
You will need to add certain information, but you can return and add things to your project at a later date. Required information is marked in yellow.
4
Publish now
3
Basic information about your innovation You might want to consider adding:
Brief description:
• More media including video, images and project documents. & Basics Overview
Tell us what your innovation is all about in a single paragraph.
• Information about your Media objectives. Budget information. • Owner & Partners
• Information about your objectives.
Project objectives
• Budget information.
You still need to complete all required information.
75% Complete
Adding – Post-published
Describe your innovation
Your innovation was saved successfully.
1
Spark messaging appears at the top of the page and takes the form of two horizontal ‘bands’ of information. The user action. The lower band contains supporting information and indicates next steps. Both bands can contain relevant buttons and links to push users through the process.
15% Complete
Adding – Above mandatory threshold – Push to publish Required information is marked in yellow.
Outcomes & budget
All the required information is needed to publish your innovation on Spark. Sections above marked include required information.
Media
Project objectives
Project Subtitle:
Not yet published
Overview & Basics
1
Adding – Below mandatory threshold
250 characters remaining
Outcomes & budget Scope & security
75%–Complete Editing Edits saved
Full description:
Title & Subtitle Project title:
You might want to consider adding:
Header Mobile Food Store
Project Subtitle: Your innovation was saved successfully.
My innovation
Congratulations, your innovation is now live.
Describe your innovation
You might want to consider adding: • More media including video, images and project documents. Information & about your • Overview Basics objectives. Budget information. • Media
Owner & Partners Project objectives Outcomes & budget
5,000 characters remaining
Scope & security
75% Complete
• Information about your objectives. • Budget information.
Brief description:
NHS Great Yarmouth and Waveney, in partnership Add your Up to 100 words. innovation with the voluntary and private sectors, commissioned
a Mobile Food Store promote healthy The process of adding your innovation has to been split into 6 eating behaviours in a targeted population simple stages.
You will need to add certain information, but you can return and add things to your project at a later date.
5 Editing – Unpublish
Required information is marked in yellow.
75% Complete
Basic information about your innovation
Provide a longer description to give other users a full picture of your innovation.
• More media including video, images and project documents.
Title & Subtitle Project title:
Published
Header Mobile Food Store
Your project is published.
Unpublish
Project Subtitle:
Your innovation was saved successfully.
My innovation
Describe your innovation
Your edits and updates are live on Spark.
Brief description:
NHS Great Yarmouth and Waveney, in partnership with the voluntary and private sectors, commissioned Edit your innovation a Mobile Food Store to promote healthy eating behaviours in a targeted population The process of editing your innovation has been split into 6 Up to 100 words.
simple stages.
You will need to add certain information, but you can return and add things to your project at a later date.
You might want to consider adding: • More media including video, images and project documents. • Information about your objectives. • Budget information.
Required information is marked in yellow.
Basic information about your innovation
Innovation category Lorem Ipsum
Etiam sed felis dui.
Dolor Sit
Maecenas at ultricies lorem.
Amet
In vel ligula turpis.
Consectetir
Praesent commodo
Adipiscing
Integer tellus nisl
Elit
Faucibus Sed aliquam fermentum.
Currently selected categories Lorem ipsum dolor Maecenas at ultrices lorem.
Project: Key Programme Department: DWP sponsored by BIS Document: Application Architecture Release: 9 – Beta Final Date: 15 April 2011
by: Mark Russell – Resaturate Ltd What domain are youPrepared operating within?
Project: Key Programme Department: DWP sponsored by BIS Document: Application Architecture Prepared by: Mark Russell – Resaturate Ltd Release: 9 – Beta Final Date: 15 April 2011
Mark Russell User Experience Architecture Portfolio Nakheel Working for the digital agency, Digitas, I was lead User Experience Architect on the Nakheel account. Nakheel is an infrastructure and development company based in Dubai. They are developing several land reclamation projects in the Gulf, including the Palm Jumeirah.
The Palm Jumeirah website project included full site architecture documentation based on persona development and business requirements gathering. The high-level design centered on the concept of an immersive (emotional) element and fine (rational) detail. Each part was designed to feed into and inform the other.
Gateway page (0) – Initial view A
A
This is the interactive element. (See page 8)
B
The primary navigation is shown immediately beneath the interactive element and, depending on the chosen treatment, may comunicate with A.
C
A carousel of spotlights and news is presented here. Each of three items are presented in sequence without user interaction, or, tabs can be accessed to switch beween them. The modue can flexibly contain property spotlights as well as general news. As such the visual or interactive treatment within the panel could be rich and consist of Flash content or images and text.
B
Visiting
Buying
Discovering
C Property Spotlight
News Item
Seamless design
The following cross promotions have been identified for the gateway page:
Getting there and away
D
Doing business in Dubai
E
The Community on The Palm
F
Immersive & experiential
D
A cross-link within the Visiting section.
E
A cross-link within the Investing section.
F
This promo has two links. The main title liks to the community information and the second link opens a DHTML layer with a log-in form for the NAM website.
Detailed
News Item
Nakheel endorsement
Accessibility Terms & Conditions Legal & Copyright
Contact us Nakheel Asset Management Login Newsletter sign-up
Palm Jumeirah Website Architecture
Copyright © 2008 Nakheel
18 August 2008 Page 11
Property pages – Developments level – Living (2.1.1)
Visiting
Buying
Palm Jumeirah
Palm Deira
B
A brief overview and image of the property development is shown here when the interation described in A occurs.
C
The ‘View properties’ button proceeds to the next page.
D
A warm, secondary, copy introduction orientates the user.
E
The Property search tool is available on all property related pages. This will return a set of results based on three selected criteria: Property type; Number of bedrooms and Price.
D
Overview teaser about property
Duis bibendum, odio sit amet tincidunt eleifend, libero ante vulputate nibh, ac malesuada arcu elit sed pede.
A
An interactive Palm Jumeirah map allows users to explore the different available property developments. Each development is visually highlighted on the map and provides an interaction on mouseover. Access to properties sold off-plan on the Palms Jebel Ali and Deira can be provided for by secondary interactive maps selected viafunctions at the top of this element.
Explore
Discovering
What property is available? Palm Jebel Ali
A
E
Current Property Spotlight Link directly to spotlight property’s detail (2.1.1.1) >
Property search Type
Family Houses and Villas on Frond N. Beachside large 3 to 5 bedroom houses priced between AED 500,000 and 1,000,000 ($ US 250,000 and $ US 750,000).
B
House
No. Beds
4
Price range
AED 500,000 - AED 1,000,000
AED
$ US
Go >
Fantastic beach fronted property with gardens, pool and the complete Palm Jumeirah living experience.
Be part of the community
Contact the sales team >
C
View properties >
Link to community pages (2.2) >
Opportunities on Palm Jebel Ali and Palm Deira
Property laws in Dubai
Link to Palm Jebel Ali page (2.4) > Link to Palm Deira page (2.5) >
Fusce id nulla et eros hendrerit ultricies. Maecenas iaculis risus eget enim.
Nakheel endorsement
Accessibility Terms & Conditions Legal & Copyright
Contact us Nakheel Asset Management Login Newsletter sign-up
Palm Jumeirah Website Architecture
Copyright © 2008 Nakheel
18 August 2008 Page 24
The Tourist
The Potential Ex-pat
Dieter
Helen
Engineer, Dusseldorf, Germany – age 31
Project Manager, Brighton, UK – age 26
“I’ve been working in Dusseldorf for a few years now and quite fancy a change. I could find another company here but I’ve heard the Dubai salaries are really good and the tax benefits are amazing. Plus I’ve heard there are some really interesting things going on there.”
“Dubai looks like somewhere that’s a bit different - unusual in a way, but still developed. Seems like my perfect holiday destination, exotic, sunny and with decent shopping!”
About Helen
About Dieter Dieter Graduated from his Engineering degree about eight years ago now. While he enjoys the actual work he does he’s not particularly challenged any more and thinks he could do better elsewhere. Dieter is quite adaptable. Before he went to university he travelled a bit and enjoys taking holidays to places which offer what he sees as a bit of glitz and glamour. Dieter is single, so he’s flexible in the life choices he makes. He’s quite statusoriented and materialistic. He like to buy brands that show-off the fact he’s got a bit of money. He does have high salary expectations and is attracted by the idea of low taxation and the extra money he can gain from working in a place with low taxation. Dieter is very much in tune with modern information technologies. He’ll expect to find information fast. He’s a bit lazy too, expecting stuff to be pushed to him. Like anyone though, when it comes to a big change he’ll want to know a good level of detail before diving-in. Mostly he’ll want to make sure he’s getting a good deal.
Dieter’s Key Attributes • Focused on advancing his career • Willing to take risks and likes to see himself as adventurous • Materialistic
Dieter’s Key Site Needs • Needs the key information fast. • Expects to be treated like a valued customer.
Until now Helen has holidayed in all the usual places. She’s sat on a fair few Spanish beaches and either travels with her boyfriend or occasionally with the girls. Aside from the beaches she’ll go to places like New York too. While she’s a bit of a metropolitan, or likes to think she is, she can’t think of a much better thing to be doing than indulging her true love for shopping. Other than that she quite enjoys relaxing and letting others pamper her.
Dieter’s Key Site Needs • Hates being patronised. • Likes to be made to feel important.
“I want to make the next step in my career, and I think moving somewhere like Dubai could make that easier. Also, I like the idea of changing my lifestyle as well as my job. Living in Dusseldorf is ok, but the salaries in Dubai are supposed to be better and I’ve heard you don’t get taxed as much. Then the next step is to find out if Nakheel is right for me too and what they can offer me.”
Dieter’s Content Needs
• Wants to have some fun • Likes to treat herself and will happily pay for the privilege • Doesn’t like to think too hard
Helen’s Key Site Needs • Needs to know why Dubai’s sun should kiss her rather than Spain’s • Needs to feel safe, cared-for and entertained.
Helen’s Key Site Needs • Likes to feel privileged – as if she’s wealthy and famous • Thinks she deserves the break and the sunshine
Helen’s Site Goals “I need a site that tells me all about Dubai. The place, the people and what I can see and do there. A kind of online Lonely Planet guide to the place.”
Helen’s Content Needs
What are the advantages of moving to Dubai and working there? Information about Dubai, what it’s like to live there, what activities are available, and what the culture is like. What special arrangements can/will be made for me as a new Dubai resident? These might be practical or cultural. Information about moving to Dubai, with particular emphasis on how Nakheel might facilitate this if I work for them. What job vacancies do Nakheel have currently? How do I apply if I find one I’m interested in? How does the application process work and how long does it take? What’s it like to live and work in Dubai? For Nakheel? What property is available, both to rent and buy?
• I need to know what accomodation is available. Where this is in relation to other things going on would be useful too. • What’s it like? What can I do and see in Dubai? Tourist attractions, shopping and anything else. Are there particular events in Dubai that I could time my holiday to coincide with? • What is Dubai itself like? The culture and lifestyle? Will it be a bit of a shock or is it similar in any way to the UK? Will there be a language barrier?
Helen is important to Nakeel because … The success of Nakheel is closely entwined with the success and growth of Dubai as a whole. If we can showcase Dubai in general then that can only benefit Nakheel in the long term. Nakheel is selling a lifestyle as much as it’s selling property and today’s holidaymakers could be tomorrow’s Nakheel residents.
Dieter is important to Nakeel because … He represents several key audience segments that Nakheel are trying to work with. He represents potential new Dubai residents, potential tenants and purchasers of Nakheel properties, and also potential new staff for the organisation.
The Market Categories Helen Caters For
The Market Categories Dieter Caters For • • • • • •
Helen’s Key Attributes
While Helen is a bright girl she’s heard a variety of things about the Middle East. That’s not necessarily going to curb her enthusiasm for the perfect sunny escape though. Like everybody, she wants to know what to expect when she gets to a place and if she’s going to be safe.
Dieter’s Site Goals
• • • • • • • •
If she’s being honest with herself, Helen’s would admit to being a bit of a shopaholic. She’s the type of girl who’d buy a pair of shoes she loves even though she knows her rent payment will devastate her finances the next day. Saying that she’s far from poor, having worked at her current job for a couple of years now. Helen likes to have fun when she’s not working. She and her friends spend a lot of their time in bars and clubs. Occasionally she and her boyfriend or friends swap the pebbled beach in Brighton for a sandy one in much warmer and more glamorous places.
• Tourists (local and from overseas; single as well as couples; young as well as retired; business travellers)
Residents (indigenous and foreign; owners and tenants) Potential residents Employees of Nakheel Aspirers (either to go to or buy in Dubai) High Net Worth Individuals Architects / other developers
Nakheel Personas
7 July 2008 Page 3
Nakheel Personas
7 July 2008 Page 4
Mark Russell User Experience Architecture Portfolio Travelex Travelex is the world’s largest foreign exchange bureau. I redesigned their global web presence.
The project included a full re-architecture process, user journeys, site architecture and wireframes. I completely re-scoped the endto-end sales process promoting the sale of currency online and added sophisticated currency calculation tools. the project also included proposals for extending the brand and currency exchange beyond the browser.
UX and design work was combined in this project. See resaturate.com for case study.
Select amount (fgn/local)
Continue
Select amount (fgn/local)
Continue
Continue
Travelex Purchase Flow 1 February 2007 Print page
47 SMS order number
Transaction sent to TLX
Checkout
Email travel bundle
Continue
Manual address entry
Checkout
Agree Ts & Cs/ opt-in
Offer redemption code
Email preference
Contact details
Result
Floor plan
Map
Delivery or collection
Address finder
Credit card form
Credit card form
Continue
Select pick-up date Select pick-up date
Continue
Select pick up point
Floor plan
Result list
Select pick up point
Result list
Search Map
Search
Delivery or collection
Continue
Result
Address finder
Order online & pay later
Continue
Add Cash/TC/ Cash Passport
Added extras
Buy online & pick up
Continue
Add Tip Pack
Add Buy Back Plus
Continue
Add item (TC)
Continue
Currency to
Currency from
My Wallet
Confirmation
Add item (TC)
Add item (Cash)
Product type
Currency
Select amount (fgn/local)
Add Cash Passport
Continue
Select amount (fgn/local)
Buy
More info
My Wallet
Manual address entry
Product type
Product type
Buy online & home delivery
Currency
Currency
Continue
Select amount (fgn/local)
Select amount (fgn/local)
Top up
Conversion amount
Purchase start point
Add Travelers’ cheques
Select currency
Select currency
Cash Passport
Currency converter
Purchase start point
Add Cash
Travellers’ cheques
Cash
Buy money
Entry
See resaturate.com for case study.
TRAVELEX PURCHASE FLOW
Appendix I – Process flow
Confirmation
See resaturate.com for case study. TRAVELEX PURCHASE FLOW
Customer journey no. 1 – The Purchaser
Entry point
Purchase start point
My Wallet
Added extras
Delivery or collection
Checkout
Confirm
Receive money
Knows about Travelex.
Uses the Cash view of the buy money tool.
Adds it to My Wallet. Adds multiple currencies.
Adds Buy Back Plus, but not ‘Tip pack’ to the order.
Chooses to have the order delivered
Checks out using full credit card system.
Prints the confirmation page.
The money arrives via courier the next day.
www.travelex.co.uk
$20
Retention methods
Retention methods
Retention methods
Travel bundle promotion
Travel bundle promotion
Buy back wallet
Exit message
Exit message
Eyeblaster system reminder advert “Track this rate” Desktop application promo
Potential customer drop-off points.
Travelex Purchase Flow
1 February 2007
4
See resaturate.com for case study.
TRAVELEX PURCHASE FLOW
The Travelex homepage A
Travelex UK • Change country
This wireframe represents an updated homepage, scoped to prioritise the purchase flow and present a solid foundation for the whole site.
B
For you
Travelex give you more to spend
C
Buy currency Get:
Currency converter
Cash Travellers’ Cheques Cash Passport
Country & currency:
Amount to spend in £
We’ll send you your currency, or you can pick it up at the airport when you fly.
Please select
+
Amount to buy:
-
Add this to My Wallet >
D
> Business Travel Money
A
We’ve revised the overall design of the page so the layout is more flexible. Content on the page is designed to be fluid and where applicable, application-like.
B
We have re-labelled the main two categories for personal and business customers. The lower priority links that were in the primary navigation on the existing site are relocated to the footer.
C
In the primary page location, we have the Purchase start point. This is the main funnel into the purchase flow.
D
This shows the Travelex Promise widget.
E
There is an opportunity to prioritise one promo over others. Here we’re prioritising Cash Passport as we feel there’s a lack of understanding about it. Re-labelling the product ‘Pre-paid card’ may resolve some of these issues.
F
We have futher space for additional promos and quick links. These could be used for both business and consumer products.
G
We can promote and prioritise other products and information on the page.
H
At all times we show the customer the site is secure. This will take the form of a Travelex branded security system and icon.
> International Phonecards > Sending money abroad > Mobile phone hire > Non-resident VAT refunds
We promise to offer you the best Travelex online rate. We’re always cheaper than the walk-in rate at the airport.
E
> Our rates Compare our US Dollar rates
US Dollars
1.9182
fxpayment
F
G Get the Travel bundle See an example >
Travelex can make your corporate
easy-to-use ATM card that
foreign payments simple.
you can top-up on the move. Find out more >
> FX for business
See all our rates
Cash passport is an
About Travelex • Contact Us • Press • Global Sites • Legal • Privacy • Branch finder • Careers
Quick picks > Travel insurance
Price Convenience Security
What is Cash Passport?
It takes a different design from the current site and the primary navigation differs to a degree. Final scoping of this page and all others on the site should be subject to a full re-architecture process.
Corporate
Desktop rate tool
Find out more >
Download now >
Copyright 2007 Travelex Limited
H
Travelex Purchase Flow
1 February 2007
7
See resaturate.com for case study.
TRAVELEX PURCHASE FLOW
Purchase start point – Travellers’ Cheques Initial view
Expanded
Buy currency Get:
A
Currency converter
Cash Travellers’ Cheques Cash Passport
Country & currency:
Get:
We’ll send you your currency, or you can pick it up at the airport when you fly.
Travellers’ Cheques Cash Passport Country & currency:
Please select
+
Currency converter
Cash
B
C Amount to spend in £
Buy currency
D
We’ll send you your currency, or you can pick it up at the airport when you fly.
USA - US Dollars
Our US Dollar rate: 0.916 Compare rates >
Amount to buy in US Dollars:
E -
Amount to spend in £
+
Amount to buy in US Dollars:
73.52
A
The top-level purchasing options. Here the customer has selected Travellers’ Cheques.
B
Top-line introduction to the product.
C
The customer selects which currency travellers’ cheques they’d like to buy.
D
The tool immediately updates, showing the rate for the appropriate currency. All the other elements of the tool activate.
I
The customer can either:
F
E
Choose how much they wish to spend on them in their local currency.
150
Add this to My Wallet llet >
If a customer chooses Travellers’ Cheques from the options, the tool switches to allow the purchase of Travellers’ Cheques.
G
H I want US $150 for £73.52 Add this to My Wallet >
Or
F
Choose the amount of Travellers’ Cheques they want.
The customer can type in either box. When they do the other one is instantly updated.
G
Alternatively, the customer can operate the slider. Up increases the purchase amount, down decreases it. This adds a playful, engaging quality to the process.
H
Above the primary call to action, ‘Add this to My wallet’, we present the total. This is automatically updated as per the input E or F.
I
We link to a rate comparison table in territories supporting this aspect of the Travelex Promise. The table would expand the tool further on click.
Travelex Purchase Flow
1 February 2007
13
Mark Russell User Experience Architecture Portfolio Consumer campaigns: Flash and Vicks Agency Six and Co. pitched a campaign site for Flash Powermop. I took the pitch concepts and extended them, defining a user flows and game mechanisms for the supporting campaign. The final proposal included information tailored for multiple user types and a fridge-magnet style slogan generator game to engage purchasers.
Wick is the German brand we know at home as Vicks, a range of over the counter remedies and medications. Wick Blau, is a medicated throat lozenge. This campaign site promoted the enjoyment of Wick Blau over the temptation of smoking. The work involved ground-up site specification including user management and a competition mechanism.
New thinking
Client: P&G Project: Flash Powermop Presentation
Date: 27 September 2007 Page 8
0.1 – Homepage (post-message) Notes 1
2
1
It might be a good idea to have a link back to the opening information so users can get the campaign overview (page 0.0) again.
2
The offer space will be flexible and may contain multiple messages over time.
3
There needs to be a quick overview of the incentive for the main competion.
4
Additional help could make the competition easier to enter.
Help Offer
4
Product info (mop) hotspot
Help Make Love not Chores hotspot
3
Competition detail/info
It’s my life Crowd hotspot
Mop media hotspot
Buy now hotspot
Make a plackard hotspot
Liberate a friend hotspot
News ticker
It’s my life Make Love not Chores Make a Placard
Product information Liberate a friend Buy now Mop Media
Terms & conditions Privacy Contact us Site map
Copyright © 2007 Procter & Gamble. All rights reserved. The copyright is owned by Procter and Gamble.
6.1 – Make a placard – Drag-and-drop slogan maker Notes 1
2
Make a plackard – Win a personalised tote LOREM SIT ADIPISCING LOREMADIPISCINGIPSUM SIT LOREM SITCONSECTITIR CONSECTITIR CONSECTITIR ADIPISCING IPSUM DOLOR DOLOR IPSUM SIT LOREM SIT CONSECTITIR CONSECTITIR LOREM CONSECTITIRADIPISCING LOREM SIT ADIPISCING IPSUM SIT ADIPISCING LOREM LOREM ADIPISCING LOREM DOLOR SIT SIT CONSECTITIR LOREM AMET CONSECTITIR ADIPISCING LOREM DOLOR IPSUM SIT CONSECTITIR ADIPISCING LOREM SIT LOREM DOLOR SIT DOLOR SIT SIT IPSUM CONSECTITIR AMET SIT AMET CONSECTITIR ADIPISCING DOLOR SIT AMET LOREM IPSUM SIT SIT SIT LOREM CONSECTITIR IPSUM LOREM AMET DOLOR IPSUM SIT AMET AMET LOREM SIT CONSECTITIR ELIT IPSUM LOREM CONSECTITIR SIT 4
It’s my life Make Love not Chores Make a Placard
Product information Liberate a friend Buy now Mop Media
Terms & conditions Privacy Contact us Site map
Lorem ipsum dolor sit amet, consect- 3 etuer adipiscing elit. Nullam eros dui, vulputate eget, suscipit ac, vehicula ut, tellus. Etiam hendrerit neque at tortor placerat consequat. Suspendisse blandit aliquam sapien.
Drop area 5
Clear
Submit my placard 6
7
Copyright © 2007 Procter & Gamble. All rights reserved. The copyright is owned by Procter and Gamble.
1
Content loads into an overlay panel. Words can’t be dragged outside the boundary of this panel.
2
There is a clear close button.
3
A brief copywritten introduction.
4
The draggable words are located in this area. Where a word is hidden it can be brought to the top (z-index) on click.
5
Words are dragged to a defined area beneath which will be an image of the tote and placard. When words are dragged on they should be able to be dragged off again. Only words in the drop area are submitted.
6
The clear button will remove all words currently in the drop area.
7
This button saves the slogan to the database and continues to page 6.2
Sue – Practical 1
2
Sue receives the Fresh Living email from the P&G list.
5
6
She has discovered the internet however she mainly browses gossip, fashion and film sites. She’s a little cautious about shopping online because she doesn’t know enough about it. Family is the focus of Sue’s life. She has very little ‘me’ time. The perfect day for her would be spent sleeping in till late with a whole pile of magazines. She hardly ever gets a lazy lie in – she’s always looking after others whereas nobody really spoils her. Given the household is her domain she likes to keep it clean but it’s hard work with two young kids about. If she gets a spare second she’ll do the quick once over and make sure it looks presentable – you never know when parents of the girls’ friends may drop in. She believes if you clean frequently you give yourself less of a huge mess to clean up later, and saving time is of the essence as she never has enough.
Make Love not Chores
She finds out more about the product by clicking on the mop item.
7 Vote & win
Sue decides to enter and submits her ‘rather do’. She’s quite inspired by the idea of a pampering prize.
4 Product info
She clicks through to the microsite homepage.
Enter ‘Rather do...’
Sue is in her mid thirties. She’s married to Ted and has two daughters under ten. She works part time in an office in the city. Her work is a way of making a little extra for the household however because Ted works long hours, most of the housework falls on her shoulders.
3 Powermop Home
Fresh Living email
She then looks around the page and notices the ‘Make Love not Chores’ item.
8 Buy
After she’s submitted her thing she votes for another and gets a second chance in the draw to win.
Postcode search/ Google maps
She decides to buy the Supermop and clicks on the basket item.
As she usually does her shopping in-store she uses the postcode search to find her nearest stockist.
9 Asda
She exits the site and purchases her Powermop next time she’s in the supermarket.
Follow-up
10
11 CRM email
Sue gets a reminder email about ‘Make Love not Chores’ offering her a chance to vote again for another chance to win.
12 Vote & win
She revisits the microsite and votes, now in the draw a third time.
Offer 33% off Flash liquid
While she’s on the site she’s reminded about refills and notices the discount offer.
Sitemap Home
0.0
Win an Arctic Adventure
BlauPause Overview + Alternative methods
1.0
Send a hug (email form)
Download widget (Generic)
2.0
.0
Blog
4.0
5.0
Logged-in already? Yes
Dr Frädrich’s General Advice
Questionnaire
About Dr Frädrich
Preview email
.exe .widget
RSS
Comments
No
2.1.2
2.1.1
Email screening
.1
2.1.
4.1
5.1
Thanks
1.1
Moderation message
Type?
Already registered? Yes
No
4.2
5.2 Passed moderation?
Result & Tips Heavy smoker
Result & Tips Moderate smoker
Result & Tips Social smoker
Entry deleted
No
User registration Data collection
2.2.1
2.2.2
Entry added
2.2.
Yes
1.2
Download widget (Tailored)
Thanks/ Send to friend Form + Moderation message*
*If user submits email form, message is sent later depending on moderation outcome.
2.
1. Logged-in already? Send to friend requested? Yes
Yes
No
No
Email screening
Emailed friend’s journey
Preview email
2.4 1.4
Email with return token
1.6
Vote for friend (Preselected)
1.7
Already registered? Passed moderation?
Entry deleted
Entry added
Yes
No
No
User registration
Yes
Gallery (Read-only if not logged in) [Enter yourself]
Data collection
2.5
1.5a, 1.5b, 1.5c & 1.5d
.exe .widget 2.6
Winner
1.10.1
Linked globally Runners-up
Terms & Conditions
Privacy statement
Contact us
Key Standard user journey Journey accommodating send to friend/nominate a smoker
1.10.2
Client: Wick Project: Blau Hammerhead – Site Architecture
G1
G2
G
Only available after compet tion close
Date: Page:
1 November 2007
0.0 – Home
1
Home
Blau logo
Win an Arctic Adventure
Send a bear hug
Download our widget
Dr Frädrich’s Blog
Win an Arctic Adventure to Greenland
Enjoy an Icy Cool Blau Break 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce malesuada, leo at cursus pellentesque, massa mauris posuere dolor, ac consequat turpis turpis sit amet pede. Aenean adipiscing.
Blaupause method
3
Enter now >
Current entries:
Mauris rutrum ipsum facilisis nunc. Morbi hendrerit eros tristique leo.
Notes 1
Consistent branding and navigation across the site.
2
The main message with a smoking twist.
3
The secondary message, the competition incentive. This includes a competition entry CTA and a carousel of the top entries updated in real-time.
4
Our signature bear. He sits here as primary page content. He’s our mascot and promotes the non-competition site incentives.
The page design shows an arctic scene, probably in perspective with the bear sitting in the foreground.
6
The global footer.
Blauy
> Start cutting down
Integer massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed molestie pharetra felis.
Send a bear hug >
Terms & Conditions | Privacy | Contact Us | wick.de
Download our bear widget >
Copyright © 2007 Procter & Gamble. All rights reserved. The copyright is owned by Procter and Gamble.
6
Client: Wick Project: Blau Hammerhead – Site Architecture
Date: Page:
1 November 2007
Mark Russell User Experience Architecture Portfolio User Experience Advocacy Over time it has become useful and rewarding to explain the efficacy and value of User Experience both to clients and even colleagues within a team. Included here are two documents designed to explain aspects of User Experience. The first, a client-facing document, introduced the need for personas, showing the benefits of clear user-centred thinking. This opened the door to further discussions about business and user research with the client.
The next page shows a document prepared to demonstrate to designers and planners in one agency the breadth of services that were offered by the User Experience team. This took the form of a printed takeaway menu listing all the tasks that might make up a well defined project.
Why Do We Need Personas?
Client Educational Document Selling-in Personas
To build a successful website we need to understand not only the needs of the business – which are paramount – but also the needs of the site’s users. This enables us to deliver functionality and content that drives users to the site, and enables them to achieve the goals of the client. Personas are one of a number of tools that we use to understand who our users are, and what characteristics they have. A key benefit of using personas is that they allow us to focus on our key users, instead of trying to design for ‘everybody’. Personas Facilitate Design Why Do We Need Personas?
Creating Our Personas
19 June 2008 Page 2
that whole range of customers Firstly we need to look at the goals nt ere diff t wha e , and examin our site is intended to satisfy ate Est an say of, e cas the In tem. they have when using the sys buy to se be finding the right hou Agent’s site one goal might ted. ren be and another what can t person nt kind of behaviours tha Next we look at the differe site. For the on l goa ir the ieve ach might exhibit when trying to ir the in site ly to be using the example, is this customer like will or , ple peo er oth distracted by lunch-break at work, while ? site the lore to exp they be at home with time er the attitudes of this custom e Then similarly, we examin kind of the y the Are y? the compan group. Do they know about y need the will or y, awa t igh stra buy customers who are ready to their decision? to go away and think about Why Do We Need Personas?
19 June 2008 Page 5
ign team of personas, the whole des Once we have our final set tures fea at wh of understanding can use them to maintain an rs. use our work for and design elements would tures re arguments about what fea No more guesswork, no mo who of g din tan have a shared unders ‘our users’ would like – we these users really are.
Why Do We Need Personas?
19 June 2008 Page 7
Agency Educational Document Explaining UX to Digitas
Set Menus A – New Build Starters: User Research, Requirements Gathering, Competitor Benchmarking. Mains: Personas, Sitemap, Use Cases, User Flows, Accessibility Review, Wireframes, Functional Specification, Template Module Specification. Sides: User Testing.
B – Site Redesign Starters: Data Analysis, User Research, Requirements Gathering, Competitor Benchmarking, Heuristic Analysis, Accessibility Review.
Starters 1 User Research rts on what our Fragrant, bite-size repo they want it. users want and how nchmarking 2 Competitor Be ar websites A spicy blend of simil ribing in a rich sauce desc in. fits ork r w where ou th Ga ering 3 Requirements at's required wh to h in arc Dogged rese served are urs for a site. Two flavo nd the user. s a nes usi e b t th g a lookin
Main Courses lysis 4 Heuristic Ana k-based des of mix ng citi An ex ility of an sab e u t th g a research lookin existing site. view 5 Accessibility Re A check to see if Chopsticks or fork? website. everybody can use the 6 User Personas ical user ils about what a typ eta y d Juic in a heady ved Ser ds. nee nd expects a alism. sauce of fictional re
7 Content Audit & Gap Analysis hat content Sweet definitions of w served with ften . O sts exi tly ren cur ng. a look at what’s missi y teg tra 8 Content S nd analysis h a arc ese of r ot otp A spicy h ision for the producing a strategic v ite... content of the webs 9 Data Analysis ts easily digested Real shredded site-sta users have ow n h rt o epo a r into ropped-off. r d d o ede cce navigated, su 10 User flows nical diagrams Home-cooked tech oceeds through pr showing how a user utcomes are d o an ons cisi De ite. a s way. the ng alo wn sho 11 Sitemap of y hierarchical diagram alit eci Chef’s sp . ere wh fits age what p 12 Wireframes red description A deep, richly flavou functionality and of what content ular page. rtic pa n a s o ear app cification 13 Functional Spe al definitions. Often ion nct f fu h o dis ry A d d by tech teams. desired and devoure
dit, temap, reframes, on, cation.
14 Use Cases tration of what A diced-up demons a th wi cts intera happens when a user ity. nal tio unc of f ce pie particular ule 15 Template Mod Specification k at the inner A fruity, intimate loo a particular of ies ann cr and ks noo nt. one mp co nal ctio fun
Side Dishes 16 User Testing d to ped real people aske rap e, t Liv e. typ oto pr or site test a ish. Not for the squeam ice 17 Usability Adv stry knowledge A light mixture of indu suring a site is and best-practice, en ed by a user. igat nav nd d a easily use pertise 18 Accessibility Ex guidance on and ce dvi e a som Flavour abled users and best-practice for dis . assistive technologies e 19 Project Advic dvice given Ad-hoc snack-sized a lated topics on numerous UX re s. ion est qu and
C – Campaign Site Starters: User Research, Requirements Gathering, Accessibility Review.
For a Very Tasty Website
Mains: Sitemap, User Flows, Wireframes, Functional Specification Sides: User Testing.
D – Content Strategy* Starters: Content Audit, Requirements Gathering. Mains: Gap Analysis, Audience & Content Plan, Content Creation Guide, Content Strategy Insights Document. Sides: Success Measurement & Data Analysis *Some items not on main menu.
User Experience Chinese Menu
020 7874 9400
Thanks.
See resaturate.com for case studies and design work examples.
[email protected] +44 (0)7881 904476
