Aarhus Academy
CREATE DIVERSITY THROUGH MIXTURE OF YOUNG PEOPLE WITH AMBITIONS
Crafted by: Sharmarke Hujale Supervisors: Murat Kilic Michael Hvidtfeldt Advanced User Experience, autumn 2018 Multimedia Design and Communication, Business Academy Aarhus Website: aarhusakademi.hujale.dk/
Sharmarke Hujale The author of this report
Advanced User Experience, autumn 2018 Multimedia Design and Communication, Business Academy Aarhus Project title: Aarhus Academy Student: Sharmarke Hujale Supervisors: Murat Kilic & Michael Hvidtfeldt Website: aarhusakademi.hujale.dk Characters: 23532 Pages in report: 104
LET’S ROLL THE PAGE SHALL WE? 3
Contents
1
2
Introduction
Research
9
19
Research
10 Initiation
20
Get to know the client
11
The case
21
Who’s the target audience?
12
Problem statment
22
Diving deeper with interviews
14
Problem delimitation
14
Methodology
16
Introduction
Critique of methods
and tests 24
Survey distribution
27
Personas
32 Sub-conclusion
3
4
Design
Interaction
35 Design
51 Interaction
36
Information architecture
52
40
Design with UX honeycomb
52
Finding the right theme
in mind
53
Child theme creation
54
Folder structure &
41
Findability
44
Usability & desirability
47
Value
WordPress as a tool
overview 55
48 Sub-conclusion
Files & naming conventions
56
Plugin & usage of semantic markup
59 Sub-conclusion
5 Time's up 61 Time's up 62
Budget & estimation
64
Conclusion
66
Bibliography
68
Appendix
NOW BEGINS THE REAL STORY 7
8
Introduction 10 Initiation 11 The case 12 Problem statement 14 Problem delimitation 14 Methodology 16 Critique of methods
9
Initiation
People with different personalities. People with different styles and looks. People rolling in with various of background and age. A place where there is room for everyone. That is the case with Aarhus Academy. Aarhus Academy is the third oldest high school in Aarhus and has since 1933 been known for its diversity with the students. It was both young and a bit older students that had the ambition to create a better life with a student hat on their head. With Aarhus Academy the ambition is still to keep the same diversity with enriching mixture of young people with the same ambition as back in the 1930’s. And by meeting the student at eye level and focusing on the individual’s needs and challenges will create inclusion among the students and teachers and form better solutions to handle each situations.
10
The case
This exam project was given by the Business Academy Aarhus. The project’s aim is to solve a real user experience problem for an external client. The focus is to create a digital solution for the client that creates trust and drive users to reuse the product. In this case I had the opportunity to have Aarhus Academy as the client where I had to come up with solution(s) related to user experience.
11
Problem statement
Based on Aarhus Academy and their student’s common ambition and value to be diverse and create a better life with a student hat, it’s to investigate how to create a desired user experience that will attract the target audience to Aarhus Academy.
• How can I through the creation of a website for Aarhus Academy make their values (value) more visible for their target audience? • How can I with the help of the Honeycomb model make Aarhus Academy’s website more usable (usability) for the target audience so it creates a desire (desirability) to reuse it? • How can I make it more easier for the user to find (findability) relevant content that they are seeking through Aarhus Academy’s website with less effort and frustration?
Problem delimitation
Due to the scope of this project and the time constraints. It was not possible to design and develop on WordPress all pages for Aarhus Academy. So for this project I only focused on the top-level content such as the homepage, for new students, educations and practical information. During my work with this project it was clear that an animation wouldn’t have a relevancy for my solution so I did not include one.
Methodology
This report is divided into 3 main sections research, design and interaction. For each section there will be a conclusion that will summarize the sections’ results. To collective quantitative data I will interview a representative from Aarhus Academy to know more about the school and what issues they might face with their current website. To gather more data I will create a survey to be distributed around Facebook groups to know more about the target audience’s reason(s) for their choice of secondary education. (continues on next page)
14
For the qualitative research I will
Through this process I will
conduct user interviews on three
analyze and reflect upon the UX
persons from the Aarhus Academy’s
Honeycomb with four elements
target audience if possible a 9th
- findability, usability, desirability
or 10th grade class. If not I will use
and value.
my own network. The same three persons will also be part of a user
Based on my designs the website
test with already prepared tasks
will be developed in WordPress
and methods such as think aloud on
with a child theme. I will test the
Aarhus Academy’s current website.
website on minimum 2 persons
The purpose is to gain qualitative
if possible to validate the
insights to issues that the client
desired user experience. I will be
might not be aware of.
documenting the folder structure, naming conventions and the
Afterwards I will create and visualize
creation of a custom plugin with
two personas that I can based my
the correct usage of semantic
decisions on during the design and
tags, CSS, JS and PHP with good
development process.
comments.
In the design phase I will first do a
At last I will show my budget and
card sorting test on four different
estimation, and then conclude on
people based on my personas that
my problem statement.
will help me to create a new and improved information architecture. Then the next step will be to design high fidelity mockups that will be the base for developing the website itself. 15
Critique of methods
It would have been optimal to gather quantitative data from Google Analytics to identity user behaviour on their website, but since the Academy had a hard time getting it from the company that made their website. It didn’t become a reality. To carry out usability tests on 9th or 10th grade classes from a primary school would have been optimal. But due to time constraints of the project. And the obstacle of contacting and waiting for a school’s permission from both teacher and parents was simply time consuming. So I used my own network to gather participants for the usability test. The quantitative data from my survey is only based on one high school (Viby Gymnasium) since other groups did not gave me a response. Which could have give me more data to work with. Furthermore it would have been relevant to do at least three usability-tests on the improved website on WordPress, but due to time constraints that was not possible. Developing the product was prioritized more.
16
Let's pick up the pace
18
Research 20 Get to know the client 21 Who is the target audience? 22 Diving deeper with interviews and tests 24 Survey distribution 27 Personas 32 Sub-conclusion
19
Get to know the client
Aarhus Academy was founded back in 1933 and has about 700 students. They are the largest institution of secondary education offering the 2-year HF programme. They are always trying to be at the front in Denmark when it comes to the HFeducation. They are also one of the six places in Denmark that offers 2-year STX. It is this education that the Academy started off with in 1933 and is a crucial part of their DNA. The school also offers Gymnasial Supplering as their third education for students that are graduated, but may need subject(s) and/or level(s) to attend to a higher education that they want (Aarhus Akademi, 2018).
Aarhus academy back in 1971 (mklarsen, 2018) 20
Who is the targetaudience?
After having a feeling of who Aarhus Academy is. The next phase would be - who are they targeting? In the initial phase of the project I wrote a mail to Aarhus Academy before a meeting to know who they were targeting with their current website. The one who gave me a response was Dorte Abildhauge who is part of the administration department. She told me that they were targeting upcoming students to Aarhus Academy. The age-group is around 16-23 years old. The younger part of the age-group would be found in 9th or 10th grade classes (see mail with Dorte appendix 1.1). She later on after our meeting (see notes from the meeting appendix 1.2) sent me an excerpt from their new upcoming brochure for HF-students that talks more about the age-group. The average age at the start of the studies is 18 years old, but in overall the age varies from 15-32 years old. Most of the HF students are between 16-23 years old though. Some students come directly from primary school or a boarding school, others from another secondary education. Some has also been working, travelling or been to a high school (højskole). She also mentioned in the mail that 50% of their students come from other high schools/educations that they previously had dropped out of (see mail with Dorte appendix 1.3).
21
Diving deeper with interviews and tests
After I was provided with the information of the target-audience from Dorte I was now able to do usability tests on Aarhus Academy’s current website. The purpose for that was to identify some issues from the user’s point of view. And to also know more about the target-audience I conducted three user interviews. Two primary school kids from Frederiksbjerg skole and one student from Aarhus HF & VUC. I did it to know more about who they are, what they do and what are their interest(s) and personality, and to make them more comfortable before the usability test. Through the tests I made sure to set the agenda and asked them to record their face with my laptop while doing the test. I tried through the tasks I gave them to uncover some potential issues with the site where I could up with solutions with regards to my problem statement.
(unsplash, 2018)
22
The following is a summary of the most important insights from the usability tests: •
Stressed or frustrated about the amount of text
•
Hard to find a page that talks about the social life at the Academy
•
Trouble with clicking on the buttons
•
Confusing navigation and submenus
•
General you have to click a lot and not finding what you want in the end
While doing the tests I also asked them that if you wanted to be a student at Aarhus Academy what do you need to know. You can see all three usability test transcripted from appendix 2.1 to 2.3.
23
Survey distribution
When I finished doing the quantitative research I had gathered some great insights, but I wasn’t done yet. I wanted to know in a more broader perspective what reason(s) people choose the high school/gymnasium that they currently go to or went to. To investigate the reason(s) I prepared a survey that I distributed around high school Facebook groups with the permission of the admin team. Based on 92 answers, the majority of the respondents are either 17 or 18 years old where the females dominate with 73 of the answers.
24
When it came to their reason(s) I made sure to include a text area where they could freely write without having to be forced to choose prefixed options. That way I could gather more honest answers.
It’s worth noticing that 52% of the respondents answered that their reasons for choosing the high school is because of the location - that the place is either close by or there’s good transportation options that in the end would lower the students expenses. (continues on next page)
25
Around 17,5% chose their high school based on positive reactions or influences such as how well the school environment is, that it's very spacious and diverse, that it has a good reputation or a good first impression from the open house. Only 6% chose their high school because of a family member who recommended the school or a friend who also wants to go there. When it came to meeting new people, seek new challenges and not wanted to go with people you knew from primary school only 2% answered that. 5% answered that the high school that they go or went to wasn’t their first choice (see the whole survey in appendix 3.1).
26
Personas
After gathering both quantitative and qualitative data my next thought was "Who am I going to design for�? In order for me to make a solution that will be usable and create value for the target audience I have created 2 personas based on my data (survey), interviews, observation and usability tests (Babich, 2017). (See personas on next page)
27
Persona I Jesper Larsen Age: 23 year Gender: Male Education: Webdeveloper (webintegrator) Location: Aarhus
Interets
Gaming
Web design
Personality Friendly
humorous
nerdy
helpful
Bio Jesper is born raised in Aarhus and lives together with his family. On a regular basis he goes to Aarhus HF & VUC in 10th grade. He does that to improve his grades so that he can start in HF. Besides school, Jesper has an interest for gaming and web design. His favorite games are Final Fantasy 14, Skyrim and God of War. He has previously finished his education as a web developer but couldn’t use it to find a job or internship so that’s the reason why he went back to the school board.
28
Social media
Devices
Discord
YouTube
Internet usage
70% Mac
Approx. 8 hours daily
30% mobile
User needs
Frustrations
Wants to know if the school offers HF
Does not like distracting elements when he wants to find information
To find information about the school and the social life That he can find people at his age
Time wasting too much to find something he’s searching for
Business objectives To find what he is looking for without trouble and confusion To make the experience more usable and desirable To make Aarhus Academy’s values more visible
(Continue to persona II) 29
Persona II Oline Kristensen Age: 15 year Gender: Female Education: Primary school Location: Aarhus
Interets
Family & friends
Animals
Gymnastic
Personality Strong willed
Determined
talkative
extrovert
Bio Oline is born and raised in Aarhus. She’s currently living together with her mother and brothers. She’s a 9th grader in Frederiksbjerg skole in Aarhus C. She likes very much to hang around with her friends after school by either eating or go shopping. She also loves to spend time with her family and talk about her day and what’s on her mind.
30
Social media
Devices
Snapchat
YouTube
Internet usage
80% mobile
Approx. 10 hours daily
40% tablet
User needs
Frustrations
What subjects & activities do they provide
Don’t want to read too much text and get bored away
Wants to know if the school has a good reputation
Using too much time on finding what she’s looking for
If the school has good transportation options
Business objectives To find what he is looking for without trouble and confusion To make the experience more usable and desirable To make Aarhus Academy’s values more visible 31
SubConclusion
The research section has highlighted that Aarhus Academy has a broad target-audience that ranges from the age of 15-32 years old But by conducting usability tests on the target audience it has uncovered some great opportunities for solutions that will satisfy their needs. This project will have a more concrete format to work with based on the insights from the research.
Design 36 Information architecture 40 Designing with UX honeycomb in mind 41 Findability 44 Usability & desirability 47 Value 48 Sub-conclusion
35
Information Architecture
During my initial usability test with Aarhus Academy’s current website the participants had a hard time finding the content that they wanted. It ended up either in frustration or confusion for the participants (see top three usability problems appendix 4.1). So the first step to create a better user experience for the target audience was to build a better IA. In the brainstorm process I used my persona’s user needs, frustrations and the business objectives as well as looking at the current IA and other websites such as Aarhus HF & VUC (Aarhus HF & VUC, 2018), Varde Gymnasium (Varde Gymnasium, 2018) and Gentofte Studenterkursus (Gentofte Studenterkursus, 2018) for inspiration. I used the Top-Down approach to best satisfy my goals and user needs (Zieba, Cao and Ellis, 2015, p.61). (see brainstorm on next page)
36
37
(unsplash, 2018)
At this part it was finally time to run some tests. The method I used for testing findability was a closed card sorting. Users are asked to organize pages or sections under prefixed categories (Zieba, Cao and Ellis, 2015, p.70). I tested on 3 users who fit the personas as well as one expert (see the results matrix appendix 5.1). I used the Optimal Workshop to conduct the tests (Optimal Workshop, 2018). I thanked the participants and I had gained some great insights which helped me to refine and form my final information architecture. (see final IA on next page)
38
39
Final information architecture
Designing with UX honeycomb in mind Now that the information architecture was laid out the next phase for me was to design the interface by focusing on four UX honeycomb elements findability, usability, desirability and value.
Findability
I found it essential through my process to optimize the way to find relevant content for the user with less frustration and effort. This is how the current navigation look like. Through my usability test one of the participants didn’t find the navigation likable and said its categories were confusing (see transcribed usability test on participant #2 appendix 2.2).
This is an example of a submenu that they currently have. Another participant said that the submenu blended with the background. And he never paid attention to it (see transcribed usability test on participant #3 appendix 2.2). And another thing is that the submenu changes its navigation links which makes it more confusing for the user.
41
This is the new improved navigation structure. I have focused on information foraging . Where I made sure to make descriptive links and categories that would strengthen the user’s scent (Zieba, Cao and Ellis, 2015, p.63). Going for five navigation link items to only three items will help my personas to get what they want - for example Oline who wants to know more about what the school provides of educations.
Aarhus Academy has a lot of pages with information which makes it difficult for the user to find relevant content. The solution I camp up with was to create a mega menu since a drop-down menu was insufficient based on my tests. It allows me to make categories which in the end makes it less overwhelming for Jesper to find something about the social life at the Academy (Nielsen and Li, 2017). 42
And here’s a solution for the subpages navigation which changes every time you click on an item. This submenu uses the same concept as the main navigation. Arrows to indicate that there’s more subpages. No confusing submenu. And there's also a breadcrumb to reinforce findability and know exactly which page you’re on. (see all mockup appendix 6.1)
And again to reinforce findability and make cross-reference for users in case they missed out the first time (Zieba, Cao and Ellis, 2015, p.63).
43
Usability & desirability
By testing users to find information about Aarhus Academy’s social life or values on their current website. I found out that the site wasn’t usable. Since it took a lot of time to find it. Which also made the website less desirable.
I focused on the visual design to create a more usable and desirable experience. Dorthe from Aarhus Academy said that not many people knew about the 2-year STX that they offer. And you have to hover the red box to see that.
44
So I have created a visual hierarchy that uses good amount of white space (Zieba, Cao and Ellis, 2015, p.20). During my user test no one knew what GS stood for. Now its full name is displayed to make the journey more efficient (Zieba, Cao and Ellis, 2015, p.23).
One user participant lost interests all together because of the text format - too long, boring and doesn’t speak to them at their level. This is an example of their page welcoming new upcoming students.
45
Dorthe also said herself that the tone of the body copy was too conservative and it didn’t sound that inviting or welcoming (see notes from the meeting with Dorthe appendix 1.2).
This is a new visual expression and an example of a body copy of how the experience can feel more welcoming and less conservative in their tone of voice. And by using headlines to differentiate the different sections. It will make it more easier for the user to make an action.
46
Value
By combining findability for easier access. Usability and desirability for a more pleasing visual design, welcoming/inviting tone of voice and headings and CTA with purpose. It will increase the value of Aarhus Academy.
Here is an example of a body copy on the homepage. It displays the value of Aarhus Academy that speaks to the heart of the target-audience. Follow by CTA buttons that’s descriptive and increases the user’s scent to know more. Since my persona Jesper wants to know about HF. He can click on “see our educations”. Or if he wants a sneak peek about the school. He can click on “a glimpse of the school life”.
47
SubConclusion
By conducting card sorting before designing. It helped me and the process of building a better and more efficient information architecture. That way the user will have it a lot easier to find what they need with a mega menu for example. Furthermore the four UX honeycomb model elements findability, usability, desirability and value influence the desired user experience that is going to satisfy my personas’ needs and lessening their frustrations. When they are interacting with the website.
Interaction 52 WordPress as a tool 52 Finding the right theme 53 Child theme creation 54 The folder structure & overview 55 Files & naming conventions 56 Plugin & usage of semantic markup 59 Sub-conclusion 51
WordPress as a tool
For building the website I used WordPress as part of the mandatory requirements. WordPress is an open-source software written in PHP and also known as a content management system (CMS). The benefits of WordPress is that it has an ocean of plugins and themes at your disposal to help you build the site that you want (iThemes, 2015). If you have a strong knowledge of PHP you can even build your website from scratch.
Finding the right theme
Since I wanted to build a good product where I have a lot of options for customization and to ultimately minimize time consumption I went with a bought theme called Jevelin (Jevelin, 2018). The theme had some essential features that I needed such as mega menu, theme settings for customization and a website builder.
52
Child theme creation
Especially a theme as big as Jevelin which has many features and files under it. If I were to make some changes to the parent theme that could potentially cause some problems for me. And here’s where my child theme comes to play. It's the safest way for me to make customization without hurting the parent theme which would hurt me in the end.
53
The folder structure and overview
When it came to my folder structure I was only concern with two folders in my wp-content folder. The theme folder where I placed my child-theme. And the plugin folder where my custom plugin is placed.
Within my child-theme folder I have placed a css folder where I have a stylesheet for my fonts. And a fonts folder where it contains my custom fonts. Within my custom plugin folder I have placed a css folder where there’s a stylesheet for the plugin, and a stylesheet for hover effects that I got from the internet.
54
Files & naming conventions
Since I like to have a nice overview of my files. It was important to give names for my folders and files that were unique, but also descriptive. In that way I wouldn’t be confused of what each files/ folder mean or do.
Descriptive names Lowercase + no spaces
55
Plugin & usage of semantic markup
For this project I have created a custom-plugin called inforbar which alerts the user about the orientation evening at the Academy, and a CTA with a micro-interaction that directs to a page for more info.
Here we see the code that’s behind the infobar. It’s written in PHP and has also some HTML markups and semantic tag like section.
56
It’s all good writing the function to display the content, but without the add_shortcode function. It’s basically useless. They depend on each other. So there need to be that function plus two rules for it to work. Here’s also an example of how I apply comments on my code. That way I will know or another person will know what this line of code is all about.
Here I have registered and bound my two stylesheets for the plugin - hover.css and style.css.
57
Again without the add_action function the two stylesheets won’t be displayed. And again I’m using comments for better readability.
To show that my enqueued stylesheets are in full gear.
58
Sub-conclusion Since Aarhus Academy writes about the orientation evening many places on their website. It’s written between junks of text. Which makes it hard for the user to notice it. The infobar plugin was a great replacement for that. It’s more noticable for the eye, and has a CTA button for more info with a quirky micro interaction. During the process of building the digital product. I got more and more surprised of how important a child theme really is. It saves you the trouble. I have used it to create my secondary navigation at the top, copyright section at the footer, and the contact info with a Google Map and a shortcut to the new student page. I didn’t fully develop the whole website due to time constraints. So I only managed to finish the homepage completely. Also due to Facebook’s new policy I needed to have an APP ID from a Facebook page. Since I’m not an admin at Aarhus Academy’s Facebook page I couldn’t display their Facebook feed on my product.
60
Time's up 62 Budget & estimation 64 Conclusion
61
Budget & estimation
During the whole process I used the online tool Trello to organize all of my tasks by splitting them into weeks. I created two Trellos - one for daily tasks and one for SCRUM. By using Agile SCRUM for Trello boards I could estimate each board for both of my Trellos. And I used TrackingTime for tracking the actual consumption of time. I have splitted them into two groups - prework and design & development. The total estimation of the prework minus the report was 21 hours, and the actual time consumption was 17,5 hours in total. The total price is 6,973 DKK. The total estimation of design & development was 30 hours, and the actual time consumption was 20,4 hours in total. The total price is 7,004 DKK. So the total price for the whole project is 13,977 DKK.
(Trello board for daily task)
(Trello board for SCRUM)
Conclusion
Based on my qualitative research such as the usability test on the target-audience. It was confirmed that the website had some issues and didn’t provide the desired user experience the user wanted. By improving the information architecture the user will find the content they need with less effort and frustration. And by providing a new visual design with good use of white space, better hierarchy, quirky micro interactions and a more inviting tone of voice with regards to the body copy. The user will find the content they want more easily. Which makes the website more usable and desirable - and in the end creates more value for Aarhus Academy.
Bibliography Aarhus Akademi, 2018. Om os. [online] available at: https:// aarhusakademi.dk/om-os/ [Accessed: 04.12.2018] Aarhus HF & VUC, 2018. [online] available at: https://aarhushfogvuc.dk [Accessed: 9.12.2018] Babich, N, 2017. Putting Personas to Work in UX Design: What They Are and Why They’re Important. [online] available at: https://theblog. adobe.com/putting-personas-to-work-in-ux-design-what-they-areand-why-theyre-important/ [Accessed: 07.12.2018] Gentofte Studenterkursus, 2018. [online] available at: https://gsk.dk/ [Accessed: 07.12.2018] iThemes, 2015. Getting Started with WordPress. [pdf] iThemes Media. Available at: https://ithemes.com/wp-content/uploads/ downloads/2015/10/getting-started-with-WordPress-ebook.pdf [Accessed: 11.12.2018] Jevelin, 2018. [online] available at: https://jevelin.shufflehound.com/ hello/ [Accessed: 11.12.2018] Mklarsen, 2018. [online] available at: http://mklarsen.dk/aarhus/ New%20Aarhus%20Web/show/AA/index.html [Accessed: 12.12. 2018]
66
Nielsen, J. Li, A. 2017 [online] available at: https://www.nngroup.com/ articles/mega-menus-work-well/ [Accessed: 14.12.2018] Optimal Workshop, 2018. [online] available at: http://optimalworkshop. com/ [Accessed: 6.12.2018 ] Unsplash, 2018. Run a usability test photo by David Travis [online] available at: https://unsplash.com/photos/WC6MJ0kRzGw [Accessed: 12.12.2018] Unsplash, 2018. UX | UI photo by Alvaro Reyes [online] available at: https://unsplash.com/photos/qWwpHwip31M [Accessed: 16.12.2018] Varde Gymnasium, 2018. [online] available at: https:// vardegymnasium.dk/forside/ [Accessed: 9.19.2018] Zieba, K. Cao, J. Ellis, M, 2015. The Elements of Successful UX Design. [pdf] UXPin Inc. Available at: https://www.uxpin.com/studio/ ebooks/ux-design-successful-elements-for-products/ [Accessed: 06.12.2018]
67
Appendix materials
Appendix overview Appendix 1 Appendix 1.1 mail from Dorthe Abildhauge Appendix 1.2 notes from the meeting with Dorthe Abildhauge Appendix 1.3 second mail from Dorthe Abildhauge
Appendix 2 Appendix 2.1 transcribed usability test on participant #1 (S) Appendix 2.2 transcribed usability test on participant #2 (F) Appendix 2.3 transcribed usability test on participant #3 (H)
Appendix 3 Appendix 3.1 survey
Appendix 4 Appendix 4.1 top three usability problems
Appendix 5 Appendix 5.1 the result matrix
Appendix 6 Appendix 6.1 high-fidelity mockups
70
Appendix 1.1 Mail from Dorthe Abildhauge
"Hej Andreas og Sharmarke Hvis I sender til min private mail, er jeg tilgængelig i løbet af ugen også. Men jeg ikke love, at jeg læser/besvarer mails hver dag (med mindre vi har lavet en særlig aftale om det). Vores hjemmesides målgruppe er kommende elver på Århus Akademi. De er i aldersgruppen 16-23 år. Så den yngre del af denne gruppe kan I bl.a. finde i 9.-10.klasse :) Venlig hilsen Dorthe Abildhauge"
71
Appendix 1.2 Notes from the meeting with Dorthe
• Dorthe har ikke oplevet eller hørt omkring folk ringe/kontakte ift. problemer med websitet. • De fik lavet websitet tilbage i 2016 af et bureau ved navn Peytz & Co. • Der er ikke sket voldsomt mange ændringer siden da. • Dorthe nævnte at siden er henvendt til kommende elever. • Dorthe spurgte bureauet omkring video på toppen. Hun blev fortalt det vil gøre siden tungere og langsommere. • De spiller meget på deres HF. De er landets største HF. De har 2 STX klasse på nuværende tidspunkt. • Ikke mange er opmærksomme omkring deres 2-årige STX ifølge Dorthe. • De er blandt 6 andre, der tilbyder 2-årige STX. • Dorthe fortælle os at der er plads til at være sig selv. Mangfoldighed, rummelighed og diversitet. • Dorthe havde et ønske om at gøre deres brochure mere digitalt, hvor man kunne bladre i. • Dorthe mente teksterne var ret gammeldags (for konservative). Det var ikke indbydende og ret kedeligt. • Dorthe så gerne at der kom det sociale på hjemmesiden.
72
Appendix 1.3 Second mail from Dorthe Abildhauge
"Hej Andreas og Sharmarke Elevernes fysiske sted, hvor de kommer fra kan vi ikke give jer, men 50% af vores elever er fra andre gymnasier/uddannelser, de er droppet ud af. Jeg har vedhæftet et udklip fra vores kommende nye brochure for HF-elever, hvor der står noget mere om elevernes baggrund og alderen her på skolen. Venlig hilsen Dorthe Abildhauge"
(Vedhæftet udklipning)
73
Appendix 2.1 transcribed usability test on participant #1 (S)
Mig: i første omgang… tag dig et kig på siden, og du må ikke klikke på noget nu. Men du må gerne scrolle igennem, og fortæl mig gerne hvad du tænker imens. Mig: Hvad er det du lægger mærke til? S: Er der står HF, STX, GS. Det er det jeg lægger mærke til. Mig: Hvad lægger du mærke til ellers? S: I don't know. Hvad skal jeg lægge mærke til?... Der er et søgefelt. Hvad skal jeg ellers sige? Jeg lægger mærke til de personer, der går på skolen (et billede), hvornår den blev grundlagt, der går ca 700 elever lagde jeg mærke til. Der er noget omkring Letbanen. Mig: Er der ellers noget mere? S: Ja. Du bliver student efter 400 skoledage. Mig: Ja. Ellers mere der falder dig? S: Ja. Lad mig se…. Noget med optagelse, studieretninger. Man kan se noget om brobygning og økonomi. Der er og så noget om om dem (Akademiet). Mig: Hvis du var overladt til dig selv. Helt alene. Uden nogen former for hjælp. Hvad er det første du vil klikke på? S: Lad mig lige se... Måske nogle af de her (Uddannelserne)... Skal jeg vælge en eller hvad? Mig: Nej. Hvem tror du at hjemmesiden tilhører? S: Skolen Mig: Hvad hedder de? S: Aarhus Akademi Mig: Går lige tilbage til forsiden S: Okay (continues on next page)
74
S: hvordan den her ungdomsuddannelse fungerer. Hvornår du møder op… tror jeg. Og hvor lang tid du skal gå der. Og… jeg tror hvad du skal gøre for at komme ind på den her skole. Mig: Hvis du skulle gætte... Hvem tror du hjemmesiden er for? S: For de unge Mig: Okay. Er der mere du kan sige til det? S: Nej. Mig: Jeg vil give dig nogle små opgaver. så den første opgave jeg vil give til dig er at søge noget omkring SU. S: Huh? Mig: Informationer omkring SU S: Hvor fanden skal jeg søge det henne? Står det der? Mig: Hvad tænker du? S: At det er ind under “Din Økonomi” tænker jeg… Er det ikke det? S: Det står jo her... Nej nej der står hvor meget du skal betale for at starte på skolen. Mig: Hvad tænker du? S: Hvad mener du med, hvad jeg tænker? Mig: Altså Hvad er det du tænker på lige nu? eller hvad er du i gang med at lave? S: Jeg søger efter, hvor jeg kan finde noget om det der. Mig: Finde hvad? Mig: Opgaven var at finde informationer omkring SU.
(continues on next page)
75
Mig: Hvad hvis jeg sagde at du ikke måtte bruge søgefeltet? S: Jamen står det ikke her (side: studievejledning)? S: “studievejledning”... Hvad fanden er det her? Mig: Hvad tænker du lige nu? S: I don't know. Jeg ved ikke, hvor det er henne. Mig: Hvad er det du laver nu? S: Jeg kigger rundt. Hvad er det for noget svært noget! Hvordan skulle jeg finde noget om SU? Det står jo ikke engang her! Hvor er det jeg kan finde det? Mig: Okay. Vil du prøve med søgefeltet? Prøv at finde det med søgefeltet. S: (Prøve med søgefeltet). Nåå... Det er med stort. Mig: Hvad laver du, og hvad tænker du på? S: At det er lidt svært. Hvordan er det man staver til SU? Mig: Du har stavet det rigtig. S: Man kan jo ikke finde det. Hvad er det for noget svært noget! Der står jo intet omkring det! Mig: Okay. Lad os springe videre til den næste opgave. S: Jeg tror det er i økonomi! Mig: Vil du stadig gerne lede efter den? S: Det er jo i økonomi. Det er det eneste sted, den kan være! Mig: Lad os gå til næste opgave, okay? Kan du finde for mig en side omkring skolens værdier? S: Den er lidt for svært… Er den ikke her (side: persondata) data om skolen?
(continues on next page)
76
Mig: Hvad laver du? Hvad er du inde på? S: Er det ikke her inde (side: værdigrundlag)? Mig: Tænker du det? S: Ja. Det er herinde. Jeg er 100% sikker! Mig: Så kommer vi til den sidste opgave. Hvis du skulle søge ind på Akademiet. Hvad har du brug for at vide? S: Hvilke jobmuligheder er der efter, hvor meget tjener jeg i SU. Hvad er det jeg lærer, altså hvilke fag har jeg, hvor mange timer om dagen går jeg og hvad for nogle aktiviteter er der? Mig: Nu har du nævnt aktiviteter, fag og timer. Du har også nævnt noget om SU, hvilket var svært for dig at finde noget om. Og noget omkring jobmuligheder. S: Ja. Mig: Hvis du skulle finde noget omkring de fag og studieretninger. Hvordan vil du finde det? S: Jeg vil gå ind på studievejledning tror jeg… Er det ikke her inde? Der står ikke noget om fag her. Mig: Hvad er det du laver? Mig: Hvad var opgaven? S: Finde hvad for nogle fag man har? Var det ikke det? Mig: Jo. Og hvad tænker du? S: Hvor jeg egentlig kan finde det henne… Er det ikke der (side: studievejledning) S: Skal jeg læse det her? Det er hårdt! Hvornår er vi done? Mig: Okay. Vi er færdige med opgaverne. Du har haft det svært i forhold til opgave 1 omkring SU. Du har haft svært i forhold til at finde noget omkring studieretninger og fag.
(continues on next page)
77
S: I don't know. Der står ikke noget omkring studieretninger. Mig: På nogen af dem? S: (mens jeg musser langsomt på navigationen)... Den står jo lige her! Mig: Så nu hvor du har set den. Hvorfor var det så svært før? S: Fordi jeg ikke trykkede på HF eller de andre. Det er ikke så svært alligevel. Mig: Nej nej det første du sagde i starten gælder stadig. Der er nok en god grund til det. At du ikke kunne finde det i første omgang. S: Nej. Det var mig der var helt væk. Mig: Jeg har sagt til dig. Hvis der er noget galt... Så det produktet, altså hjemmeside og ikke dig. Hvis du går frem og tilbage…Og ikke kan finde det du søger efter så er du ikke skyld i det. Det er ikke dig jeg tester. Det er hjemmesiden. Så alt det du siger, er der intet fejl i. Mig: Og så var der noget omkring SU (musser hen over venstre side). S: Det står lige her (inde på Din Økonomi), altså SU. Mig: Hvornår opdagede du det? S: For længst Mig: Hvorfor gik du så frem og tilbage? S: Jeg laver bare sjov med dig… Hvor kom den fra? Har den hele tiden været der? Man kan jo ikke se den så godt! Det ville være bedre, hvis den var på højre side. Mig: Hov. Hvad skete der lige der? S: Den gad ikke (en knap på siden). Hvorfor? Mig: (tog lige musen fra ham og klikkede på teksten) S: Hvaaaad? Mig: Kan du se hvad jeg mente? Du er ikke skyld i noget der ikke fungerer. S: Så man skal kun trykke på teksten i midten, før at den virker? Det er et problem. Og jeg synes at den (sidebar) stadig skal flyttes på højre side. Så er den nemmere at opdage, fordi jeg har et dårligt venstre øje. Jeg lægger mere mærke til teksten. Jeg troede nemlig, at den stod i teksten. Mig: Så du forventede, at du allerede kunne se noget om SU med det samme? S: Ja Mig: Alright. Cool. Mange tak for din deltagelse og dine inputs. 78
Appendix 2.2 transcribed usability test on participant #2 (F)
Mig: Før du klikker på siden… Bare kig på den, og du må gerne scrolle igennem. Og så skal du fortælle mig, hvad der falder dig ind umiddelbart på siden. Hvad er det du lægger mærke til? F: Jeg lægger mærke til nogle farver og store bogstaver. Mig: Okay, er der ikke noget andet? F: noget Fakta. Et sted hvor man kan søge ind på det der akademi noget. Mig: Okay. Hvem tror du hjemmeside tilhører? F: Aarhus Akademi. Mig: Og hvad kan du på den her side, du befinder dig på? F: Du kan læse om stedet, og så kan du melde dig ind. Mig: Okay. Hvis du var overladt for dig selv uden nogen former for hjælp. Hvor vil du klikke først? F: Der hvor der er farver (Uddannelserne) eller videoen. Mig: Hvor vil du klikke først af de to? F: Videoen. Mig: Så lad os se. Mig: Hvad skete der der? F: Den gik ind på YouTube Mig: Okay. Hvis du skulle søge ind på Akademiet. Hvad har du brug for at vide? F: Hvor det ligger henne. Noget om SU. Om det er et godt sted. At maden er god, altså kantinen. Og at de har gode klasselokaler. Mig: Lad os gå til opgaven. Hvis du gerne vil finde nogle informationer omkring studiemiljøet på skolen. Hvordan vil du finde frem til det? F: Jeg vil nok søge.
(continues on next page) 79
Mig: Så lad os gøre det. F: Hvad var det du sagde, jeg skulle søge på? Mig: Omkring studiemiljøet på skolen. Mig: Hvad tænker du? F: Hvordan var det lige at man staver til det. Mig: Skal du have hjælp? F: Nej nej…. Studie hvad? Mig: Miljøet… Studiemiljøet. F: Se nu kommer der nogle forskellige artikler frem. Mig: Hvordan vil du finde det uden at bruge søgefeltet. F: Læse omkring det på startsiden. Mig: Så Hvad vil du gøre som de næste for at komme frem til det? F: Evaluering og kvalitet… Mig: Har du fundet det du vil finde? F: Hvad var det jeg skulle finde? Mig: informationer omkring miljøet på skolen. F: Altså er der et sted, hvor der står det?... Så studie- og ordensregler. Ja. sådan. Mig: Alright. Det næste opgave jeg vil have dig til er at finde noget brochure omkring STX. F: Hvad betyder det? Mig: En brochure er en slags folder. En folder hvor der normalt står informationer inden i. De kaldes også for en 3 siders folder. F: Okay. Jeg skal nok finde den.
(continues on next page)
80
Mig: Hvad er det du laver? F: Jeg har ingen anelse, hvad jeg laver… Jeg går ind på galleri, tror jeg det hedder. Jeg ved det ikke helt. Jeg forstår det ikke. Mig: Hvad forstår du ikke? F: Jeg tænker at jeg ikke helt forstår hvad du mener. Så forklar mig. Mig: Hvad med hvis jeg sagde til dig brug søgefeltet til at finde brochure omkring STX. F: Hvad var det du sagde? Mig: Brochure. F: Starter det med p eller b? Mig: B. F: Sådan her? Mig: Lad os se. F: “Din søgning gav ikke noget resultat” Mig: Brochure. Det er b-r-o-c-h. F: b-r-o-c-h (klikker flere gange på søgefeltet) Mig: Hvad er det du laver? F: Jeg prøver på at slette det. F: b-r-o-c-h-u-r-e.Sådan. Mig: Hvad er det du har tænkt dig at gøre nu? F: Gør hvad? Hvad mener du? Mig: Nu hvor du har søgt. Hvad er det næste du vil gøre? F: Jeg trykker på den første, fordi den ser spændende ud (studieretninger på stx).
(continues on next page)
81
Mig: Okay. F: Er det her en brochure? Mig: Hvad synes du? F: Der står alt for meget på siden. Mig: Hvordan vil du så finde frem til brochure omkring STX? F: Ved at trykke på den her knap... Hvorfor sker der ikke noget? Mig: Hvad tænker du? F: Jeg tænker på hvorfor knappen ikke gider at virke? Mig: Okay. Videre til det næste. Hvis du skulle finde noget omkring det sociale liv. Hvordan vil du så finde det? F: Jeg vil trykke først på din økonomi... Eller nej det tror jeg ikke. Måske Om Os. Hvad var det du sagde jeg skulle finde igen? Mig: Det sociale liv. Hvordan er livet på skolen? Hvis du skulle finde informationer som en ny elev? F: Går ind på værdigrundlag og læser lidt der)... Det har været Åben siden 1930… That’s mad. Mig: Så hvad er det du kigger på? F: Det ved jeg ikke. I don't know… Øhh hvad med Statistik? Mig: Hvad laver du? F: Prøver at finde noget af det du sagde. Mig: Hvad var det jeg sagde du skulle finde? Kan du huske hvad du skulle finde? F: Nej. Jeg har allerede glemt det nu. Var det ikke noget om det sociale? Mig: Ja. F: Altså hvordan skulle man finde? Altså er det herinde?
(continues on next page)
82
Mig: Kan du finde informationer omkring det? Det er det din opgave er. Mig: Hvad tænker du på nu? F: At det er så kedeligt... I don't know. Jeg tænker at jeg ikke kan finde det. Så Jeg tænker bare at vi burde stoppe. Mig: Okay. Så er vi færdig. så tager vi 3 minutter.Hvor jeg gerne vil stille dig nogle spørgsmål i forhold til hvad du har sagt. Mig: Du sagde, at det var kedeligt. Hvad er det der gør det kedeligt? F: At der står så meget tekst! Mig: Okay. Hvad var det andet du sagde i forhold, da du gik ind på STX siden. Hvad var det du sagde om den her side? F: At man ikke kunne trykke på knappen.Man skal trykke på det hårdt ihvertfald. Mig: Det er kun den tekst, du kan ramme. Hvis du rammer præcis, hvor der står download. F: Jeg synes, at det er lidt dumt, at man kun sætte linket på teksten. Jeg synes man skulle kunne trykke på det hele… Og så tænker jeg hvorfor skal der være det her billede på siden. Synes den er ligegyldigt. Mig: Okay. Du har nævnt i forhold til teksten, billederne og knapperne. F: Og igen at der står for meget tekst! Hvem gider også at sidde og læse alt det der? Det giver mig stress! Mig: Og omkring det sociale. Hvad tænkte du der da? Jeg stillede dig det spørgsmål omkring at du skulle finde noget informationer om det? F: At det ikke var overskueligt. Mig: Hvad var ikke overskueligt? F: At finde rundt i det her. Mig: Og hvad er det der gør, at det ikke er overskuelig?
(continues on next page)
83
F: De der kategorier. Mig: Kan du vise mig dem? F: Altså de her (peger på primær navigations menu)... Hvad var det du sagde, jeg skulle finde. Altså før? Mig: Om det sociale. F: Ja. Hvorfor står der altså ikke noget om det sociale her?.... Kan du se? Det står der ikke nogen steder (musser over menupunkterne).... Og Hvad fanden er GS?. Mig: Mange tak for din deltagelse til den her at bruge test. Jeg er virkelig taknemmelig for din feedback. Det er med til at hjælpe mig med at finde nogle forbedringer til hjemmesiden.
84
Appendix 2.3 transcribed usability test on participant #3 (H)
Mig: Kan du gå ind på hjemmesiden, og før du overhovedet klikke på noget. Tag dig et kig. Du må gerne scrolle, og fortæl mig hvad du tænker. H: Hvad jeg tænker? Altså hjemmesiden ser helt fint ud. Mig: Hvilket indtryk får du, når den først dukker op? H: Det indtryk jeg får af hjemmesiden.. Altså der er det, der skal være der. Der er ikke noget specielt i første øjekast… Altså der er ikke noget, der ser mærkelig ud. Mig: Okay. Hvis du var overladt til dig selv, hvor vil du klikke først… men inden du gør det. Hvilken side er du på? H: Altså hovedsiden. Mig: Ja. Hvem tror du, at hjemmesiden er henvend til? H: Hmm... studerende. Men jeg tænker ikke så meget de nuværende. Men mere dem, som har tænkt sig at starte på Aarhus Akademi. Mig: Alright. Hvis du var helt alene omkring at søge på hjemmesiden. Hvad vil være det første du klikker på? H: Jeg vil nok trykke på HF. Det er sådan det første, jeg tænker på. Mig: Hvad tænker du, eller hvad er du i gang med at gøre? H: Jeg kigger bare lige på det (stadig samme side). Der er lidt informationer… noget omkring brochure. Jeg tænker egentlig, at det er fint. Og så er der en lille statement med en fra en elev. Mig: Alright. Jeg vil give dig nogle opgaver. som du skal løse. Og det er 3 opgaver. Den første opgave er… Jeg vil gerne have at uden du bruger søgefeltet finde noget omkring skolens sociale miljø eller skoleliv. H: uden at bruge søgefeltet?... Ok... Kan du lige sige det igen? Mig: Find noget omkring skolens sociale liv eller samvær, altså finde informationer omkring det. Mig: Hvad tænker du på når du går igennem? H: (Tænker bare højt) Det er under her... a til z... sociale... Nej. (continues on next page) 85
Mig: Hvor er du på vej hen? eller hvad har du tænkt dig at gøre? H: Det ved jeg ikke helt… Lad mig lige gå tilbage igen (Til forsiden). Mig: Hvad tænker du? H: At jeg ikke lige ved hvor det er henne. Jeg kan ikke finde det nogen steder. Mig: Okay. Hvad har du tænkt dig at gøre som det næste? H: Måske prøve Studie- og Ordensregler. Mig: Hvad tænker du? H: Det er sgu lidt svært. Mig: Hvad føler du? H: At jeg er lidt lost. Mig: Hvad er den næste handling du har tænkt dig at gøre for at komme derhen? Mig: Okay. Vi stopper den første opgave. Du kunne ikke finde det du skulle søge efter. Den anden opgave for dig er - hvorhenne du kan søge noget omkring SU. H: Søge noget omkring SU? Mig: Ja H: Kommende elever. Så vil jeg går her ind ihvertfald. Mig: Okay. H: Deltagerbetaling.. Og så her (scroller ned). Mig: Okay. H: Der er informationer omkring det. Mig: Hvad vil du så gøre som det næste? H: Så vil jeg nok gøre det der bliver sagt… Altså det der står på teksten.
(continues on next page)
86
Mig: Okay. Den sidste opgave er at finde noget omkring skolens værdier. H: Skolens værdier? Mig: Ja. H: Jeg tænker nok herinde… Skolen A til Z... Sådan (Bliver lidt usikker her). Mig: Nå. Hvad tænker du her? H: Evaluering kvalitet?... ænker jeg har fundet den. Mig: Tænker du det? H: Ja Mig: Hvordan kan du se det? H: Hmm... Enten det eller den anden side jeg var inde på. Mig: Hvilken? H: Skolen A til Z Mig: Okay. Er det det? Føler du, at du har fundet stedet? H: Ja. Det føler jeg. Mig: Okay. Det var den sidste øvelse. Mig: Skolens værdier lå på nummer 2 (som undermenupunkt). H: Nummer 2… Værdigrundlag… Aaarh! selvfølgelig! Mig: Var det svært at få øje på det? H: Det var ikke noget, jeg lagde mærke til i hvert fald. Eller måske har jeg bare overset det. Mig: Alright. I forhold til hvad? Hvordan overset den? H: Jeg tænkte bare at gå ind her og trykke her (Skolen A til Z) og ikke tænke så meget bagefter. Men sjovt nok lagde jeg ikke mærke til den.
(continues on next page)
87
Mig: Hvad laver du ikke mærke til? H: Selve den her menu her (på en specifik side). Mig: Okay. Hvad var det for dig? H: Baggrund… En farve altså. Mig: Ja. Alright. Cool. That's it. H: Tror du det. Har du ellers noget andet? Mig: Ja faktisk. Nu hvor du nævner det. Kan du finde, hvor man søger optagelse omkring SU. H: Er det ikke det her du mente? Mig: Jo. Sorry. Jeg mente optagelse til selve skolen. Find en side omkring det. H: Her er det. Ansøgning om optagelse. Mig: Ja. Hvad tænker du? H: Altså, det helt fint. Der er ikke nogen speciel her. Mig: Hvad er det næste du vil gøre? H: Det næste jeg vil gøre. Hvis jeg nu skulle søge ind… på optagelse.dk… Gør det som jeg skal og ansøge til skolen. Og så er det det. Mig: Hvordan? H: Igennem optagelse.dk… Igennem det her link her Mig: Alright. H: Eller den her (knap) for den sags skyld… Det er egentlig lidt ligegyldigt. Mig: Du sagde du havde to handlingsmåder… Lad mig se den anden H: (Klikker på et link) Huh.. nåå.. Sjovt. Mig: Hvad tænker du?
(continues on next page)
88
H: Jeg havde ikke forventet, at den her side vil poppe frem. Mig: Hvad forventede du? H: Optagelse.dk Mig: Okay. Alright. That's it. Så er vi færdige. H: Det lyder godt. Mig: tusind tak for din deltagelse og for at bruge tid på at være med til den her brugertest. H: Det var så lidt.
89
Appendix 3.1 Survey
(continues on next page)
90
(continues on next page)
91
(continues on next page) 92
(continues on next page) 93
94
95
Appendix 4.1 Appendix 4.1 top three usability problems
Participant #1 (S) 1. Couldn’t find anything about SU → the sidebar confused him and didn’t even noticed and even the text 2. Hard time finding information about subjects → got frustrated in the end after several clicks (5 clicks) 3. Had trouble with clicking the buttons “Seek SU” for example
Participant #2 (F) 1. Stressed about too much text on pages → made her forget the task she was suppose to do 2. Couldn’t find anything about the social life at the Aarhus Academy → several clicks → got bored and yawned (4 clicks) 3. Didn’t find the main-navigation likeable → the categories didn’t have what she was searching for
Participant #3 (H) 1. Couldn’t click on a button on the first & second try 2. Had a hard time to find the academy’s value on the website → didn’t noticed the submenu → blended with the background 3. irritated that he has to go through about us → to gallery to find something about the school life
96
Appendix 5.1 Appendix 5.1 the result matrix
97
Appendix 6.1
Home-page
Appendix 6.1 high-fidelity mockups
98
99
Home-page with infobar
100
New student page
101
Practical information page
102
Educations page
103
Educations page with sub-menu open
Sharmarke Hujale | Advanced User Experience, autumn 2018