This project was undertaken as part of one of my major negotiated tasks for my third and final year at the University of Winchester. The aim of the task was to explore a project of our own choosing to a prototype level. This project required me to try a number of different methodologies and required me to be creative and experimental with my solutions.
The University of Winchester
Development Focus Module
I started by analysing what it was I needed from the grade calculator. I identified that I needed the ability to enter in my module grades and my module’s weighting. Not all previous grade calculators I had used gave the ability to add more rows which was one of the reasons I decided to create my own, therefore I knew I wanted to add this feature. I often wanted to test different scenarios of grades, therefore I knew wanted the ability to be able to reset the inputs and clear all the data previously entered.
To gain an idea of current layouts and features, I researched other grade calculators. All the calculators followed a simple column and row layout which I knew would be suitable for my design; however the grade calculators I researched often lacked in any visual design, therefore I wanted to ensure my grade calculator was not only functional but also can a brighter and more exciting design than my “competitors”.
After deciding the features that I wanted to include in my grade calculator, I created low, mid and high-fidelity wireframes. I only required one page for my website to be able to work out the grades for my users; however I needed to create wireframes for both desktop and mobile. I went with a mobile-first approach when designing my grade calculator. Mobile design is arguably the most difficult due to being the smallest design, it will only have the essential features.
Using my mobile design I was able to expand the features and give the elements more space when designing for desktop while still ensuring all the essential features were included. The main focus of my low-fidelity wireframes was designing the layout, content placement, navigation and functionality. For my low-fidelity sketches I sketched the different elements on paper for both mobile and desktop.
I then used my sketches to produce mid-fidelity wireframes. After developing my skills using Sketch from my skiing app project, I chose to use Sketch again. Using different hues of grey, I was able to show subtle contrasts between elements before the colours had been added. This allowed me to visualise my app and how my users would navigate it before adding any imagery or colour. I used my wireframes to test the structure with other users, including other University students, who were not familiar with the design and gained valuable feedback on my design. This suggested an explanation under the title and before the inputs would be beneficial to understand the purpose of the calculator. I took onboard this feedback and included it in my final outcome.
Using Sketch, I created my final high-fidelity designs. I designed my website to be responsive so the layout of my page grows and shrinks based on the resolution of the screen, as opposed to designing an adaptive website which would be like having two completely different web sites, one designed to fit on your phone the other designed to fit on your desktop. This was because I knew it would be faster to develop and Google currently recommends a responsive design pattern.
The grade calculator was coded using Bootstrap, making use of it’s design templates for typography, forms, buttons and navigation. I chose to use Bootstrap because I initially wanted to focus on the functionality of the calculator before the visual design.
My main reason for using Bootstrap was the speed at which I would be able to develop the front-end of the website. Bootstrap allowed me to use pre-styled components, which allowed me to focus on the functionality of the website before blending my own CSS to style the website to my final designs. I utilised Bootstrap’s Grid System to build the website layouts of all shapes and sizes using a series of containers, rows, and twelve columns to layout and align my website’s content.
Using the getElementById() method it returned the element that has the ID attribute with the specified value. I had to ensure all the IDs were unique or else using the getElementById() method it would only return the element with the ID that came first in my code. I then attributed the elements to variables which were used to store the data values.
Using previous knowledge, and backing it up with research I found the overall weighted grade is equal to the sum of the product of the weights (w) in percent (%) times the grade (g), and when using my element IDs looks like:
Weighted Grade = (weight1×g1 + weight2×g2 + weight3×g3 + weight4×g4 +...) / (w1 + w2 + w3 + w4 + ...)
This allowed me to practise and understand how to get data from an element within my code and how the innerHTML property sets the HTML content of an element (document.getElementById(“x”).innerHTML = “n”; Where x is the ID of the element being set and n is the content being set).
An issue when writing my arithmetic operators was the outputted grade percentage when rounded to no decimal points was 0% when it should have been 58%; however after gaining feedback from my lecturer I learnt an additional ‘+’ is needed between variables to show they are positive integers.
The next features I included were the ability to reset the input fields for each of the forms and the ability to add more rows after the initial five rows which are first shown to the user when they visit the website.
Each time the user click the ‘add row’ the ‘idnum’ increments by one which in turn changes the styling of the next form from ‘display: none’ to ‘display: block’ using conditional statements. Using ‘if’ I was able to specify a block of code to be executed if a specified condition was true for example if the display style of ‘x’ is ‘none’, change the display to ‘block’ when x is the ID of an element. I then used an else to specify a block of code to be executed, if the same condition was false.
My final outcome is a functioning grade calculator that can be used to work out your overall grade using your percentages and weightings. Users can also add more rows and reset the input fields before entering new data. The final outcome has a clean and simple visual design which doesn’t take away from the functionality. This final outcome is currently hosted at here.
This project was completed over twelve weeks (18th January - 3rd April) during which I set myself deadlines when I needed to be at a certain stage. For example by week six (18th February) I set myself the aim to have completed my final designs to give myself time to code my grade calculator while coding my weather app at the same time. Also needed to leave time during the last few weeks to collect together my work and display it in my printed and online portfolio. To help keep on top of all my deadlines I used my digital calendar, Todoist (a to do list and task manager), and a Gantt Chart. All three tools allowed me to finish my projects on time.