fikatrail

live site: fikatrail.com

Overview

fikatrail.com is an illustrated guide to exploring Stockholm through fika.

The challenge was to create a responsive website as a practical illustration of the skills developed during the course of the MA programme. All phases of the website, from research, concept and design to development and implementation were completed during the MA.

This thesis project used a phased approach, with each phase requiring a presentation and report to record our progress, and to demonstrate said progress to others. The below demonstrates some key areas of work, though you are also welcome to take a look at the presentation slides from each phase.

As this project is still ongoing, this page may be updated to reflected any new findings.

Goals

• create a site that encourages people to explore Stockholm in a new way
• share what fika is, and why it's so important to Swedish culture
• provide a visually engaging user experience that differs from what is already available

Personal goals

• learn a vector graphics editor (Adobe Illustrator) to produce own illustrations for the site
• learn about WordPress theme development, and better my understanding of PHP and JavaScript

Research

The intial stages of the project revolved around research - from analysing competitors already out there, to learning more about the subject (fika) at hand. I tentatively proposed my target audience:

• gender: no set gender
• age: between 18 - 40
• interested in travel, food and/or coffee, experiencing new cultures

I also conducted research with focus groups with 12 people total (in groups of 3, 4, and 5) that identified within this group. 5 identified as male, 7 as female. Only 2 live in Sweden, but are not originally from there. All speak English fluently, and the two living in Sweden know basic Swedish.

These were led as informal discussion groups - after being given the very basic premise of the site, I asked the participants to discuss amongst themselves what they would expect of the site whilst I took notes. After collating my notes, there were some common threads between the groups on what they expected from the site:

• search by neighbourhood/area (most likely reason being tied to where they are staying)
• map/location details for each café
• an overall listing for cafés to browse through
• links to the café menus, or websites at a minimum

User personas

Based on my defined audience target and notes from the discussion groups, I created user personas to refer to during the site development. Personas help me better understand the target audience and create a website that will refer to their needs and wants.

For each persona, I identified their backgrounds, and the key tasks that might lead them to my site.

Information architecture

From this, I sketched out the information architecture for the site. The goal was to create an user-friendly structure that would encourage users to explore its content. Well-written, interlinked content would hopefully further encourage this.

At this stage, I had also decided on the name 'fikatrail' for the site from my brainstorming sessions. It felt in keeping with the site's aim to have users experience a 'journey' of fika, and the reactions were positive from my tutors and peers.

Design

A key part of the success to my vision of the site was in the illustrations. Long before the design presentations in class, I taught myself Adobe Illustrator to get a head start on the illustrations. I had originally thought I would illustrate the cafés and bakeries themselves, but disliked most of my attempts. However, when I was playing around with illustrating some of the iconic landmarks in Stockholm (more for the sake of continuing my learning of the software), I found that these stylised illustrations were much more effective. I continued with this style and subject, reducing the landmarks and buildings to their most basic shapes, and worked with a limited colour palette to create a sense of cohesion.

I also made illustrations for the Swedish cakes and sweet treats. Leaving aside the illustrations for the bakeries, I decided these would be illustrated by photographs. Feedback I received suggested that these would much more easily and immediate intimate the atmosphere and feel of the cafés and bakeries, and so I edited the collected photography to better match the colour tones used in my illustrations.

Design choices and style tiles

Before starting any development, I created style tiles to serve as a reference during the process of writing my CSS. As noted below, this went through numerous iterations during the project.

The illustrations and photography I'd made and collected to feature on the site inspired the rest of the site's design. One of my favourite things about Stockholm as a city is its colours in its architecture, and since I was featuring the buildings so heavily, it felt sensible to continue this with the rest of the site.

A reiterative process

As the project ran on for the course of our MA, there were a number of stages to the design and build process. I began with wireframes in Whimsical, and created prototypes in Adobe Illustrator and Figma, as well as in the browser with HTML and CSS, at various stages of the project to get feedback. Once I had most of the build done, I created a holding page. The site was live behind this holding page for about a month before I officially launched it on associated social media platforms so that I could perform both browser and user testing to get more feedback before going live.

Some of the changes made as a result of this feedback:

• people indicated that the red used for the links on the first style tile suggested something wrong. This was changed to the darker green in the finalised version, and I decided to avoid any red tones outside of the illustrations.
• the initial home-page was received as dull-looking and fell short compared to the rest of the site. After some brain-storming, I decided on the gridded layout with a central hero image that would encourage users to select one of the three most important parts of content.
• I'd originally created a quiz for the homepage using the plugin h5p, but I was unable to customise it as much as I had originally wanted, and people generally said they found it too distracting. As such, I left it out when planning the new gridded layout, leaving it as a good example of less being more.

The build

The site went live on the 17th of September. It was built with:

• HTML, CSS, JavaScript
• WordPress CMS and custom WP theme
• WordPress plugins like Advanced Custom Fields, Yoast SEO and Monster Insights for Google Analytics
• Mapbox GL JS for the Mapbox mapping service

I built the site with accessibilty in mind, using WebAim's WAVE tool to measure potential accessibility and WCAG errors. I used fallbacks for my JavaScript where possible, such as using a11ymatter's accessible mobile navigation pattern. There is no fallback for the Mapbox map if JavaScript fails to load, though I organised and wrote the content with this in mind, so that users can still read and find cafés by place and location where needed. This is something I'd like to improve in the future, by learning more about Mapbox's fallback options.

The future

I was overall pleased to be able to deliver the type of illustrated guide I had in mind for the site, and further trails are being added on a weekly basis using WordPress scheduled publishing.

Going forwards, I'd like to think about furthering what I've learnt and consider:

• adding a multilingual functionality to serve the content in Swedish
• learning more about Mapbox GL JS and adding further interactivity, filtering, JS fallbacks, etc. to the mapping functionality

Takeaways

Though the work spanned the course of our MA, the project was another steep learning curve. It was an eye-opening experience that taught me about knowing where and when to focus my energy and efforts.

Some of my key takeaways from this project are:

• Deliver an MVP within realistic requirements. When I started planning for the project, I had so many ideas and wants for the site. I realised it was more important for me to focus on the features that could deliver the best experience for my users, which meant prioritising my time on a specific set of tasks and goals.
• Docs don't have to be so scary! My first few experiences with the docs for Mapbox and WordPress were pretty off-putting as I found them difficult to understand and outside of my skillset at first. The more I read around the subject and tried little tasks on my own, the more I started coming back to them and understanding the bits and pieces I needed. Mapbox is still a work in progress, but I'm now quite comfortable using the WordPress codex.
• Show more people your work, more often. This is something I've been working on during the entire MA, and whilst I do feel I've improved, it's still something I feel I could do more in. Talking with people outside of a design or tech background brought me new ideas because they were less likely to be worried about what sounded achievable. Technical and design-focused people were more grounded in the realistic details and can be a great sounding board for what is possible (or wise!) based on their experiences.