Design Ideas

[LJSkinner]

This issue is a an area for design ideas to be discussed for the website. We'll keep this issue open so passerby's can get a look at our process.

[LJSkinner]

@AndrewMcGuckin Respond to this comment with other website pros and cons.

[LJSkinner]

@AndrewMcGuckin Respond to this comment with other website pros and cons.

@AndrewMcGuckin

I thought I would start to get the ball rolling with this. Starting with https://grades.lukasa.co.uk/ .

Pros

1. Dynamic Module Form Generation - I like that this website doesn't instantly just present me with a huge form where my eyes struggle because there is so much on the screen at once. Having the form expand as I enter modules feels natural. (Although I would note we could get away with having more modules appear at the beginning rather than just one, perhaps this is something we could let the user toggle) 2. Minimalist UI - It is important to have a site that is attractive to users, but finding that balance can sometimes be difficult. I think this website does pretty good at being modern (for the time) but also not too distracting. 3. Removing Modules as well as Adding - Although this may seem very obvious, I did find a few a while ago that you had to refresh the page to start over. It is nice to be able to stay in the same area and state and be able to remove modules.

Cons Note that most of these are likely just because the website isn't actively maintained anymore but will still be useful for us moving forward!

1. No way to save calculation - Although this may be a feature we implement far down the pipeline, we should imagine the following scenario. A student first calculates their degree classification at the beginning of Year 3, and then later in the year they want to calculate it again. They would have to reenter everything. It would be nice if they could just keep the website bookmarked at come back to it when they want to recalculate. 2. FAQ is inaccessible after clicking the "Let's Go" button - After you hit the button to start calculating, there is no way to get back to the first info box without refreshing, and hitting the back button actually just throws me back to my previous website/tab. The FAQ should always be available, we could either stick the button in a footer or we could have some kind of hover button that displays the popup. 3. Adding Modules has no upper limit - It looks like you can just add modules ad infinitum, which to me doesn't seem necessary as I am sure there is an upper limit. Perhaps we could just present them with an input and ask them how many graded modules they took in Year 3 and 4 (assuming honours of course). We can put some upper limit on this input to avoid them putting in an unrealistic number of modules.

4. Unclear on the type of degree - Although it does say in the first info box about 1st, 2:1 etc. the user may click past this without reading. This isn't something we should worry too much about in the beginning when we are just focusing on honours degrees, but at that stage we should make it explicit that it is honours degrees that are being calculated. If we later decide to support other degrees like Master or 3 year Bachelors we can let the user pick from a range. The thing that would change is the algorithm.

[AndrewMcGuckin]

@LJSkinner

Grade Calculator (www.gradecalc.co.uk)

Pros

1. Simple Layout - All links are accessible from the main page, nav bar and footer, this reduces the chance of a user not being able to find their way around the site. The homepage contains large buttons for each calculator and a few to display the main features of the site. The site is responsive and includes a mobile version with custom navigation.
2. Multiple Grade Calculators - This site is quite varied in that it can calculate grades for single modules, academic years and different degrees such as bachelor, masters and integrated masters. Each calculator has different layouts that correspond with their individual requirements.
3. Allows users to save calculated results - Accounts can be generated using basic information (name, email, password and university name) and can be used to store previously calculated grades. Also includes options to remember login details and recover passwords.
4. Clear Input Guide - Provides a clear guide on how each calculator on the site works and what information should be inserted into which input whilst giving an example of accepted input.
5. Quick Settings - Issue reporting, feedback and cookie consent are easily accessible at all times on the right hand side of each page. This saves a user from having to find the correct link to report any issues they are having.

Cons

1. Mobile Design Quirk - When visiting from a mobile device the navigation bar splits the ability to Login or Register into two pages. This seems reasonable at first as each page only shows the form for either logging in or registering. However if the screen is resized or viewed on say an iPad where the mobile menu is still available both pages display the same content, as in both the login and register forms are displayed together no matter which navbar link is clicked. This seems like a waste of resources and could be designed in a clearer way.
2. Accessibility Issues

• Some button colours are too bright in contrast to the darker body colour.
• Text readability on the Reset buttons may be hard for some users until hovered over.
• Hover colours on some buttons make the text unreadable.
• Ads on the mobile version can obscure the nav bar toggle meaning the ad has to be dismissed first before the toggle can be pressed.

3. Not Specific to any University - Whilst the site allows users from multiple different universities to sign up the calculators don't take into account any specific university policies on grading. Granted this warning is displayed however it is located within the footer, below the inputs that the user will see first. Ideally any warnings on liability or limited functionality should be placed before the user interacts with the calculator either through a dismissible warning message or a popup modal when the page loads.
4. Input Guide removes focus from calculator - If a user is unsure of what to input into a certain field a guide is provided to the right of each calculator, when clicked a modal is presented. Although the information provided within these modals is very helpful they overlap and cover the fields they are referring to meaning the user may have to repeatedly open and close the modal in order to fully understand what has to go where. I wouldn't normally consider this a con however in this case the information could be presented on the sidebar that the modal toggle is already located on.
5. Fixed Input Type - Most input types are percentages. This at first doesn’t sound like a problem since a lot of grades are measured as a percentage however some assignments may have different total marks such as 40, 60 or 80. This site doesn’t include the option to change the input for assignments into marks rather than percentages meaning the user may have to do more work to prepare their grades before using the site. The number of grades that can be entered is also fixed with no way of adding or removing.
6. Long-winded calculation process - To calculate the overall grade in an undergraduate degree, a user first has to use the module calculator for each module to gather the predictions for each based on the grades from their assignments. Then the year calculator is used to produce the average of all modules for one year. The user then needs to switch to the undergraduate calculator and input the values calculated for the first year, for the second year this whole process has to be repeated. This seems like a complicated way involving a lot of switching between different calculators and calculating percentages for assignments to produce a general estimate. Ideally if a user wants to calculate an undergraduate degree this multi-step process would be kept on the same page and saved along the way. This con is somewhat negated if the user has an account as they can save the individual modules and year calculations to this account however the functionality shouldn't be confusing in order to necessitate account creation.

[LJSkinner]

@LJSkinner

Grade Calculator (www.gradecalc.co.uk)

Pros

1. **Simple Layout** - All links are accessible from the main page, nav bar and footer, this reduces the chance of a user not being able to find their way around the site. The homepage contains large buttons for each calculator and a few to display the main features of the site. The site is responsive and includes a mobile version with custom navigation.

2. **Multiple Grade Calculators** - This site is quite varied in that it can calculate grades for single modules, academic years and different degrees such as bachelor, masters and integrated masters. Each calculator has different layouts that correspond with their individual requirements.

3. **Allows users to save calculated results** - Accounts can be generated using basic information (name, email, password and university name) and can be used to store previously calculated grades. Also includes options to remember login details and recover passwords.

4. **Clear Input Guide** - Provides a clear guide on how each calculator on the site works and what information should be inserted into which input whilst giving an example of accepted input.

5. **Quick Settings** - Issue reporting, feedback and cookie consent are easily accessible at all times on the right hand side of each page. This saves a user from having to find the correct link to report any issues they are having.

Cons

1. **Mobile Design Quirk** - When visiting from a mobile device the navigation bar splits the ability to Login or Register into two pages. This seems reasonable at first as each page only shows the form for either logging in or registering. However if the screen is resized or viewed on say an iPad where the mobile menu is still available both pages display the same content, as in both the login and register forms are displayed together no matter which navbar link is clicked. This seems like a waste of resources and could be designed in a clearer way.

2. **Accessibility Issues**

* Some button colours are too bright in contrast to the darker body colour.

* Text readability on the Reset buttons may be hard for some users until hovered over.

* Hover colours on some buttons make the text unreadable.

* Ads on the mobile version can obscure the nav bar toggle meaning the ad has to be dismissed first before the toggle can be pressed.

3. **Not Specific to any University** - Whilst the site allows users from multiple different universities to sign up the calculators don't take into account any specific university policies on grading. Granted this warning is displayed however it is located within the footer, below the inputs that the user will see first. Ideally any warnings on liability or limited functionality should be placed before the user interacts with the calculator either through a dismissible warning message or a popup modal when the page loads.

4. **Input Guide removes focus from calculator** - If a user is unsure of what to input into a certain field a guide is provided to the right of each calculator, when clicked a modal is presented. Although the information provided within these modals is very helpful they overlap and cover the fields they are referring to meaning the user may have to repeatedly open and close the modal in order to fully understand what has to go where. I wouldn't normally consider this a con however in this case the information could be presented on the sidebar that the modal toggle is already located on.

5. **Fixed Input Type** - Most input types are percentages. This at first doesn’t sound like a problem since a lot of grades are measured as a percentage however some assignments may have different total marks such as 40, 60 or 80. This site doesn’t include the option to change the input for assignments into marks rather than percentages meaning the user may have to do more work to prepare their grades before using the site. The number of grades that can be entered is also fixed with no way of adding or removing.

6. **Long-winded calculation process** - To calculate the overall grade in an undergraduate degree, a user first has to use the module calculator for each module to gather the predictions for each based on the grades from their assignments. Then the year calculator is used to produce the average of all modules for one year. The user then needs to switch to the undergraduate calculator and input the values calculated for the first year, for the second year this whole process has to be repeated.
   This seems like a complicated way involving a lot of switching between different calculators and calculating percentages for assignments to produce a general estimate. Ideally if a user wants to calculate an undergraduate degree this multi-step process would be kept on the same page and saved along the way. This con is somewhat negated if the user has an account as they can save the individual modules and year calculations to this account however the functionality shouldn't be confusing in order to necessitate account creation.

@AndrewMcGuckin

I more or less agree with all of the cons, and the majority of the pros as well. The only thing I would say about the homepage that bothered me is that in the hypothetical where you had some other kind of class or degree that homepage with all the buttons could become very unwieldy. I don't really think it's that necessary to fill the space with all the calculators like that. Imo this should be a selection box of some kind that is front and center, but the nav bar keeps the options as well in case the user selects the wrong one. If we're going to ask the user questions like "How many modules do you have?" we may as well have them decide what degree they are on at the same time. This is not a huge deal and perhaps we can find a compromise for both.

One thing that I noticed on my larger monitor is that it is not responsive going up. Now sure, you could argue that 1440p monitors and above still aren't the norm but for our website we really want to make sure that we're responsive on any device at any screen size, even going up to increase accessibility for all users.

From both of our reviews it seems we've picked up on the following as the most important for our calculator:

1. The website is universally responsive, with an accessible colour scheme or options. 2. We make sure that helper information or tooltips don't get in the way of the calculator 3. The calculator has a uniform solution, which rarely has to redirect the user to multiple pages. 4. The Layout and UI are simple, minimalist and easy to navigate. 5. Adding onto point 1, we want to ensure the mobile experience is just as responsive. 6. A clear guide on how to use the calculator, using the principle from point 2. 7. We want to support some kind of saving in the future, although it may not be the number 1 priority.

[LJSkinner]

@AndrewMcGuckin

Let's now move on to deciding a colour scheme for our website. Reply to this with your idea for the colour scheme. I will likely end up agreeing with it but in the case that I don't I'll find some alternatives.

[AndrewMcGuckin]

@AndrewMcGuckin

Let's now move on to deciding a colour scheme for our website. Reply to this with your idea for the colour scheme. I will likely end up agreeing with it but in the case that I don't I'll find some alternatives.

For this colour scheme I wanted to go with something that reflects the websites purpose. University of Stirling use a variety of colours on their 3 palettes many of which are quite bold. Calculating grades is a stressful process so to try and present the calculator in a more calming way I think it would be more suitable for a subtle colour scheme that isn't out there to be bold and flashy.

I first of all looked at a few websites that showcase a variety of designs to see what colours are being used in the real world and how they are used relating to their purpose and category.

The following designs caught my attention:

1. Source (Live Site) No. 6 - Awink

Comments: A nice blend of dark and light colours complemented by the blue to even things out. 
This colour scheme could work well in both light and dark modes.

2. Source No. 8

 Comments: Very soft and welcoming, possibly more suited to shopping websites rather than educational 
 settings. Colours are similar and don't distract from each other but allow text and buttons to be clear and 
 bold if needed.

3. Source (Live Site) No. 15 - Identio

 Comments: Nicely designed layout. The use of the blue to highlight the logo and key words in the slogan is 
 nice. I also like the contrast between the dark and light backgrounds to highlight an area a user may want 
 to interact with.

4. Source (Live Site) No. 11 - Omega Yeast

White: #f7f7f7
Green: #7da2a9

Comments: Very subtle colour scheme, almost white but slightly off to be easier on the eyes. Bold black text is a nice 
constrast and easy to read whilst the green adds a soft and sparce colour to the page.

5. Source No. 25 - Jean-Baptiste Kaloya Portfolio

Colours (darkest to lightest):
#150734
#0F2557
#28559A
#3778C2
#4B9FE1
#63BCE5
#7ED5EA

Comments: Simple but very pleasing using different shades of one colour. Text colour and sizing could be adjusted to 
increase readability.

6. Source No. 32 - Sheerlink by RTX

Colours:
#4A2C40 (purple)
#E9BD43 (yellow)
#7D3780 (pink)

Comments: Professional looking site with good use of colours. Matches with the background picture but blends nicely and 
doesn't distract too much.

7. Source (Live Site) No. 40 - Sysdoc

Colours:
#001730 (dark blue)
#4AD7D1 (light blue)
#FE4A49 (red)

Comments: Similar to identio in the way the light blue is used for emphasis but also being included in the main logo along 
with the red being included in the background image.

8. Source (Live Site) No. 41 - Veneziano Coffee Roasters

Colours:
#F6F4F2 (white) 
#425664 (blue)
#C6AD8F (brown)

Comments: Muted colours that are used nicely in a modern but clear design. Again the white isn't too bright so is easier on 
the eyes.

9. Source No. 44 - Kyle Decker Portfolio

Colours:
#F5F5F5 (white)
#8DB48E (light green)
#4D724D (dark green)

Comments: Very simple site but it just works. Plain white-ish background with bold fonts and small amount of colour to focus 
the user.

Sample Designs

Using these designs as inspiration I visited colorhunt.co to see other sample palettes that could be used. To try and give a better visual representation I drafted a sample homepage for this site, this is by no means the final design and will probably be changed quite a bit.

Sample 1 (Link):

Sample 2 (Link):

Sample 3 (Link):

Out of the three above I think number 3 is my favourite, with a few tweaks I could see this colour scheme working quite well. 
Whilst I do like the other two I think they'd need a bit more tweaking in order to get the colours to match and blend 
together better.

@LJSkinner Reply to this with your thoughts on the designs and sample colour schemes/wireframes. Do you like any of them or do you think other colours would be more suited to this site?

[LJSkinner]

@AndrewMcGuckin Let's now move on to deciding a colour scheme for our website. Reply to this with your idea for the colour scheme. I will likely end up agreeing with it but in the case that I don't I'll find some alternatives.

For this colour scheme I wanted to go with something that reflects the websites purpose. University of Stirling use a variety of colours on their 3 palettes many of which are quite bold. Calculating grades is a stressful process so to try and present the calculator in a more calming way I think it would be more suitable for a subtle colour scheme that isn't out there to be bold and flashy.

I first of all looked at a few websites that showcase a variety of designs to see what colours are being used in the real world and how they are used relating to their purpose and category.

The following designs caught my attention:

1. Source (Live Site) No. 6 - Awink

Comments: A nice blend of dark and light colours complemented by the blue to even things out. 
This colour scheme could work well in both light and dark modes.

2. Source No. 8

 Comments: Very soft and welcoming, possibly more suited to shopping websites rather than educational 
 settings. Colours are similar and don't distract from each other but allow text and buttons to be clear and 
 bold if needed.

3. Source (Live Site) No. 15 - Identio

 Comments: Nicely designed layout. The use of the blue to highlight the logo and key words in the slogan is 
 nice. I also like the contrast between the dark and light backgrounds to highlight an area a user may want 
 to interact with.

4. Source (Live Site) No. 11 - Omega Yeast

White: #f7f7f7
Green: #7da2a9

Comments: Very subtle colour scheme, almost white but slightly off to be easier on the eyes. Bold black text is a nice 
constrast and easy to read whilst the green adds a soft and sparce colour to the page.

5. Source No. 25 - Jean-Baptiste Kaloya Portfolio

Colours (darkest to lightest):
#150734
#0F2557
#28559A
#3778C2
#4B9FE1
#63BCE5
#7ED5EA

Comments: Simple but very pleasing using different shades of one colour. Text colour and sizing could be adjusted to 
increase readability.

6. Source No. 32 - Sheerlink by RTX

Colours:
#4A2C40 (purple)
#E9BD43 (yellow)
#7D3780 (pink)

Comments: Professional looking site with good use of colours. Matches with the background picture but blends nicely and 
doesn't distract too much.

7. Source (Live Site) No. 40 - Sysdoc

Colours:
#001730 (dark blue)
#4AD7D1 (light blue)
#FE4A49 (red)

Comments: Similar to identio in the way the light blue is used for emphasis but also being included in the main logo along 
with the red being included in the background image.

8. Source (Live Site) No. 41 - Veneziano Coffee Roasters

Colours:
#F6F4F2 (white) 
#425664 (blue)
#C6AD8F (brown)

Comments: Muted colours that are used nicely in a modern but clear design. Again the white isn't too bright so is easier on 
the eyes.

9. Source No. 44 - Kyle Decker Portfolio

Colours:
#F5F5F5 (white)
#8DB48E (light green)
#4D724D (dark green)

Comments: Very simple site but it just works. Plain white-ish background with bold fonts and small amount of colour to focus 
the user.

Sample Designs

Using these designs as inspiration I visited colorhunt.co to see other sample palettes that could be used. To try and give a better visual representation I drafted a sample homepage for this site, this is by no means the final design and will probably be changed quite a bit.

Sample 1 (Link):

Sample 2 (Link):

Sample 3 (Link):

Out of the three above I think number 3 is my favourite, with a few tweaks I could see this colour scheme working quite well. 
Whilst I do like the other two I think they'd need a bit more tweaking in order to get the colours to match and blend 
together better.

@LJSkinner Reply to this with your thoughts on the designs and sample colour schemes/wireframes. Do you like any of them or do you think other colours would be more suited to this site?

@AndrewMcGuckin

I'm definitely leaning towards number 3 out of those sample ones you've provided, like you said with a few tweaks I think it could look really good in either dark or light, which we definitely want to be able to easily support. I think the green one would be better suited to something that actually is related to green like a renewable energy website or something like that, despite being most Uni of Stirling alike. So I'm picking number 3.

Perhaps we could keep the gradient style in your 5th source website "Jean-Baptiste Kaloya Portfolio" in mind for other pages, it could be something that is slightly toned down but still uses a gradient.

Overall I am pleased with the direction of this.

[LJSkinner]

@AndrewMcGuckin

We're two days away from the barebones UI review date. Which if I recall correctly I'd said was basically the main page (like shown in the wireframes above) and a calculator page that I could begin to write some JS for (#1). We've already met the other two requirements now for colour schemes and some wireframes. (You can still make more of course) Could you please respond letting me know if this review date is still achievable for the actual web page barebones or if we should move it further back into W/C 28th of November?

Oh and just in case you're unsure, once we have an idea of design and the pages down I'm happy to help with front-end work alongside the algorithm. :)

[LJSkinner]

@AndrewMcGuckin

Adding to the last one. We will of course for now focus on home, the undergraduate calculator and the FAQ section.

[AndrewMcGuckin]

Previously posted in #1, duplicating here to keep everything together

Homepage Initial Design

@LJSkinner If there is anything you don't like please reply to these comments with your thoughts.

[AndrewMcGuckin]

Homepage Calculator

In the first hero section of the homepage the user can start the calculator by clicking one of three options, these currently are "Module", "Undergraduate" or "Masters". The following diagram shows a potential multi-step form to better understand the user needs and build the calculator accordingly.

Areas that are colour coded represent how each stage will look depending on which option is pressed in the previous section/question.

[AndrewMcGuckin]

Also previously posted in #1, posting here to combine with the rest of the design process.

Calculator Preview for an Honours Degree marked over 1 year

This is a very rough draft of a possible layout, there is a lot of information to be displayed on one page. To try and fit it into a wireframe I've condensed some of the features by placing them next to each other. The predominance calculation could be moved under the modules to give more space.

The modules show some of the basic information, if a user wants to view or edit the assignment details that contribute to the module grade calculation they can click the edit button. This information could be displayed in the following two ways:

1. A modal triggered by the edit button showing the assignment details allowing the user to quickly edit grades.
2. The module acts as a dropdown, when the edit button is pressed the module bar expands to show the information, when edits are completed the module contracts back to it's original look.

The module bar style is also something I'm not quite set on, I've applied a black, blue and white style to show the differences. Personally I quite like the blue however there are quite a few elements that also have blue backgrounds so it may be better to choose one of the alternatives or another colour completely.

[LJSkinner]

Also previously posted in #1, posting here to combine with the rest of the design process.

Calculator Preview for an Honours Degree marked over 1 year

This is a very rough draft of a possible layout, there is a lot of information to be displayed on one page. To try and fit it into a wireframe I've condensed some of the features by placing them next to each other. The predominance calculation could be moved under the modules to give more space.

The modules show some of the basic information, if a user wants to view or edit the assignment details that contribute to the module grade calculation they can click the edit button. This information could be displayed in the following two ways:

1. A modal triggered by the edit button showing the assignment details allowing the user to quickly edit grades.

2. The module acts as a dropdown, when the edit button is pressed the module bar expands to show the information, when edits are completed the module contracts back to it's original look.

The module bar style is also something I'm not quite set on, I've applied a black, blue and white style to show the differences. Personally I quite like the blue however there are quite a few elements that also have blue backgrounds so it may be better to choose one of the alternatives or another colour completely.

@AndrewMcGuckin

For the options for displaying the details, we should probably just profile both of those options to see how they look and then go with whatever one feels best. We can also do the same with the colours for this and trial a number of combinations until we are set on one.

I think our next steps should be to work on the design of the FAQ, and to start implementing both the design for the home page and undergrad honours calculator and the functionality. We can worry about the contact page later as that's likely to be quite simple.

[LJSkinner]

Homepage Calculator

In the first hero section of the homepage the user can start the calculator by clicking one of three options, these currently are "Module", "Undergraduate" or "Masters". The following diagram shows a potential multi-step form to better understand the user needs and build the calculator accordingly.

Areas that are colour coded represent how each stage will look depending on which option is pressed in the previous section/question.

@AndrewMcGuckin

I think this is a good way basis for now. We can figure out the other happy paths when we get to them.

[LJSkinner]

@AndrewMcGuckin

As I'd previously discussed, for the contact us page, I don't think we need to stray too far from something simple. I've done a very rough sketchup of it. Obviously not exactly to scale and the colour scheme won't necessarily be applied in this way.

[AndrewMcGuckin]

A couple of revisions have been made to the design since the last posts. These are:

Home

After reviewing the initial wireframe it was felt that the website features section could be amended into more of a guide in how the website functions.

1 Year Honours Calculator

Only some minor changes were needed here, moving the add module button to be below the existing modules and centring the Predominance calculator so that if more modules are added the predominance section stays centred vertically. A donut/pie chart is also to be used as a better representation of how the modules fit by grade.

2 Year Honours Calculator

This page will be used when a user is on a dual year program. It is essentially two "1 Year Honours Calculator" pages combined with a grade summary for each replacing the predominance which is now located in a new section underneath.

FAQ

We wanted this to be different instead of just simple questions. This design is more of a mobile text conversation. To further enhance this we will use the Animate on Scroll library to add fade effects as the user scrolls down the page to mimic messages being sent and received.

[LJSkinner]

A couple of revisions have been made to the design since the last posts. These are:

Home

After reviewing the initial wireframe it was felt that the website features section could be amended into more of a guide in how the website functions.

1 Year Honours Calculator

Only some minor changes were needed here, moving the add module button to be below the existing modules and centring the Predominance calculator so that if more modules are added the predominance section stays centred vertically. A donut/pie chart is also to be used as a better representation of how the modules fit by grade.

2 Year Honours Calculator

This page will be used when a user is on a dual year program. It is essentially two "1 Year Honours Calculator" pages combined with a grade summary for each replacing the predominance which is now located in a new section underneath.

FAQ

We wanted this to be different instead of just simple questions. This design is more of a mobile text conversation. To further enhance this we will use the Animate on Scroll library to add fade effects as the user scrolls down the page to mimic messages being sent and received.

@AndrewMcGuckin

This looks really good, if we get the simpler pages done first (I.E Contact and FAQ) we can spend a lot more time on the most important parts. Of course we will keep this flexible.

[AndrewMcGuckin]

Contact

A simple but clear contact page to allow a user to contact us quickly either through a contact form or by emailing us directly.