Discover
Ask students what they thought of the existing website.
DISK Student Union:
Website Redesign
for Student Information
A client project through Studio Hackspett, redesigning DISK student union's website to make student information easier to find, easier to scan, and easier to maintain across Swedish and English content.
Context
A student website that needed clearer entry points
DSV has around 5,000 enrolled students each semester, with around 1,000 new students arriving every year. Because of that, the DISK website needed to work especially well for first-time visitors who may not know what DISK is or where to begin.
CASE PROJECT
The project began with informal student feedback and moved into information architecture, Figma exploration, final visual direction, and implementation in the client's existing website stack.
Define
Synthesize recurring issues around awareness, structure, mobile, and language.
Explore
Create early and refined Figma directions for the homepage and pages.
Build
Implement the design with Elementor, supporting plugins, and custom PHP.
01. Lightweight discovery
Defining the problem through student feedback
Before redesigning the site, we did a lightweight discovery phase by asking students what they thought of the existing DISK website. The feedback was informal, but it revealed recurring usability issues.
Some students did not know the website existed, while others described it as hard to navigate, cramped on mobile, and inconsistent between Swedish and English.
Feedback synthesis
Recurring issues found in the existing website
Low awareness
Some students did not know DISK had a website.
Confusing structure
Information was hard to locate across pages and navigation.
Poor mobile experience
The site felt cramped and did not adapt well on smaller screens.
Language inconsistency
Swedish and English content was inconsistent across the site.
02. Ideation
Exploring the design in Figma
We explored different ways to make the content easier to scan and navigate. The early concepts focused on simplifying the structure and giving important student information more room on the page.
Early home page
First layout exploration for the main entry point.
Early page design
Testing how text-heavy student content could be structured.
03. Information architecture
Redesign decisions
The goal was to make the website easier to understand before users started reading in detail. We focused on clearer information hierarchy, more space around content, and layouts that worked better across screen sizes.
We reduced the site structure from 25 pages to 16 by merging overlapping content and grouping related information together. This made the navigation easier to scan, reduced the number of dropdown items on mobile, and created a structure that is easier to maintain in both Swedish and English.
Before / problem analysis
25 pages
The original structure exposed how much content had accumulated across categories, making the site harder to scan and maintain.
After / restructured information architecture
16 pages
The redesigned structure grouped related information together, reduced overlap, and made common student needs easier to find.
04. Content hierarchy
Structuring pages before styling them
Students should not need to read every paragraph to understand where they are or what to do next. The content hierarchy work focused on turning long, flat pages into sections that could be scanned quickly and maintained more consistently.
Dense page content
Long paragraphs, weak visual breaks, unclear next steps, and important links hidden inside body text.
Group by user intent
Related information was grouped into sections such as overview, practical details, actions, and supporting content.
Scannable content blocks
Pages used clearer headings, short introductions, cards, callouts, and visible actions for common student needs.
05. Refined design
Turning structure into a clearer homepage
After the early concepts and information architecture work, the homepage direction became more concrete. The refined design used larger content blocks, clearer entry points for new students, and repeated card patterns for sections.
06. Implementation tools
Build stack
The redesign also had to work within the tools used to build the website. We kept the stack focused around Elementor and used supporting plugins where they solved a clear problem.
Elementor made it possible to build polished pages in a way the client could continue working with after handoff. For the parts that needed more control than the visual editor could provide, I supported the implementation with custom PHP.
Elementor
Used as the base for page building and the visual structure.
ElementsKit
Added more flexible UI blocks and widgets to the build.
Ultimate Addons
Helped create reusable content sections across the site.
TranslatePress
Made it easier to manage Swedish and English content.
Custom PHP
Supported parts that needed more control than the visual editor provided.
07. Graphic profile
Translating an existing identity into a digital system
DISK already had an established graphic profile before the redesign. The goal was not to create a new visual identity, but to interpret, structure, and apply the existing profile in a more consistent, modern, and usable way for the web.
The visual identity already existed. The challenge was translating it into a consistent digital system while keeping DISK recognizable through color and typography.
DISK Gold
#DAA520
RGB 218, 165, 32
Primary / Brand
Buttons · Highlights · Accents
Black
#000000
RGB 0, 0, 0
Primary / Contrast
Headings · Navigation · Strong UI elements
Complementary Gold
#E0BD64
RGB 224, 189, 100
Supporting warmth for surfaces, accents, and visual rhythm.
Studentlivet börjar här.
Heading 01
Upptäck DISK
Heading 02
The typographic sizes were created as a web scale based on DISK's existing typefaces. This helped the redesign keep the original identity while improving hierarchy, contrast, spacing, and component consistency.
08. Final direction
A clearer theme and identity
The final pages needed to feel like they belonged to the same organization, even when the content changed. By applying DISK's existing colors and typefaces more consistently, the redesign could improve hierarchy, spacing, and component rhythm without replacing the original identity.
Cafe and service page
Operational information became easier to scan through larger headings and structured content blocks.
Membership page
Student benefits and calls to action were made clearer for first-time visitors.
Sections page
Section discovery was turned into a more visual, scannable entry point.
09. Content production
Photography as part of the website redesign
Studio Hackspett also produced visual material for the redesign. The photography helped the website feel connected to the actual DSV environment rather than relying only on generic or outdated imagery.
10. Outcome
Concrete design results
Reduced structure
The site structure went from 25 pages to 16 by merging overlapping content.
Clearer navigation
Navigation became easier to scan and more focused on common student needs.
Better mobile experience
Dropdowns, spacing, and page sections were redesigned for smaller screens.
Improved bilingual maintenance
The new structure made Swedish and English content easier to manage consistently.
More scannable pages
Text-heavy areas were broken into clearer sections and reusable patterns.
Stronger identity
Repeated visual patterns made the website feel more cohesive and trustworthy.
Reflection
Visit the DISK website
Content-heavy UX is mostly prioritization
This project showed how much of a redesign happens before the final visual layer. The biggest improvements came from deciding what information students needed first, what could be merged, and how the same structure could stay understandable across devices and languages.