Minor Everything Web - Website
This repo is for a course from minor Everything Web at HvA.
The content used for this project comes from the current minor website found HERE (20-04-2018)
Website live HERE
The content is in dutch
Table of Content
- Getting started
- User scenario
- User interview
- User test
- To do
In this project for the minor the principle of Exclusive design has to be applied. This will be done by focusing/constraining myself by designing for a specific user(s). This project will be a redesign with the goal of implementing Exclusive design and the principles of user interface design Article
This project uses yarn
Here is how to get started with this project
- Download or clone the repo
git clone https://github.com/kyunwang/web-design.git
- Go to localhost:3000 and you are ready to go.
The current website is a one page static website divided in eight sections with a few images.
This is the content the current website offers and what we will be working with:
The current website is divided eight sections.
- is deze minor voor jou?
The content is divided per section and is in:
- Few images
- Text behind a toggle (I count this as a type content)
This is how the content will be sorted across scenes/states/pages.
The user scenario will clarify the goal and tasks. There are two user scenarios for this project:
From the case:
Marie is a graphic designer. She is Deaf, with capital D. This means that her first language is Dutch Sign Language. Quite a few of the hurdles she faces have to do with the fact that spoken/written Dutch is not her first language.
This means that that the difference between the Dutch Sign Language and Dutch can be a barrier for understanding.
Scenario: Marie has a friend who is looking for a minor and wants her help with his/her search. For her friend she wants to get a clear view of what this minor is all about and form an opinion about it.
Goal: Deliver clear and consice content for Marie(and other Deaf) to show what this minor is all about.
Potential minor student
The potential student is a Software Engineer student called Bas
As software engineer student, Bas learns all about the back-end but not front-end. He might be interested in the minor Everything web to learn more about front-end to complement his skills.
Scenario: Bas is looking for a minor and stumbles across Minor Everything Web during his search. He wants to learn about the minor to be certain that this is what he is looking for. He wants to know what the subjects given will benefit him and knowing about the experience of other students wouldn't hurt either.
Goal: Showcase the minor with content to instill a curiosity for the potential student. The student needs to be able to contact someone or sign in.
Bas had been searching for a minor to following with a friend of his. They have chosen this minor (Everything web) because they wanted to learn Front-end technology. As Software Engineer students they only learned about the Back-end.
Bas had the opinion that learning Front-end development would increase his worth as developer. Especially because he would be able to create something from start to finish.
They almost did not join the minor because of the look of the website. Given them the though "Is this web design?". They did join the minor after reconsidering the course content.
Their school has recommended them to sign up throught the website of kiesopmaat
- Signing up for the minor will not go throught the website
- The course content e.g. programme is the most important for the potential student
- The initial impression is important e.g. the look
- Web development should go hand in hand with web design
A simplefied userflow of someone looking for an minor would go through.
A few sketches will be placed here
This is the design made for the minor website, this time with a desktop first approach instead of mobile first. The goal was to make the content clear and seperate them to induce one primary action per state (block);
Note: This is a 'take away' design to follow and there exists some testing in it e.g. the wat the header is presented
Design is a subject to change in development (Which did happen in some cases
The following principle from this article has been implemented and where/how.
One primary action per screen More accurate is to say one primary action per state/scene as a screen acan be divided in sections of focus.
Provide a natural next step At the end of the 'Intro' a next step will be provided about where to go next. (the (programma)curriculum or over(about) page)
Strong visual hierarchies work best Great importance have been given to the headers/titles of each block to allow the visitor to quickly scan the page.
Smart organization reduces cognitive load This principle is a by-product of principle 11. The separating of content in own block is how this is implemented.
Marie has said that Deaf people have a hard time with complex words/sentences and jargon. That said being To-the-point was really important.
Sadly. I did not have the time to rewrite the content to make it easier to digest. However, it seemed that showing only the minimum required information and giving the option to read more was really pleasant and made the content easier to digest.
There was one assignment given to Marie to test the site, which was: To see whether this minor(web development) might be something for a friend of her who is looking for a minor.
The results that came out of the test:
- It was easy to scan through the site
- It was not clear that the questions in the testimonials were clickable
- The hierarchy in the testimonials was not clear. (The link between selecting a question and getting the answers)
- The Meer and Minder button/toggle was not clear until later
- The separation of content in blocks made the content easy to digest
As Marie is pretty comfortable with multiple sign languages and reads frequently (sign language and the national language are not the same) she
The to do list for when I have the time to fix it or if someone wants to make a PR winkwink
- Fix the transitions on the intro page
- Make the testimonials section responsive
- Process the feedback from the test (See usertest)
- Create the Contact page - (The submit will not be working)
Changes for feedback
- Designed and added a form and the contact page
- Fixed the animation direction from more info sections
- Made the more info animation less abrupt
- Interviewed Bas to verify ideas
- Tweaked user scenario based on the interview
- Repositioned quotes
- Added footer links (e.g. suggestion links) at the end of each page except on the contact page. Based on interview
- Created a simplefied userflow
- Made the cursor to a pointer on multiple clickable elements