Content Audit:
Here is the full content audit of SnapScan, an online payment service that uses QR codes to transfer funds, usually used at farmer’s markets and among small businesses.
MENU | ||||||
ID | Page Navigation | Page Link | Content Type | Content Name | Content Description | Other Comments |
1 | Constant: Menu | Text Logo Image Buttons | Navigation Menu | This menu contains the SnapScan logo which links to home, a text based menu to the rest of the site, & 2 buttons for sign up & login. Users can access everything. | The menu is a sticky menu that follows the user upon scrolling. | |
1.1 | Menu | Logo Image | SnapScan Logo | Linked image that reverts users to the SnapScan home page. | ||
1.2 | Menu | Text | Receive Payments | Text link that takes users to the Receive Payments page. | ||
1.3 | Menu | Text | Make Payments | Text link that takes users to the Make Payments page. | ||
1.4 | Menu | Text | Blog | Text link that takes users to the blog. | ||
1.5 | Menu | Text | About | Text link that takes users to the about page. | ||
1.6 | Menu | Text | Help | Text link that takes users to the help page. | ||
1.7 | Menu | Button | Log in | Button that takes users to log in. | Blue outline, white fill. | |
1.8 | Menu | Button | Sign up | Button that takes users to sign up. | Eye-catching blue fill. | |
MAIN SITE | ||||||
ID | Page Navigation | Page Link | Content Type | Content Name | Content Description | Other Comments |
1 | Entry: Home (landing section) | Text Video Illustration Logos Buttons | Payments in a snap | Laid out with a standard top navigation bar, with an important notice directly underneath. An eye-catching banner containing custom illustrations is seen with an explainer video & sign-in card on top. The page has several sections that contain different content, these will be listed below. | micro-animations are used in the illustrations & imagery that help to accentuate the page aiding user engagement. | |
1.1 | Home Section 1: Landing | Text | Important Notice | Users are pointed to a COVID notice that states the following: “Important notice: For up to date information about the Covid-19 pandemic visit www.sacoronavirus.co.za.” | This helps users know more about the implications of COVID on SnapScan and businesses that use the services they provide. This notice disappears upon scrolling. | |
1.2 | Home Section 1: Landing | Button Video | Watch The Video | Explainer video button, embedded on the home page, and with a link to Vimeo. | This button has a micro-animation that helps users find & click on it to watch the video. | |
1.3 | Home Section 1: Landing | Text Button | Sign up for a better way to get paid | This sign up card has text fields that allow users to easily & directly sign up their business to SnapScan. At the bottom of the card is a link to view the terms of service. | The terms of service are linked which is important for users to have access to (the url link is for this). | |
1.4 | Home Section 2: What is SnapScan? | Text Image Button | Accept Payments | 1 of 2 cards that showcase a step by step process of how a user can accept payments with SnapScan, with a button at the end that links to the sign up process. | Above is a section descriptor that answers the section heading “What is SnapScan?” | |
1.5 | Home Section 2: What is SnapScan? | Text Image Button | Make Payments | 1 of 2 cards that showcase a step by step process of how a user can make payments with SnapScan, with 2 embedded buttons at the end that link to the Apple & Google app stores respectively.. | Above is a section descriptor that answers the section heading “What is SnapScan?” | |
1.6 | Home Section 3: Client showcase card | Text Logo Image | Clients that love us | A simple card showcasing the most well known businesses/ clients that utilise SnapScans services regularly. Clients are listed as greyed out logos. | The number of SnapScan users is listed (60,000) & the card pops up slightly upon hover. | |
1.7 | Home Section 4: CTA’s | Text Image Button | Payments in a snap for every type of business | 1 of 2 separated columns that contain a custom illustration with micro-animations that catch the user's eye. This column directs users to sign up with a CTA button. | ||
1.8 | Home Section 4: CTA’s | Text Image Button | Need some help? | 1 of 2 separated columns that contain a custom illustration with micro-animations that catch the user's eye. This column directs users to the support page with a CTA button. | ||
2 | Receive Payments Page: Merchants | Text Video Illustration Logos Buttons Dropdowns | SnapScan works for your business | This section makes use of a large illustration to draw attention. | ||
2.1 | Receive Section 1: Landing | Text Dropdown | Select business type | This dropdown takes you to a specialised merchant page that includes relevant info for each type of business. The page is essentially the same as the original, just with a few irrelevant points removed. | I included the URL for a “Market Vendor” There are several more kinds of businesses. | |
2.2 | Receive Section 1: Landing | Text Button | Sign up for a better way to get paid | This sign up card has text fields that allow users to easily & directly sign up their business to SnapScan. At the bottom of the card is a link to view the terms of service. | The terms of service are linked which is important for users to have access to (the url link is for this). | |
2.3 | Receive Section 2: Explainer video | Text Video | How SnapScan works for your business | This section has an explanatory paragraph & explainer video button embedded in the page, and with a link to Vimeo. | This is displayed as an image with a play button CTA in the centre. | |
2.4 | Receive Section 3: Get started list | Text Illustration Button | Get started | A 4 step list showing how first time users can get started with the service, accompanied by a large illustration with micro-animations that draw attention. | The text is laid out in 4 neat points with the use of icons. | |
2.5 | Receive Section 4: Solutions list | Text Images Buttons | Solutions for your business | This section showcases the different kinds of ways you can use SnapScan as a merchant: in store, on print media, online & on the go (placed on a lanyard or shirt). | The buttons take the form of left & right arrows that help users flick through the cards. | |
2.6 | Receive Section 5: Service showcase | Text Images | SEVERAL TITLES | This lengthy section outlines a lot of how SnapScan operates in regards to: point of sale, e-commerce, referencing, tipping, the merchant portal, billing solutions & transactions too. This section makes use of bulleted lists and cards with micro-interactions that draw focus. | The section covers an abundance of info, all displayed with imagery to help users understand the context further. | |
2.7 | Receive Section 6: Cost rate structure | Text Images Interactive | How much does SnapScan cost? | This section contains a slider that allows users to see how much of a percentage SnapScan charges per monthly turnover. This allows users to see how much lower rates go when their business takes in more revenue. There are 2 descriptive points below that contextualise the process. | ||
2.8 | Receive Section 7: Client showcase card | Text Logo Image | Clients that love us | A simple card showcasing the most well known businesses/ clients that utilise SnapScans services regularly. Clients are listed as greyed out logos. | The number of SnapScan users is listed (60,000) & the card pops up slightly upon hover. | |
2.9 | Receive Section 8: CTA’s | Text Image Button | Payments in a snap for every type of business | 1 of 2 separated columns that contain a custom illustration with micro-animations that catch the user's eye. This column directs users to sign up with a CTA button. | ||
2.10 | Receive Section 9: CTA’s | Text Image Button | Need some help? | 1 of 2 separated columns that contain a custom illustration with micro-animations that catch the user's eye. This column directs users to the support page with a CTA button. | ||
3 | Make Payments Page: Users | Text Video Illustration Logos Buttons | Make mobile payments in a snap | This section makes use of a large illustration to draw attention. | ||
3.1 | Make Section 1: Landing | Text Image Button | Download on the Apple app store Get it on Google Play | This section appears over the section illustration, directing users to download the app on their respective app stores. | These are embedded app store buttons. | |
3.2 | Make Section 1: Landing | Text Image | Do more with your app | This card has several icons that cover different points, each one linking to a relevant page: Ways to pay (1), Send money to friends (2), Top up your wallet (3), Buy prepaid electricity, airtime & data (4), Settle bills (5), Donate (6) | The icons are consecutively laid out and make use of fun colours that pop. | |
3.3 | Make Section 2: Explainer video | Text Video | What is SnapScan? | This section has an explanatory paragraph & explainer video button embedded in the page, and with a link to Vimeo. | This is displayed as an image with a play button CTA in the centre. | |
3.4 | Make Section 3: Service showcase | Text Images | Get SnapScan | This section shows how easy it is for users to sign up and begin paying/ receiving money. Images offer contextual support. | They use catchy slang: “It starts with a download and ends with a snap.” | |
3.5 | Make Section 3: Service showcase | Text Images | Ways to pay | This section has app screen images, bullet point icons and images that contextualise the use of SnapScan in the real world. | ||
3.6 | Make Section 3: Service showcase | Text Images | Do more with SnapScan | This section covers a wide range of different services SnapScan has to offer: Send money, Top up, Buy prepaid, Settle bills, Donate & Did you know? These are all laid out with their respective snippets of text and bullet points that help outline each service. | This section makes use of images and cards that have micro-interactions which draw attention to different points of interest or useful info. | |
3.7 | Make Section 4: Get in touch | Text Image | Need some help? | This small section offers users a direct line to the contact page so they may inquire further into SnapScan’s services. | ||
4 | Blog Page | Text Images Buttons Tags | SnapScan Blog | The main page has its own unique navigation for the blog, with a nav bar using text links that filter stories: Insights, SnapShots, SnapTips, SnapScan App. The nav also has a unique image link for the blog, a search function, & a CTA button that directs users back to the main website. | Tags are different colours to help users differentiate the unfiltered stories featured on the home of the blog page/ site. The blog is technically an external website. | |
4.1 | Blog Section 1: Featured post | Text Image | Get rewarded with Jozibucks when you shop local and #SupportJozi | This featured post simply shows the most recent post that SnapScan has. Using imagery and illustrative profile images for the author. | ||
4.2 | Blog Section 2: Popular entries | Text Images Button | Top stories | This section showcases the most popular posts recorded on the SnapScan blog. | ||
4.3 | Blog Section 3: Filter 1 | Text Images | Insights | This section shows stories related to the Insights tag. | Pink tag colour. | |
4.4 | Blog Section 4: Filter 2 | Text Images | SnapShots | This section shows stories related to the SnapShots tag. | Green tag colour. | |
4.5 | Blog Section 5: Filter 3 | Text Images | SnapTips | This section shows stories related to the SnapTips tag. | Blue tag colour. | |
4.6 | Blog Section 6: Filter 4 | Text Images | SnapScan app | This section shows stories related to the SnapScan app tag. | Uses large image cards to show content. | |
4.7 | Blog Section 7: Featured post | Text Images Button | Payments in a snap for every type of business | 1 of 2 columns showing an image & a button linking to the sign up process. | ||
4.8 | Blog Section 7: Featured post | Text Images Button | Subscribe to the SnapScan newsletter | 1 of 2 columns showing an image & an input field/ button for users to instantly subscribe to the SnapScan newsletter. | ||
5 | About Page | Text Images Buttons | Our story | This page has descriptive info about SnapScan as well as showing career opportunities with the company. The landing section shows 3 cards that cover points such as awards won by the company, number of merchants nationwide & the SnapScan network. | ||
5.1 | About Section 1: Descriptor | Text Images | About us | This section shows a detailed descriptive paragraph about SnapScan, with imagery. | The QR code in the image leads to “SnapScan Demo” where users can pay/ donate. | |
5.2 | About Section 2: Career list | Text Image Buttons | Careers | The careers list shows the open positions that the company wishes to fill. The list shows the position name, skills (i.e. operations, management), location, & lastly a button that links to a detailed listing PDF. | The URL included here is for the first job entries detailed listing PDF. | |
5.3 | About Section 3: Get in touch | Text Image | Need some help? | This small section offers users a direct line to the contact page so they may inquire further into SnapScan’s services. | ||
6 | Support Page | Text Images Buttons | Keen to get in touch or simply say hello? | The landing page for support includes a number to call, an email address & social links. There is also a card contact form where users are able to send a message directly from the website. Telephone: +27 (0) 21 250 0960 Email: help@snapscan.co.za | This section is laid out in a standard similar to the landing pages previously mentioned. The pattern is: Main illustration background image, useful text content (left), card with content (right). | |
6.1 | Support Section 1: FAQ dropdown | Text Dropdowns | Have questions about SnapScan? | The content is listed logically in a dropdown menu with a separate menu for main points of interest like Getting Started, Using SnapScan, Safety & Security & Cards. | The dropdowns and point sections are structured under 2 different sections. One for merchants & another for users. | |
6.2 | Support Section 2: Resource packs | Text Images | Download our resources | The content in this section allows users to see the company's digital design assets, branding & video showreel. Logos (1), Brand Guide (2), Videos (3). | The logo card is a zipped folder download link, while the others are external web pages. | |
7 | API Page: External developers page | Text | API Overview | This external web page has an abundance of information useful to developers, it showcases code snippets & other back-end/ front-end design aspects. | This external site has several sections & that contain code content. From QR codes to authentications. | |
8 | Privacy Policy Page | Text | Privacy statement | This page has an abundance of text that outlines all the different aspects in which SnapScan makes use of its users information, covering topics like collections, cookies, user rights, subsidiaries, analysis, security & is ended off with contact info. | The content is listed in 26 different sections, all on one big card (this could be displayed not on a card and communicate just as effectively). | |
9 | Terms & Conditions Page: External PDF | Text | SnapScan_Terms_and_Conditions_Base_v2.pdf | This external PDF lists all possible legal points that the company wishes to address, users are free to download and read. | The PDF is about 31 pages long with 3 main sections included. | |
FOOTER | ||||||
ID | Page Navigation | Page Link | Content Type | Content Name | Content Description | Other Comments |
1 | Constant: Footer | url | Text Illustrarion Logo Image Button | Navigation Footer | The footer contains a multitude of buttons and linked images that help users find different aspects of information to inform decisions. They can sign up from here, download the app, or find social media. | A simple illustration is included to help add some interest to the otherwise simple footer. |
1.1 | Footer | Logo Image | Download on the Apple App Store | An embedded button link to the Apple app store, top left of the page. | ||
1.2 | Footer | Logo Image | Get it on Google Play | An embedded button link to the Google Play store, top left of the page. | ||
1.3 | Footer | Text | About | A text link to the about page. | ||
1.4 | Footer | Text | Careers | A text link to the careers page. | ||
1.5 | Footer | Text | Support | A text link to the support page. | ||
1.6 | Footer | Text | API | A text link to an API page. | ||
1.7 | Footer | Text | Terms | A text link to the terms of service/ use. | ||
1.8 | Footer | Text | Privacy | A text link to the privacy policy. | ||
1.9 | Footer | Logo Image | Powered by Standard Bank | An embedded button link to the Standard Bank website, bottom left of the page. | ||
1.10 | Footer | Text Illustration | Copyright notice | A simple illustration and line of text. | “Copyright © 2019 SnapScan. All rights reserved. Cape Town, South Africa” | |
1.11 | Footer | Button | Facebook Icon | A round icon button linking to SnapScans Facebook profile. | ||
1.12 | Footer | Button | Twitter Icon | A round icon button linking to SnapScans Twitter profile. | ||
1.13 | Footer | Button | Instagram Icon | A round icon button linking to SnapScans Instagram profile. | ||