Redesign Suomi24.fi

Revamping the website for a mordern, mobile-friendly design.

Suomi24: What Finns are talking about

Suomi24.fi is a popular online community in Finland where people can discuss various topics, seek advice, and connect with others. It was founded in 2000 and has become one of the largest online forums in Finland.

It has more than 1.4 million weekly users.

My Role

User Experience Designer
Frontend Developer

Deliverables

User survey and interview
User jounery map
Stakeholder map
Personas
Site map
Navigation Design
Search Engine Optimization

Frontend

React component library
Unit testing

Tools

Sketch
Figma
Balsamiq
VWO
Hotjar
google Analytics
Google Tag Manager
React
Javascript/CSS/HTML

Overview

The Suomi24 team aimed to redesign their website to make it more fresh-looking and appealing to younger audiences, while also improve its mobile compatibility. In addition to updating the user interface (UI), the team needed to replace the outdated FlightJS frontend platform with React. I joined the team in August 2018 as the sole UX designer, leading the UX research and design for the new UI. Additionally, I worked as a frontend engineer with two other engineers to maintain and enhance the website.

Problems

The number of active users is declining. Suomi24 is not appearing on the first page of Google search results. Advertisement revenue is not showing a profitable trend. The frontend platform being used is no longer being updated.

Proposed Solutions

Redesign the UI to adopt modern desktop and mobile UIs.
Improve user experience to encourage more interactions and provide users with confidence to navigate the platform.
Increase the metrics for advertisement display.
Conduct Search Engine Optimization (SEO) to improve Suomi24's visibility on Google search results.

Research

User study

Our first research focused on real website users. We recruited volunteers from the Suomi24 forum, selecting a diverse range of participants based on age, gender, location, history with Suomi24, and frequency of visits. These participants were invited to participate in a one-on-one user interview and a first-impression test, which helped us gain an in-depth understanding of their feelings about Suomi24. In addition to the interviews, we collected over 500 user responses through an online survey on the forum.

Findings

The website appears boring and outdated.
Some components do not follow mobile interaction patterns and do not work as expected.
The website's anonymous nature discourages users from registering, as they fear losing their anonymity.
Users are more interested in local events and building their own communities.
Users who arrive at Suomi24 from Google cannot find anything else of interest on the first page they land on.

Getting Closer to User-centered Design

Use Jounery Map to Identify Users' Motivations and Pain Points

At first glance, it seems that users find the website useful but not interesting. However, upon closer inspection, we found that users have divergent motivations. Creating personas has helped us clarify these divergences, and we can use them as a basis for use cases in later development stages.

After discussing with the Product Owner and the Business Development team, we have decided to focus on two personas because they represented two user groups: the information seeker and the explorer. The information seeker is someone who visits the website with a specific purpose, seeking knowledge or social approval. On the other hand, the explorer visits the website to relax and doesn't have a specific purpose in mind.

Analyze User Behavior And Establish Evaluation Targets

To gain insight into user behavior, we analyzed data collected from Google Analytics, VWO, and Hotjar. Our analysis focused on where users clicked the most, what was visible in the first three seconds after the page loaded, whether users scrolled to access the information we provided, and whether users found the information relevant and useful.

Based on our findings, we concluded that it is essential to rearrange the layout to make the most of the first screen. This will enable users to quickly access the information they need and make the website more user-friendly.

To evaluate the ROI of our redesign, it's crucial to analyze the analytics data. By doing so, we can set up clear targets and adjust our design strategy accordingly.

Collaborating with stakeholder

Clarify responsibilities using Content Map

Redesigning a website with a long history, such as Suomi24, requires a collaborative effort. The project is dependent on other products, with numerous links, components, and shared APIs. In addition, the marketing and advertisement management team reserves every advertisement on the screen, making it difficult to rearrange them. To clarify responsibilities and the impact of each stakeholder on the redesign work, we collaborated with the product managers, developers, marketing team, and content managers to create a stakeholder map.

Usability V.S. Revenue? Or Both

One of the severe problems found during usability testing and user interviews is that there are too many advertisements, particularly in the thread pages, which is the landing page for more than 97% of users. The irrelevant advertisement image, sometimes resulting in an empty white space when the ad doesn't load successfully. This often disrupts users, and they may leave the page or find it unappealing. However, removing or moving the ad lower down the page is not an option as it is one of our main sources of income and must be visible at the beginning.

I have redesigned the page in a way that the advertisement is visible in the first place, along with the topic and a portion of the content. The final result was monitored using Google Ad Manager, and both the impression and the reading depth on the page slightly increased.

I presented two proposals to let market team choose:

Move the ad beneath the topic and the content of the main thread. When text is too long, clip the text <text-overflow=‘ellipsis’> to ensure the ad shows more than 50%.
Introduce a smaller ad slot for mobile view.

The final result was monitored using Google Ad Manager, and both the impression and the reading depth on the page slightly increased.

Improve ad display in the thread view

Build navigation

Refactory the navigationg widget

There are many topics hidden deep within deep navigation structure, like pearls buried under sand. To encourage user navigation, we have designed a mega-navigation that includes a search bar, layered navigation items, and a specially designed top area for highlighting important topics.

Build a information-rich homepage

Create an informative homepage that effectively showcases our brand and drives more traffic to our discussion forum. We worked closely with our content management and marketing teams to redesign the layout, ensuring a balance between informative content and advertisements.

Homepage lofi to hifi design

Allocate Advertisement

Advertisement as one of the most important revenue resourse must graps much user attention from the page.

We not only need to provide informative ads that are relevent to user's need, but also we need to place the ads propertly in proper spot and frequency, so that it can keep the balance between user experience and revenue

Visualizing User-centered Design

Mobile First Improvement

Research indicates that over 74% of Suomi24 page views are from mobile devices, and this number is on the rise. Therefore, we are focusing our efforts on refining the mobile UI.

Ensure text content is visible right away.
Improve search-ability by making the search feature available in the top navigation widget.
Reduce dividers and layer margins in the thread view.
Minimize the use of different colors and font sizes.
Increase the interaction area by using meaningful icons.
Improve the mobile usability of the navigation widget.

We conducted several rounds of testing to ensure smooth and intuitive interactions, as well as a relaxed and effortless UI for mobile users.

The mockups and style guides

Lessons Learned

Don't ditch the old design too soon

We discovered that fewer than 10% of users visit the homepage of suomi24.fi, with most of them navigating to other websites. We wanted to make the homepage more useful so that users could find interesting content and continue their journey inside the forum. With good intentions, we made a significant change to the homepage to provide more helpful information and allow users to use the homepage more effectively.

However, our abrupt change replaced the entire old homepage with the new design, resulting in complaints from users. We soon realized that many users used the old homepage as an index, from which they accessed news, mail, and even Google. We acknowledge that this usage of the homepage is valuable, and there is nothing inherently wrong with how users interacted with it. As a result, we reverted back to the original homepage design very quick, and redesign the links.

It's important to always keep the user's needs and habits in mind when making changes to a website or application. In this case, it seems like the users had developed a certain behavior and pattern of use for the homepage that was disrupted by the sudden change. It might be worth considering conducting more user research to identify what specific improvements could be made to the homepage to make it more useful without disrupting the user's established patterns of use.