Source: https://alfonsmelander.se/ [Alfons Melander](https://alfonsmelander.se/) [Contact](mailto:alfons@studiohackspett.se) Alfons Melander · UX Engineer & Front-end Developer # Building for human behavior I combine UX design, user research and front-end development to create websites and digital product concepts. [See my projects](https://alfonsmelander.se/disk-studentkar) ## Selected projects ![DISK studentkår logo](https://alfonsmelander.se/assets/DISK-logo-C_WcKXkZ.svg) ### DISK studentkår: Student union website Front End & UX • 2026 Wordpress • Elementor • PHP [Read more](https://alfonsmelander.se/disk-studentkar) ![DISK studentkår website mockup](https://alfonsmelander.se/assets/DISK-mac-BRtPCfls.png) ![Akademisk Kvart logo](https://alfonsmelander.se/assets/AK-logo-DCAecPHQ.svg) ### Akademisk Kvart: Housing platform for students UX Engineer • 2026 Next.js • Figma [Read more](https://alfonsmelander.se/akademisk-kvart) ![Akademisk Kvart website mockup](https://alfonsmelander.se/assets/AK-mac-B0phh_37.png) ![Studio Hackspett logo](https://alfonsmelander.se/assets/Hackspett_logo-CwnJWkhj.svg) ### Studio Hackspett: Brand website Front End • 2026 Next.js • Figma [Read more](https://alfonsmelander.se/studio-hackspett) ![Studio Hackspett website mockup](https://alfonsmelander.se/assets/HS-mac-CAWIOYUP.png) ## School projects ![GolfGo logo](https://alfonsmelander.se/assets/golfgoLogo-N8bi5eGg.svg) ### GolfGo: Digital golf caddie UX Designer • 2024 User-centered Design • Figma [Read more](https://alfonsmelander.se/golfgo) ![GolfGo app concept mockup](https://alfonsmelander.se/assets/golfgoMockup-21wVMEXk.png) ![TrackMe logo](https://alfonsmelander.se/assets/tmLogo-1124sN19.svg) ### TrackMe: Habits tracking app UX Designer • 2023 - 2024 Participatory Design • Figma [Read more](https://alfonsmelander.se/trackme) ![TrackMe app concept mockup](https://alfonsmelander.se/assets/tmMockup-C0_JDSQX.png) ## 3D renders A smaller part of my work, but still an important part of my visual craft. ![3D render 1](https://alfonsmelander.se/assets/Render1-GJP8oKZT.png) ![3D render 2](https://alfonsmelander.se/assets/Render2-CrkmfuNt.png) ![3D render 3](https://alfonsmelander.se/assets/Render3-BAcBCezO.png) Alfons Melander UX Designer · UX Engineer · Front-end Developer [alfons@studiohackspett.se](mailto:alfons@studiohackspett.se) [LinkedIn](https://linkedin.com/in/alfons-melander) © 2026 Alfons Melander --- Source: https://alfonsmelander.se/disk-studentkar # DISK studentkår · Case study by Alfons Melander ![DISK studentkar](https://alfonsmelander.se/assets/DISK-logo-C_WcKXkZ.svg) A redesign of a student union website. Role UX & Front-end Developer Timeline Jun 2026-Aug 2026 Team 2 people ![DISK studentkar mockup](https://alfonsmelander.se/assets/DISK-mockup-CRvE30Fp.png) Lightweight Discovery ## Defining the problem Before redesigning the site, I did a lightweight discovery phase by asking students what they thought of the existing DISK website. DSV has around 5,000 enrolled students each semester, with around 1,000 new students arriving every year. Because of that, the website needed to work especially well for first-time visitors who may not know what DISK is or where to begin. 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. ![DISK studentkar environment](https://alfonsmelander.se/assets/disk-photography-BGIgq-UP.png) Feedback synthesis ## Four issues to design around Student feedback ### Low awareness Some students did not know that DISK studentkår had a website. ### Confusing structure Students who had used the site found it difficult to understand where information lived. ### Poor mobile experience The existing website felt cramped and did not adapt well on smaller screens. ### Language inconsistency Swedish and English content was inconsistent, and some pages had no English version. Ideation ## Exploring the design 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](https://alfonsmelander.se/assets/DISK-early-concept-CtqSrEp2.png) ### Early Home Page ![Early page design](https://alfonsmelander.se/assets/DISK-early-foo-B190tkmd.png) ### Early page design ![Refined Direction](https://alfonsmelander.se/assets/DISK-refined-Czv9BIb_.png) ### Refined Direction 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. Clearer page hierarchy More breathing room in text-heavy sections Responsive layouts for smaller screens Navigation focused on common student needs ![DISK studentkar page structure before redesign](https://alfonsmelander.se/assets/DISK-pages-wiRdzxD7.png) Before ![DISK studentkar page structure after redesign](https://alfonsmelander.se/assets/DISK-pages-after-Cqup45Gw.png) After Implementation tools ## Build stack ElementorPHP 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 icon](https://alfonsmelander.se/assets/Elementor-Du3LcT-5.png) ### [Elementor](https://elementor.com/) Used as the base for page building and the visual structure. ![ElementsKit icon](https://alfonsmelander.se/assets/Elemenskit-ClK5D7DQ.png) ### [ElementsKit](https://wordpress.org/plugins/elementskit-lite/) Added more flexible UI blocks and widgets to the build. ![Ultimate Addons icon](https://alfonsmelander.se/assets/Ultimateadd-DSR-LXnv.png) ### [Ultimate Addons](https://wordpress.org/plugins/header-footer-elementor/) Helped create reusable content sections across the site. ![TranslatePress icon](https://alfonsmelander.se/assets/Translate-BdBhvz2r.png) ### [TranslatePress](https://translatepress.com/) Made it easier to manage Swedish and English content. 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. I used consistent spacing, repeated section patterns and a more unified visual direction to make the website feel easier to recognize and trust. ![DISK Traditions page](https://alfonsmelander.se/assets/Traditions-CSINFSA3.png) ### Traditions ![DISK Sections page](https://alfonsmelander.se/assets/sections-CHf9F98K.png) ### Sections ![DISK Contact page](https://alfonsmelander.se/assets/contact-CSJJJcZD.png) ### Contact ## View the live website The redesigned DISK website is live and maintained by the student union. [Visit DISK](https://disk.su.se/) [Next project](https://alfonsmelander.se/akademisk-kvart) Alfons Melander UX Designer · UX Engineer · Front-end Developer [alfons@studiohackspett.se](mailto:alfons@studiohackspett.se) [LinkedIn](https://linkedin.com/in/alfons-melander) © 2026 Alfons Melander --- Source: https://alfonsmelander.se/akademisk-kvart # Akademisk Kvart · Case study by Alfons Melander ![Akademisk Kvart](https://alfonsmelander.se/assets/AK-logo-DCAecPHQ.svg) A subletting platform for students seeking housing in Stockholm. Role UX Engineer Timeline Feb 2026 – Jun 2026 Team 5 people ![Akademisk Kvart mockup](https://alfonsmelander.se/assets/ak-hero-mockup-CPn-TFQz.png) Hero on mobile ## Data-driven redesign User surveyNext.jsFigma While working on the site, I noticed I often skipped past the hero when testing, but it was always something needing to be fixed. Since the hero is the first thing users see, I wanted to improve it. On mobile, the buttons felt too small, and the large number of filters made the experience feel cluttered. I realized the problem was not only the number of filters, but also a mismatch between user needs and the available listings. The filters suggested more options than actually existed, which often led to zero search results and a frustrating dead end. To validate what mattered most, I surveyed 23 students and found that max rent and area were the top priorities. Based on that, I redesigned the hero and implemented it in Next.js. What are the most important metrics when searching for housing? Max rent 21 Area 14 Size 9 Contract 7 Rooms 6 Move-in date 4 ![Before](https://alfonsmelander.se/assets/hs-mobile-before-CBBN6FwR.png) Before ![After](https://alfonsmelander.se/assets/hs-mobile-after-C8oZccZ0.png) After Reduced 4 filters to 2 key filters Increased button size for clearer mobile tap targets Improved padding to make the hero feel less cramped 4 filters→2 key filters Small buttons→larger tap targets Tight layout→clearer spacing Second improvement ## Easier forms FigmaPrototyping After improving the mobile hero, I worked on the ad creation flow. The platform depends on landlords creating listings, so the form needed to feel clear, predictable and quicker to complete. 1. Flow design ### Introducing a wizard The first issue was how the user had no idea how long the process is. A common solution is to introduce a wizard. Users handle complexity better in chunks than all at once. A wizard also gives the ability for the user to go back to each stage, which helps error prevention. ![Wizard preview](https://alfonsmelander.se/assets/ak-progressbar-7GQe_8F-.svg) 2. Validation ### Dot-voting & Structured design critique I made three different designs solving the perceived problem. I then asked the team what version they thought solved the problem. I introduced dot-voting, which gives every team member 3 votes each to place on the preferred version. Then they critiqued the design they liked most, and I used that to shape the final design. ![Dot-voting board](https://alfonsmelander.se/assets/easier-forms-dot-voting-board-z_-ru-ad.png) 3. Simplification ### Going from 12 to 7 steps Reducing the number of steps in the process removes friction. Introducing a wizard does not work well with 12 steps because it interferes with the flow and becomes fragmented. Reducing the flow down to 7 steps creates a clearer and faster experience for the user. ![Before stack](https://alfonsmelander.se/assets/ak-form-before-DsCRCslZ.png) Before ![After stack](https://alfonsmelander.se/assets/ak-form-after-BgtsnqNt.png) After Third improvement ## Landing page restructure Next.jsFigma 1. Implementation ### News section I implemented a Next.js server-side component connected to AWS for the landing page. The section itself was designed by Isabelle Franzen, and I integrated it into the site. ![News section on the landing page](https://alfonsmelander.se/assets/ak-landing-news-section-C8OAbR_v.png) 2. Value proposition ### Why Akademisk Kvart? This section clarifies the platform's value proposition for students and explains why someone should choose Akademisk Kvart. It highlights that the service is free, easy to use, and run by students. I also built this as a Next.js component and integrated it into the landing page. ![Why Akademisk Kvart section](https://alfonsmelander.se/assets/ak-landing-why-ak-D3b1ACcr.png) 3. Navigation ### General information This section helps visitors find key pages more easily. I designed it as a quick-link area that guides users to important pages across the website. ![General information section](https://alfonsmelander.se/assets/ak-landing-general-information-BoNtTlRF.png) 4. Polish ### Improved footer I made small design and implementation updates to the footer. The previous version had cramped links and no social media links, which made the area feel unfinished. I increased the padding, added social links, and improved the small contact form to make the footer clearer and more useful. ![Footer before redesign](https://alfonsmelander.se/assets/ak-landing-footer-before-Cw5OT3MK.png) Before ![Footer after redesign](https://alfonsmelander.se/assets/ak-landing-footer-after-DTsU74ce.png) After ## View the live website Akademisk Kvart is live and continues to support students looking for housing in Stockholm. [Visit Akademisk Kvart](https://www.akademiskkvart.se/sv) [Next project](https://alfonsmelander.se/studio-hackspett) Alfons Melander UX Designer · UX Engineer · Front-end Developer [alfons@studiohackspett.se](mailto:alfons@studiohackspett.se) [LinkedIn](https://linkedin.com/in/alfons-melander) © 2026 Alfons Melander --- Source: https://alfonsmelander.se/studio-hackspett # Studio Hackspett · Case study by Alfons Melander ![Studio Hackspett](https://alfonsmelander.se/assets/Hackspett_logo-CwnJWkhj.svg) A modern website for my company that provides web services to businesses. Role UX Designer · Front-end Developer Timeline Feb 2026-Mar 2026 Team 2 people ![Studio Hackspett mockup](https://alfonsmelander.se/assets/hs-hero-mockup-Byv5hMux.png) Problem & Goal ## Building from scratch This was not a redesign but a complete development from scratch. We had to research our target demographic, people who need help with their website or need a website of their own. The goal was to create a brand website that felt modern, trustworthy and clear, while also being flexible enough to grow with the business. ![Research and planning](https://alfonsmelander.se/assets/hs-research-vDz0nkBs.jpg) Ideation ## Exploring the design Figma We experimented with various layouts and directions to find the right design for our users and business goals. ![Early Concepts](https://alfonsmelander.se/assets/hs-concept-iEqqb9L2.jpg) ### Early Concepts ![Visual Direction](https://alfonsmelander.se/assets/hs-direction-DYVuNu8z.jpg) ### Visual Direction ![Getting more refined..](https://alfonsmelander.se/assets/hs-refined-ZYd0MAd0.jpg) ### Getting more refined.. Implementation ## From design to code HTMLCSSJavaScript When we had all the Figma files for every page of the website we started to code. This project involved coding in basic HTML, CSS and JavaScript. ![Implementation and code](https://alfonsmelander.se/assets/hs-code-Dxvcvik2.jpg) Framework migration ## Converted to Next.js Next.js After the first version was built with HTML, CSS and JavaScript, we converted the website into a Next.js framework. The goal was to keep the same visual design while making the project easier to scale, update and maintain. The work involved restructuring the static code into reusable React components, setting up page-based routing and preparing the site for a more production-ready workflow. ### Reusable sections The original static pages were divided into smaller React components so recurring sections, buttons and content blocks could be reused across the website. ### Clearer routing Each page was moved into the Next.js app structure, making the site easier to maintain as the service offer and company content grows. ### Better foundation The migration created a stronger base for performance, SEO metadata and future features without changing the visual identity of the brand. ## View the live website Studio Hackspett is live as a clear, responsive website for the studio's brand and services. [Visit Studio Hackspett](https://studiohackspett.se/) [Next project](https://alfonsmelander.se/golfgo) Alfons Melander UX Designer · UX Engineer · Front-end Developer [alfons@studiohackspett.se](mailto:alfons@studiohackspett.se) [LinkedIn](https://linkedin.com/in/alfons-melander) © 2026 Alfons Melander --- Source: https://alfonsmelander.se/golfgo # GolfGo · Case study by Alfons Melander ![GolfGo](https://alfonsmelander.se/assets/golfgoLogo-N8bi5eGg.svg) A mobile golf support concept focused on helping players make clearer decisions before and during the round. Role Research · Prototyping Timeline Sep 2024 - Nov 2024 Team 5 people ![GolfGo background](https://alfonsmelander.se/assets/golfgoBg-BRAb7t1D.jpg) ![GolfGo app mockup](https://alfonsmelander.se/assets/golfgoMockup-21wVMEXk.png) Research on the course ## Understanding the player in context This idea evolved on the golf course. Focusing on those new to golfing it's appearent that the learningcurve can be intimidating at first. What if you could make an app that serves as an assistant. Giving advice on what clubs to use, and make smart decisions. Helping beginners learn golfing, but at the same time, giving experienced golfers guidance, course awareness, and a better time at the course. ![GolfGo research on the golf course](https://alfonsmelander.se/assets/golfgo-research-image-CO77VOMN.jpg) ## Exploring the concept FigmaUser testing 1. RESEARCH SYNTHESIS ### User survey A survey was sent out to a group of golfers. A number of questions were asked. One of them was when club selection was difficult. This depended mostly on wind and rain, and this wasn't a problem exclusive to beginners. This helped shape the concept of the app and should be the main focus of the users of the app. When is club selection especially difficult? 21 survey responses Different weather conditions (wind, rain) 15 (71.4%) New course 7 (33.3%) New equipment 7 (33.3%) Never 2 (9.5%) Dry, firm fairway 1 (4.8%) Inexperience choosing clubs 1 (4.8%) 2. BIG OPPORTUNITY ### Observation To get a better understanding of the user, we observed some golfers on the course. We saw some of the percieved problems with the golfers playing. It helped us get more specific in what to create for an experienced golfer. ![GolfGo problem framing and opportunity mapping](https://alfonsmelander.se/assets/golfgo-observation-Bt-UoeS2.svg) 3. PROTOTYPES ### Testing different interfaces Every team member created their own prototype for solving: difficulty in picking a club, a golf course not being played before. My prototype focused on displaying the the course with AR, which integrates digital information into the users environment in real time. There is data about wind, length to the current hole, and what club to choose. ![GolfGo prototype explorations](https://alfonsmelander.se/assets/golfgo-prototype-BMEjn-O4.png) 4. VISUAL DIRECTION ### Shaping the final visual direction The final interface brought together the strongest parts of our brainstorming. The pages of the app were thoughtout and refined to create a clean interface and clear and fun experience for the user. The most important parts, club selection and course overview were solved. ![GolfGo final visual direction](https://alfonsmelander.se/assets/golfgo-visual-direction-BG2ePOD7.png) Final Concept ## Final design ![Final GolfGo concept screens](https://alfonsmelander.se/assets/golfgoMockup-21wVMEXk.png) [Next project](https://alfonsmelander.se/trackme) Alfons Melander UX Designer · UX Engineer · Front-end Developer [alfons@studiohackspett.se](mailto:alfons@studiohackspett.se) [LinkedIn](https://linkedin.com/in/alfons-melander) © 2026 Alfons Melander --- Source: https://alfonsmelander.se/trackme # TrackMe · Case study by Alfons Melander ![TrackMe](https://alfonsmelander.se/assets/tmLogo-1124sN19.svg) A habit-tracking app concept focused on building routines, visual clarity and everyday consistency. Role UX Designer · Facilitator Timeline Nov 2023 - Jan 2024 Team 4 designers + 3 participants ![TrackMe background](https://alfonsmelander.se/assets/tmBg-BZDYJOPv.jpg) ![TrackMe app mockup](https://alfonsmelander.se/assets/tmMockup-C0_JDSQX.png) Participatory Design ## The participants Participatory Design (PD) is an approach to designing products, services or systems by the people who themselves will use them. Instead of us designing for them, we listen to their design-solutions. We reached out to a couple of people if they would be interested in participating in this method of user experience. 3 people agreed and after a couple of brainstorming sessions, the participants came up with a loose idea of a habits app. ![Workshop participation and early project input](https://alfonsmelander.se/assets/tm-participate-DWbLm9Dg.jpg) ## Exploring the concept FigmaFigJam 1. FIRST MEETING ### Mapping ideas in FigJam After the first meeting we grouped all the ideas and comments in FigJam. From this we were able to categorize all the necessary components of the app. One participant expressed guilt over procrastinating. Another felt that they wanted to adapt new habits in their life. All these comments shaped the app we were building for them. ![TrackMe ideation work in FigJam](https://alfonsmelander.se/assets/tm-figjam-CAJzX4hO.png) 2. BIG PROBLEM ### The big problem There were already apps for reinforcing habits on the market, but the main issue was that they rarely stuck. Improving conscientiousness alone was not enough to keep people returning to the product over time. That led us to introduce coupons that were monetary-rewards. ![TrackMe workshop discussion about the main product problem](https://alfonsmelander.se/assets/tm_problem-Sg2P08O0.png) 3. SECOND MEETING ### Two prototypes From there we explored two different prototypes. Both implemented the beforementioned problem. The main difference was an adaptation of a social media-element, which one participant expressed disdain, and another expressed interest. This second meeting with the participants gave enough to provide the final design ![TrackMe prototype explorations](https://alfonsmelander.se/assets/tm-prototypes-DayAbXAO.png) 4. VISUAL DIRECTION ### Shaping the final visual direction The final design worked very well and the participants were impressed. This high fidelity mockup was better than the participants could have imagined. From the first meeting to the last the mockup had solved a real problem and overcome the big hurdle of solvning the issue with making the user stay. ![TrackMe visual design exploration](https://alfonsmelander.se/assets/tm-design-C4Wi7bLW.png) Final Concept ## Final design ![Final TrackMe concept screens](https://alfonsmelander.se/assets/tmMockup-C0_JDSQX.png) [Next project](https://alfonsmelander.se/disk-studentkar) Alfons Melander UX Designer · UX Engineer · Front-end Developer [alfons@studiohackspett.se](mailto:alfons@studiohackspett.se) [LinkedIn](https://linkedin.com/in/alfons-melander) © 2026 Alfons Melander