Website for Trøndelag Trening
School project (NTNU) • Responsive desktop website • 2020
Overview
The purpose of this project was to design and develop a website for the fictional business Trøndelag Trening.
Team
Fredrik, Thomas, Simen, Malin & Julie Amalie
My role
My responsibilities included: branding design, interface design, prototyping, developing high fidelity mockups, usability testing, and developing the booking page using HTML/CSS/JS
Understanding the problem
Things we want to consider when designing for this audience:
Trøndelag trening needs a way to showcase their offers and services to Trøndelags inhabitants,
as they are quite freshly established and want to attract more customers.
Making it easy and accessible for all ages
Designing for both customers and non-customers alike
Creating a visual identity that represent both the business' brand & audience.
Project constraints & compromises
Constraint 1: Short deadline & lack of time for preparatory research
Compromise: basing our project on hypothesised needs and competitor research. Usability testing limited to the end our our time-period.
Constraint 2: Varying levels of HTML/CSS/JS knowledge amongst the team members - I.e. learning as we go
Compromise: Staying clear of any really complicated design solutions that would reqire extensive HTML/CSS/JS knowledge
+ no backend functionality
Understanding the audience
Trøndelag Trening's main audience is people from 18-50 years old living in Trøndelag muncipality. Their audience consists of already excisting customers, as well as people in this age-group with a wish or desire to start exercising.
Audience needs/requirements:
Information about opening-hours and locations
A service portal for managing bookings and personalia
Overview of offers and services
Information about the company
Navigation structure
With the goal of creating an accessible website, we structured the site so that the user can reach any page directly from where they're currently at. The navigation menu will take you to the most important pages, as well as always offering a button (the logo) to take you back to the landing page.
The footer contains all the links in the menu, as well as some of the less important links - like job openings.
Figure created by Simen
From sketching to wireframing
Working together to come up with ideas for the layout
Before starting the wireframing-process, we sat down together to discuss and brainstorm our design-ideas and suggestions for the site. This showed us that we had many similar thought and ideas, and fortunately also some different ones.
We all opted for quite a simple and minimalistic looking style - and our biggest differences showed when sketching pages like "our offers" and "locations".
Starting the wireframing process
The sketches gave me a good foundation for exploring different layouts and ideas to wireframe. As our sketches for some of the pages were quite different, I converted them all to wireframes so we could see which sketch translated better on screen as well as being the most accessible.
We all came up with ideas on paper, and then I converted them to digital wireframes.
Designing a fresh & sporty visual identity
Keywords that represent Trøndelag trening;
Innovative, playful, creative, trustworthy, strong, versatile, quality
-
Blue is often used by big companies, and have become quite the symbol for strenght & security. I paired it with some lighter variations, as to not make the identity too heavy & overbearing.
Furthermore studies have shown that blue is the most preferred favorite colour amongst all genders. -
Sans-serif is also generally easier to read in short bursts. We want to keep people on the site = We have to secure good readability.
-
It can also symbolize change, as the fluidity of the frames mimic movement and variation.
"Blue is a serene and calming color that represents intelligence and responsibility. Blue is cool and relaxing. Light baby blue is peaceful, while dark blue can signify depth and power."
- Anna Lundberg (2020)
Creating high-fidelity mockups
After showcasing and debating every page's low fidelity mockup with the group, I started creating high fidelity mockups based on the feedback. This included implementing the colour palette, tweaking details, padding & type, and lastly adding the appropriate pictures for showcasing the brand and audience.
Anybody else just love this part of the process?
↓
Shoutout to Malin, who was responsible for the UX-copy!
Implementing the design to 🌌the real deal🌌
And how design naturally changes slightly as we code along
During the coding phase theres a lot of hours spent switching from (in my case) Atom and the browser window, tweaking small and big changes to the code. As you go along you might find that some parts of the design doesn't quite work, or doesn't look as good as intended. And there's no shame in admitting it. Heck, some things might even be completely uneccessary and distracting (Hi weird arrows on the buttons in my design, I'm looking at you 👀).
Everyone on the team made an effort to find, filter and change the *not-so-great-afterall* or *this-could-look-even-better-if* UI decisions, and as expected some things were changed due to coding limitations. I would argue that accepting change is a crucial part of the process, and makes for an elevated design-experience.
During the coding process my main responsibility was the booking page, working in both HTML/CSS and JS. Big shoutout to my team for making the site look so good in such a short period of time!
Usability testing + innsights and feedback
Gathering insights from both live face-to-face user testing & google forms
Because of time constraints there were limitations as to how much usability testing we could manage, so we decided to limit testing to the end of our project timeline. Ideally, though, it would be benefitial to conduct usability testing during every stage of the process.
When we were happy with our developement, we carried out user testing to see if our audience responded well to the website. This included live user testing, as well as sending out a form (with link to the website) for people willing to check it out.
This allowed us to gather innsight in to what worked, and what could have been better. The insight we gathered, especially from the live user testing audience, gave us plenty of valuable feedback - even on things we hadn't even thought of ourselves. We were able to change some small elements based on feedback before the delivery of our project, but the feedback generally required a bit more work than possible during the remaining time period of our project.
Age & relevance of our testing audience
The group of people involved in this user testing proccess were generally friends, family and acquaintances.
Nevertheless we had a goal to get a diverse audience, both in age and fitness-stage to better represent Trødnelag Trenings audience.
As the testers used a variety of different plattforms and browsers, we gained some innsight as to how our website and design changed across the spectrum. Even though we did check out our code in different browsers ourselves during development, we still got some feedback on things looking a bit wonky at times using browsers other than Chrome.
What the users had to say
The feedback we got was mostly positive, but luckily we did get some constructive criticism and questions to ponder.
Much of the feedback was specific to forms missing validation and visual feedback cues, as well as some responsiveness issues.
The UX-copy could have been better
For site strucutre and functionality, we especially got several comments about the booking page;
It's possible to book appointments when not logged in
The feedback from booking an appointment was unclear
There is no clear indication as to what centre you're booking at
One colourblind tester had difficulty with the colours used
On the more positive side, we had a high success rate when it came to expected paths (both direct and indirect) where 91,7% of testers could find the page we asked them to. Gererally we recieved beedback that the site was easy to navigate and that everything felt available. We also got very good feedback on colours and use of photos.
What we learned 🤓
Effective planning does wonders to effeciency!
Receiving feedback from group members can really help improve the final product
One can never truly know what the user is looking for before testing, but now we're at least a bit more knowledgable
Programming takes A LOT of time, especially the final tweaks
Making things responsive can be.... well... intense to say the least.
Working in a group is super helpful, as everybody has their unique set of skills and expertise.
Together we can make a stronger product, as well as learn a lot from each other during the process
Thank you so much for reading!
Check out my other projects ✨
-
![]()
A mobile application that simplifies and enhances hamster care.
Hamster owners worldwide are struggling. The solution?
“The hammy project”
-
![]()
The app that makes saving water easy
We need water for survival, yet we are wasting it like never before. Why is that, and how can we fix it?
Introducing VannSpar - the app that makes the impossible, easy.
-
![]()
The social platform for Imagine Dragons fans
As part of a UI & prototyping challenge I was confronted with making something silly, yet beautiful. There may exist prettier apps than this, but I guarantee that you won’t find any sillier 😅
