See also: print design
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/bc1906f6-3672-4393-8d73-5934c6488f79_rw_1200.png?h=8ee03f5f185a0b0487ef1e5b947eb464)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/d5820dac-f16e-457b-8191-c93fa3306835_rw_1200.png?h=73fb47574f27995a1b75aa6b9ed7b001)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/4d53cdec-70ec-49c7-baa5-8da7d365ae52_rw_1200.png?h=21f16a49ac32ba1fc797a91e86bf8a5a)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/4f7a87ac-de3d-4489-ae29-85f5fa3d9951_rw_1200.png?h=e0d7263afa028c54db17193628964776)
Simple Signup
The website was designed with a simple two-step signup process in mind, customers can then gain access to their myNeosurf Account page (see below).
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/f7531481-e137-4801-9fd9-84eed5be1338_rw_1200.png?h=c34da8926e42f17b97b0bfdf65b6c059)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/cdce2d0b-936e-4c89-b833-9507fdaa03a1_rw_1200.png?h=3d561bd5fe8187100b1cbade96a198ed)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/91829708-8608-4ba1-b7be-af62d1676cb2_rw_1200.png?h=15a15da37be90d1400c37b0bd2f0e628)
myNeosurf Account
In addition to the main website a My Account section was needed to manage card details, vouchers, top-ups and payments. Each section took a complex process which was then broken down into simple to understand steps. Below is a small examples of the page designs created.
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/faf60a9c-8958-41ae-a2fc-fc15258de36a_rw_1200.png?h=27d6f5c5de790e68d80e351ef3932a45)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/6ae5fcfb-81a5-4df0-a955-459f65536dcc_rw_1200.png?h=7a305938250c7f2a60bfe7b88c3e33ec)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/4b533e1d-bf1c-4d8b-a42b-e7fb37a94c62_rw_1200.png?h=e001d127d033b6dfa2775313dec7f569)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/1deef4de-cb89-4b1b-b438-a15eb9a6d374_rw_1200.png?h=8c0921fa4f31190fe63bec1039b4dcc3)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/49da0cf7-57b6-4577-aa40-db55cbacf81a_rw_1200.png?h=a920466c8c13737a7beb92e94eec8490)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/0d9a273f-81bf-4818-9f45-28d15189842d_rw_1200.png?h=3f2845e670b27682e101cfab1f27d6cd)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/e45f2d62-2776-445e-b967-ec612846407e_rw_1200.png?h=fddba8ce49d02db0e7d085a64ffe9237)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/d69fe386-101f-4b19-aaec-61f957175c52_rw_1200.png?h=3c9f0bf0355a72e805b24fdb9981e526)
Delivering designs and assets
Once each page was designed it then had to be packaged up and delivered to a developer who was working remotely in Hong Kong. This included all graphical assets, along with a design-spec for each page and a UI toolkit.
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/54e0780d-1278-480c-be51-524bbbccd484_rw_1200.png?h=9a032d91807a9d64116b789b514359b2)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/474376d9-042f-40f5-ad9a-01df43e3e154_rw_1200.png?h=9b2c090db9dc6723780f3abc35baf992)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/4a0a4f01-fe4c-4088-af9a-8f47e91f5e5f_rw_1200.png?h=87d663a8dcc9ef8c3a95528d7c233517)
UI Toolkit
The UI toolkit broke down each of the core elements that was used on the website, showing links, buttons and form fields in each of the possible states. A 'basic page' was also created to show how the core elements of the header bar, page content with text elements and the footer would all work together.
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/a2b18d4d-c5ba-4602-afaa-2bd27890d432_rw_1200.png?h=cf8c6c2a1f9b788aed6c05fb9fbbb5ad)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/e64d3233-f9ff-4872-b1a8-17dad5650fc0_rw_1200.png?h=3953dae497e9a57c18a5fe965a405c3e)
Responsive emails design and build
Emails were built using HTML and CSS to be cross-compatible with as many devices and browsers possible
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/6e9809ed-d60b-4326-8b77-7ef37d2282d7_rw_1920.png?h=fed675a126d76e524f70610d09b6c1ea)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/24110ecf-cb4e-45e3-ab81-9dbd8fc19c83_rw_1920.png?h=53c6860f8e2f09cfff36fda2d6cfde2e)
![](https://cdn.myportfolio.com/b39b208b87f2adb543293e95f93aafbb/f80a6840-51a5-4ad4-ba1a-14a01e4a10c3_rw_1920.png?h=1747bdb86dbb0718ed75cbadf48c3d7e)