Alpha websites
Skills: User research, SEO, Figma, HTML5, CSS3, Bootstrap 3, Javascript(vanilla), jQuery, Google Analytics
Timeline: 10 weeks
Objective:
To create 12 newspaper websites from scratch.
Requirements
The client (Alpha) decided to start using Miles33 to publish their newspaper and to create their websites for them. They had existing sites but Alpha wanted new sites to be built for them with an updated design, but still incorporating parts of the old design. As this was a new project, I worked on each stage of the process, from the initial UX design of creating a wireframe and producing mid-fidelity designs of each page with Figma (mobile and desktop), then creating a template for each page of the site, structuring and styling each page, testing to see if each page functioned correctly and then providing support to the customer after the end of the project.
Step 1. User Research
The first contact I had with the client was to find out their needs for the site including the designs, the advertising and the number of templates they would need. Part of this process included showing the client a number of newspaper sites which our company had already created and finding out whether they would like that feature for their site. For example, a Digital Newsstand (e-paper) was included in the design. This then enabled me to create designs based on Alpha's requirements.
Step 2. Designs
Each of the 12 sites would use the same templates and there were five to be built which would create most of the site. They were the homepage, section page, article page, search page and a general copy page (e.g T&C's). There were numerous iterations of the design which the client had input into. The designs needed to show responsiveness and work efficient for every device.
These were the wireframes used:
Homepage:
Section page:
Article page:
Search result page:
General page:
Homepage mobile:
Section page mobile:
Article page mobile:
Search result page mobile:
General page mobile:
Step 3. Prototyping
I created a prototype by creating a site on a demo server which enabled the client to see the progress being made and whether any changes were required. The websites were created by a custom made CMS called webCMS. This allowed me to set the site live with minimal effort when everything had been setup.
Technical Requirements to create the prototype
HTML5 | CSS3 | Bootstrap3 | CMS | Javascript | An understanding of Java
Step 4. Other technologies
SEO | Google Analytics
The client had to setup their Google accounts to enable SEO and GA but I then implemented the changes to the code and made sure the data was being gathered.
Step 5. Testing and Quality Assurance
I conducted rigorous testing on the site on the demo server to identify and rectify any potential bugs or issues to ensure a flawless user experience before implementation.
Step 6. Setting the sites live
Once the testing had finished the sites could be placed live which required setup of the URL's on Tomcat and a restart of the server. The sites also needed an SSH certificate to enable security to the site.
Step 7. Training and Support
I provided training to the customer to show how to use the site and then provided any support if there was any changes to the design required or help needed to add content.
Step 8. Results
The customer was happy with each of the websites as he was continually involved in the process from start to finish. These are some of the links to the websites:
