Case purpose
Redesigning UX Danmark's website
September 2024
Self-initiated case
UX Danmark is a non-profit organisation founded in 1999 and based on volunteer work. As someone who aspires to work within UX and is trying to gain more experience, network, and knowledge, I came across UX Danmark's website. There, I discovered that I could become a member to gain benefits in terms of, for instance, networking and the possibility of being a volunteer worker to assist with various tasks and, in return, gain more practical experience. What is not to love about that? It is a great initiative and idea behind this organisation, as the UX field is challenging to get through in terms of job positions with little experience.
Lack of engagement, trustworthiness and personality
However, based on my first impression of their website, I did not feel convinced of their service based on the lack of knowledge they provide and did not feel engaged since the website is missing personality. I also do not trust the information due to the lack of examples, images, and storytelling. I think it is a shame since I really appreciate the fact that there is a community in Denmark among UX'ers. I just could not let go of my impression of their website without at least attempting to come up with some solution to solve this problem.
Desk research
At first glance, I thought the organisation was no longer active, which made me hold back on becoming a member. The last time they posted on their Facebook page was in 2021. Their front page states that they arrange events, the biggest of which was UX Camp CPH, which took place in May 2023. The signs that tell me they are active are on their event page, where they presented the date for the ordinary general meeting for this year. Someone published a post on their LinkedIn page the same day I checked; however, it is not one of the board of directors, and I do not know if that person is a member or volunteer worker.
LinkedIn post from the 2nd. September 2024
Facebook post from 2021
Facebook mention from UX CAMP CPH in 2018
Who were they in the past?
It can be difficult to redesign a website for an organisation with little information, branding, or colour to indicate who they are and what they stand for. The information I found was that before changing its name to UX Danmark, it was once called SIGCHI, which stands for Special Interest Group on Human-Computer Interaction. That is quite a mouthful, and I think Morten Borup Harning and his team made a wise decision to change their name to something more memorable for the members. However, sigchi.dk is still live, but it is a passive website, which increases cognitive load and confuses me, who wants to get information about the company to decide if I want to join.
Previous name and website
Use of colour
In the past, they clearly played around with colour to try to decide on their brand image, and which colour to choose based on emotional connections they could create with colour psychology. Initially, they were red when they referred to themselves as SIGCHI. Red symbolizes passion and love but also anger. The bold colour is great for sparking attention but can also be too domineering and annoying for the eye. Perhaps that is why they later dappled in the colour green, which is associated with nature, and some studies have shown that the colour can reduce stress. Ultimately, they decided on white, ensuring simplicity and minimalism, which is becoming increasingly trendy among websites and logos.
Logo evolution from left to right
Analysing website
Too minimalistic
I know Denmark's UX expert, Jakob Nielsen, would say a website should be minimalistic. Too much clutter and detail might confuse users in terms of navigation and information gathering. However, too few details, use of colour palettes, and content make the website seem empty and inactive. Below, you see a screenshot of the front page. While I use a big widescreen, it does not excuse how little space they have utilized for the menu bar and content displayed here.
Front page in full screen
No need for drop-down menu
Usually, it can increase usability and wayfinding when adding a drop-down menu and while I can see a purpose for the page "Bestyrelsen", meaning board directors, In Danish and "Vedtægter" which are regulations as subpages, why "Address"? The perks of having multiple pages are that Google has pages to index and also has the possibility to divide content so one page isn't too cramped. However, it seems unnecessary to have a whole page for the address only, as seen here: https://uxdanmark.dk/address/
Menu
Overload of information when showcasing events
The first thing I noticed here was how wide the text description was and how annoying it was for the eye to read. The events are divided up by line break, and the font of the event name is bold to distance them, which is a way to increase readability. However, since it is just black text on a white background, it still looks like a block of text cramped onto the page.
Event page
Too many clicks
When I clicked on the "Read more" link of the previous event, UX Book Club Copenhagen, I was directed to another page with the same little information and an additional image of the book that would be the topic of discussion. This was followed by two links: one for the book club's main page and one for signing up for this specific book club event. Why so many clicks to sign up? Why not cut the middle man to make it easier and faster for visitors to sign up for this event?
Event subpage for each individual event
Event page
Event subpage
Event page of book club
Main page of book club
Event page navigation
Inspiration for redesign
The first page I created in Figma was a blank canvas to add images of websites I could use as an example. I just Googled, for instance, "calendar example for the website" to see how the event page could potentially look and then added it to my brainstorming board. I added an arrow because UX Danmark played with the idea of using arrows, as seen above.
Brainstorming board
Redesign of website
"Vi er røde, vi er hvide"
I have decided to design my prototype using the colours red and white for three reasons. One is the name "UX Danmark", and the national flag or "Dannebrog" consists of those two colours. The other reason is familiarity. It seems that for many years, the organisation has used red under the name SIGCHI, so by keeping the red colour, the organisation maintains a memorable brand and feel of the past. Lastly, adding an additional colour next to white creates contrast, makes the website less dull and adds some personality and life. Another colour added is grey, just to calm the eyes since red is very bold. Also, the text-based context could benefit from not being placed on a completely white background, as in #000000, since it makes it more calm for the website visitors to read. The faded background image is from one of the UX CAMP CPH events since UX Danmark collaborated with them over the years.
A footer creates a frame
I remember when taking a course in graphic facilitation that frames create constraints and keep the visitor's focus on the content inside. They also tell the visitor when the website's content and elements end. Finally, they allow adding address and contact information somewhere else but on a plain page. Finally, when conducting desk research, I had to scroll far down Google's search results to find their LinkedIn and Facebook pages. Now all that information is displayed on the footer.
Redesign of main page
Calendar display
This page was the most challenging task for me, as it was hard to decide on the best way to showcase the events. I ended up with a calendar, trying to cover usability objectives such as efficiency and memorability. Navigating a calendar can perhaps save a user time, making it more efficient. It serves memorability as it is easier to remember details due to visual implementations. Here, the idea is that when an event is added, the date will be filled out with the colour red, and when the user hovers their mouse over the red date, a bit of information appears in a pop-up box. The CTA button then takes the user to the external website to sign up for the event.
Redesign of event page
Present a current number of volunteers
On their website, I like the bullet points of suggestions for which tasks a volunteer worker can assist with, so I included that in this redesigned page. What I, as a potential volunteer and member, lacked information to convince me to sign up was examples of actual volunteer members and their experience. Therefore, I found some images via Unsplash and made up names and quotes to illustrate the personal way of showing the perks of being a UX volunteer. Also, I added a made-up number of how many current workers there are to add credibility and trustworthiness.
Redesign of "Become a volunteer" page
Utilizing space on the membership sign-up page
The text added on this redesigned page is the same as on the current page, but here, I just tried to divide the text into boxes and clearer headers to use the plain white canvas. Of course, I used the same colour patterns and the background image of the UX Camp CPH event for consistency. To present the membership price more clearly depending on whether the visitor is a student, it is placed on the background image and added to each content div box. The perk of adding a bold colour, such as red, is that the CTA button makes it clear. But there is no point in a bright-coloured button if most of the page is red, as seen in my first design of this page to the right side. So, I dimmed down the red by replacing some elements with the colours grey and black.
First stage of redesign of "Become a member" page with too much use of red of the colour red.
Redesign of "Become a member" page
Present yourselves
The three board of directors and the accountant could be presented more personally simply by adding a picture of themselves on the website. They are professionals in the world of UX and should present themselves more clearly with pride. Based on their current website, I know they care about having a page with regulations (vedtægter in Danish), and I made sure that there is a subpage for that information where the button leads visitors. Also, I mentioned in the top-left text that the organisation was once named SIGCHI. This is to add some background information and in case a former member or volunteer worker before 2015 perhaps wanted to rejoin.
Redesign of "About us" page
Methods and tools I used
Methods & theories
Desk research
​
Jakob's law
​
Colour psychology
​
Constraints
​
Information architecture
​
Cognitive science
​
Sense-making
​
Usability objectives
Design tools
Figma​
Flaticon​
Unsplash​
Colorzilla
Last final notes
This was my first attempt at creating a self-started case to practise some of the knowledge I gained throughout my studies. It was the first time I used Figma. While I still see improvements or changes that could be made to this redesign, my solution still showcases the importance of adding personality to the website, making it more welcoming for visitors and potential new members. Presenting examples of images, names, and quotes of volunteer workers adds to trustworthiness. This also goes by adding a current number of volunteers and members. Lastly, I want to point out that UX experts are not necessarily graphic designers. I do not expect UX Danmark's website to be visually appealing, as I need to practise myself now that I have a hang of the basis of Figma. I just think your organisation deserves a website that shows your great initiative in a more user-friendly, engaging, uplighting, and personal manner. I hope this case can serve as inspiration, and I welcome any feedback.