Design field
UX/UI-design, graphic design
UX/UI-design, graphic design
Tools
Figma
Figma
Time
Spring 2024
Spring 2024
Team
3 UX designers, 2 graphic designs, 1 web develiper
3 UX designers, 2 graphic designs, 1 web develiper
The problem
As part of a student project, we were tasked with redesigning the website for Samfundet Gjøvik - a historic event venue located in Gjøvik, Norway. The existing website lacked clarity, modern visual appeal, and a user-friendly structure, making it difficult for users to find information and book the venue.
The solution
Our goal was to improve the overall user experience, highlight the historic atmosphere of the location, and design a more intuitive booking system that reduces friction for first-time and returning users. By creating a more user-friendly and visually appealing design, their website has a potential to get higher convertion of customers.
Design process
• Empathize: UX-evaluation, heuristic evaluation
• Define: Journey map, comptitive analysis, MoSCoW
• Ideate: Brainstorming, moodboard, dot voting
• Prototype: Flow chart, wireframes, low,fidelity, high-fidelity
• Test: Evaluation
• Define: Journey map, comptitive analysis, MoSCoW
• Ideate: Brainstorming, moodboard, dot voting
• Prototype: Flow chart, wireframes, low,fidelity, high-fidelity
• Test: Evaluation
Research and insights
General issues
• Too low contrast between text/background, causing severe issues with readability, accessibility, and WCAG.
• No design manual, causing inconsistencies in font styles, color use and spacing.
• Long text paragraphs without visual breaks, which makes reading feel "heavy" for users.
• Poor hierarchy and organisation, making it unnecessary difficult and annoying trying to find relevant information
• No design manual, causing inconsistencies in font styles, color use and spacing.
• Long text paragraphs without visual breaks, which makes reading feel "heavy" for users.
• Poor hierarchy and organisation, making it unnecessary difficult and annoying trying to find relevant information
Booking system
1) Before booking, users must navigate through several cluttered and poorly structured pages to find essential information about the venues, making it difficult to make a decision.
2) When booking the venue, they encounter a disorganized and messy booking form with hard-to-read text.
3) They are required to manually type in details such as time and number of guests.
4) After submitting the form, they must wait for an email response from a staff member to confirm whether the venue is available.
5) If the venue is unavailable, the user and staff often have to exchange multiple emails to find an alternative date.
2) When booking the venue, they encounter a disorganized and messy booking form with hard-to-read text.
3) They are required to manually type in details such as time and number of guests.
4) After submitting the form, they must wait for an email response from a staff member to confirm whether the venue is available.
5) If the venue is unavailable, the user and staff often have to exchange multiple emails to find an alternative date.
Following the UX evaluation, our main priorities before the deadline were to develop a new design manual, ensure mobile responsiveness, and redesign the booking form. These priorities were defined using a MoSCoW chart (see image above).
Design & prototyping
One of my main responsibilities was to propose a new design for the booking system. I initially created a vertical dropdown layout to emphasize user progress, but this was later replaced with a progress indicator for improved clarity (see the 'Final Results' section below).
Another key task I worked on was redesigning the 'About' page, which presents information about Samfundet and its history. To improve readability and provide a clearer overview, I replaced the long block of text with a visual timeline.
Final results
The final version of the booking form introduced several key improvements:
• Rather than presenting all fields at once, the form is now divided into multiple steps for a more manageable user experience
• A progress indicator was added to clearly show users where they are in the booking process
• The form also features checkboxes for easier input
• A clearer confirmation message upon completion of the booking form
• Rather than presenting all fields at once, the form is now divided into multiple steps for a more manageable user experience
• A progress indicator was added to clearly show users where they are in the booking process
• The form also features checkboxes for easier input
• A clearer confirmation message upon completion of the booking form
Visual design
The new design introduced updated fonts, colors, icons, and spacing to create a more cohesive and visually engaging experience. Natural, earthy tones were used to reflect the historic atmosphere of Samfundet and strengthen its visual identity.
The typefaces DM Serif Display (headings) and Merriweather (body text) were chosen to reinforce the traditional and timeless character of the venue.
What I've learned
• Collaborating in an interdisciplinary team with graphic designers and web developers
• How ineffective use of hierarchy and information architecture can significantly hinder task completion on a website
• Better understanding about working with design systems in Figma (despite not having the main responsibility for this part).
• How ineffective use of hierarchy and information architecture can significantly hinder task completion on a website
• Better understanding about working with design systems in Figma (despite not having the main responsibility for this part).
Further development
• Conducting usability testing with real users from the target group would have provided more valuable insights and validation.
• Given the presence of multiple user types (e.g., visitors and employees), incorporating a service design perspective could have enhanced the overall user experience and addressed broader touchpoints.
• Given the presence of multiple user types (e.g., visitors and employees), incorporating a service design perspective could have enhanced the overall user experience and addressed broader touchpoints.
