wireframe deliverables strategy homepage...
TRANSCRIPT
EPILEPSY FOUNDATION PURPLEDAY.COM.AU
WIREFRAME DELIVERABLESBelow is a list of delivered wireframes we have supplied including the key pages annotated in this document.
- Homepage - Pre Purple Day- Homepage - Purple Day Month- Homepage - Post Purple Day- Get Involved - Landing Page- Get Involved - Detail Page (schools)- Register Event - Step 1- Register Event - Step 2- Register Event - Step 3- News- Events
Below are links to the full set of clickable wireframes.
MOBILEhttp://qzwrtv.axshare.com/#p=homepage_pre_event
DESKTOPhttp://u1so2z.axshare.com/#p=sitemap
ANNOATED WIREFRAMES FOR MOBILE AND DESKTOP
STRATEGYOur redesign of the Purple Day website includes a new brand and content strategy that we believe will increase public engagement and awareness.
MOBILE FIRSTWe redesigned the site mobile first as we found half of your users are visiting from a mobile device and that you currently have a 20% drop off rate from the homepage.
PHASESWe have developed a dynamic website that delivers targeted content to the user at all times throughout the year and giving them ways to get involved and stay up-to-date.
There are 2 main areas we suggest dynamically change throughout the year and this is;
Suggested ways to get involved - 10mths of the year people will need other ways to get involved not just through creating an event.
The homepage modules copy and imagery -
PRE PURPLE DAY - Majority of the year
- People to share their Purple Day story.- See what other people did last year.- Other ways to get involved, e.g. share a post on social media, donate etc.
PURPLE DAY MONTH
- Homepage hero to emphisis call-to-action to get involved in creating events.- Events will feature on the homepage.
POST PURPLE DAY - 2 weeks after Purple Day Month
- CTA for users to share their PD story- See what other people did- Other ways to get involved, e.g. share a post on social media, donate etc.
HOMEPAGE MODULES Below are the key modules that dynamically change on the new Purple Day site designs.
HERO IMAGE COPY AND CTA
CONTENT MODULES
EVENT MODULE
COPYWe suggest engaging a copywriter to create a tone of voice for the copy that engages users and makes them want to get involved in the fun on Purple Day. A good example of what we suggest is Movember.
IMAGERYThrough our user testing we found people more likely to engage in Purple day with the below imagery examples rather than what is currently used on the site.
11 tagline to prompt users to get involved.
12 Social channel links.
13 Slide in main navigation.
14 Main navigation structure.
15 Search function for mobile to be located within hamburger navigation structure.
16 This layout shows what a sub navigation looks like.
17 Search function for mobile to be located within hamburger navigation structure.
1 Global nav that incorporates Purple day (PD) branding, Donate Call-to-action (CTA) and Hamburger
2 Navigation hamburger that slides out as per annotation 13.
3 Dynamic hero module that entices user to get involved in PD.
4 Secondary CTA to give user information about PD.
5 Events module that only appears during the main PD phase.
6 Module to entice users to share their story about PD.
7 Module to entice users to See more on what PD is about.
8 This module is writen by PD staff as a blog post that gets featured on the website and also shared through social median channels to drive awareness about PD and Epilepsy in general.
9 Quick stat snapshots to quickly inform users.
10 Featured social posts that are dynamically selected to show what people are doing for PD.
MOBILE HOMEPAGE
1 2
3
5
4
6
7
8
9
10
11
12
13
14
15
16
17
PHASE 1PRE PURPLE DAY (10mth leadup)
PHASE 2 PURPLE DAY MONTH
PHASE 3POST PURPLE DAY (3 weeks after)
11 For bulk content such as Resources and Activities we are placing these in accordians to reduce page length and not overwhelm user with content.
12 Mailing list copy is to subtly entice user to subscribe enabling .
13 Examples of what events people can do.
1 For each way to get involved e.g. Schools this copy needs to inform the user if this content is relevant to them. If Schools is only for School staff people need to know this at this stage.
2 The Get Started CTA take users to the section detail page.
3 Similarly this content needs to tell users if this content is applicable for their situation.
4 Similarly this content needs to tell users if this content is applicable for their situation.
5 Imagery that entices user to create an event, copy is to give user enough information to know the basics about what kind of activity this is.
6 Register Event CTA takes user to new Register event process on the next page.
7 Modules that link to third party sites such as Everydayhero are treated in a way to give user expectations that they are going to be taken to a different look and feel and site.
8 Again by clearly labeling CTA’s where possible we are informing the user about their expectations when clicking on this CTA.
9 Modules that link to third party sites such as Everydayhero are treated in a way to give user expectations that they are going to be taken to a different look and feel and site.
10 Donate Now CTA links to Everydayhero.
MOBILE GET INVOLVED
1 5
6
7
8
9
10
12
13
11
2
3
4
1 Engaging image illustrating the fun that can be had on purple day.
2 Brief overview on what Purple Day is and when.
3 Link to find out more information on the Epilepsy Foundation website.
4 Engaging image illustrating the diversity of sufferers of Epilepsy.
5 Brief overview on Epilepsy.
6 Quick engaging facts to engage audience.
7 Link to find out more information on the Epilepsy Foundation website.
8 Instructional humourous first aid video similar to Air NZ flight safety and the British Heart Foundation. https://goo.gl/LxhGT
9 News blog post.
10 Share links.
11 Other news stories to allow user to keep reading.
12 Soft load for additional news stories.
MOBILE WHAT IS PURPLE DAY & NEWS POST
1
2
9
10
11
12
3
4
5
6
7
8
MOBILE REGISTER EVENT
1 Register process framework is stripped back to bare minimum to not distract user.
2 Header graphic with heading to give confidence that they are signing up for the right event type.
3 Two step process indicators gives users a visual cue that its a short registration process.
4 Input fields to have inline validation and be minimum of 44px high for ease of touch.
5 Button to take you to next step in the registration process.
6 Users had some confussion over some of these questions at this stage of the registration process. It may be worthwhile re-visiting these at time of website overhaul.
2
1
4
5
3
8
6
7
1 Global nav that incorporates Purple day (PD) branding, Donate Call-to-action (CTA)
2 Dynamic hero module that entices user to get involved in PD.
3 Secondary CTA to give user information about PD.
4 Events module that only appears during the main PD phase.
5 Module to entice users to share their story about PD.
6 Module to entice users to See more on what PD is about.
7 This module is writen by PD staff as a blog post that gets featured on the website and also shared through social median channels to drive awareness about PD and Epilepsy in general.
8 Quick stat snapshots to quickly inform users.
9 Featured social posts that are dynamically selected to show what people are doing for PD.
10 tagline to prompt users to get involved.
11 Social channel links.
12 CTA if people need help and phone number in footer.
13 Prominent Hero CTA for donate in the top right of the navigation.
DESKTOP HOMEPAGE
1
2
3
5
4
67
8
9
10
11
12
13
13 List of suggested activities.
14 Resources module.
1 For each way to get involved e.g. Schools this copy needs to inform the user if this content is relevant to them. If Schools is only for School staff people need to know this at this stage.
2 The Get Started CTA take users to the section detail page.
3 Other CTA’s that are quicklinks.
4 Similarly this content needs to tell users if this content is applicable for their situation.
5 Imagery that entices user to create an event, copy is to give user enough information to know the basics about what kind of activity this is.
6 Register Event CTA takes user to new Register event process on the next page.
7 Modules that link to third party sites such as Everydayhero are treated in a way to give user expectations that they are going to be taken to a different look and feel and site.
8 Again by clearly labeling CTA’s where possible we are informing the user about their expectations when clicking on this CTA.
9 Modules that link to third party sites such as Everydayhero are treated in a way to give user expectations that they are going to be taken to a different look and feel and site.
10 Donate Now CTA links to Everydayhero.
11 Mailing list copy is to subtly entice user to subscribe enabling.
12 Examples of what events people can do.
DESKTOP GET INVOLVED
1
5
6 7
8 910
12
13
14
11
2
3
4