A news platform on mobile
This project was carried out for the Danish company Byens Ejendom who offers news and conferences on urban development and architecture in Denmark. Being the most popular news website for urban development in Denmark, the website has over 50.000 users a month and relies heavily on selling conferences on the website.
When I worked for Adapt, we were assigned to increase the user experience and conversions on mobile. From the beginning, the project was formed by a lean and iterative process. This meant tha the client and the developer were constantly drawn into the design activities to ensure a high-quality solution. I was tasked to be the Product Owner and Designer of the project which meant that I handled client meetings, project management and design. The website is live now and has improved the conversions greatly. I can, however, for reasons regarding confidentiality, not tell the conversion results of the implementation.
Design from early sketching to high-fidelity prototype
Close collaboration with developer
step 0: The challenge
Byens Ejendom reached out to us because they saw an increasing tendency in that the number of users on mobile grew, while the conversions on mobile fell drastically. This was due to the fact that the website had not in any way been optimized to work on mobile devices. Thus, the challenge was for us to first understand what content on the page cluttered the experience, and what information the users wanted to stand out. By having this insights, we would be able to inform the subsequent design activities.
Step 1: eMpathize
The first step in the process was to understand the problem and empathize with the users of the website. To achieve this understanding, we used the online tool called Hotjar which is a new, powerful tool that reveals the online behavior and voice of the users. By combining both Analysis and Feedback tools, Hotjar gives the ‘big picture’ of how to improve a site’s user experience and performance/conversion rates. The primary means for measurement was: heat maps, visitor tracking and conversion funnels. By using these three types of data, we could spot where the users found useful information, what they were not interested in, and where they would get frustrated.
Heat maps would help us understand what the users wanted, cared about and did on the website by visually representing their clicks, taps and scrolling behavior. The visitor recordings would enable us to see the visitor’s clicks, taps, mouse movements and thereby identify usability issues. Lastly, conversion funnels would help us find the biggest opportunities for improvement and testing by identifying on which page and at which step most visitors were leaving the website.
The OLD design
As shown in the illustration, the old design was very information heavy, it lacked priority, and it was inaccessible on mobile devices. The challenge was to find a way to convey the high-quality news in a more simple and manageable way. In addition, this should work on mobile devices.
Heat map analysis
From the heat maps it was clear that most of the content on the website was not interacted with. We quickly spotted some general tendencies across different pages.
(Note: the illustration to the left is a reproduction. I am not allowed to share any real heat maps).
Step 2: Define
The insights from the heat maps, visitor recordings and conversion funnels in Hotjar told us that we had to focus primarily on conveying the news articles, the conferences and the sign-ups for the newsletter. This means that all other information just cluttered the views and thus we had to find a new placement for those elements. In addition, since we had to make sure that we kept a mobile-first approach, we knew that everything had to be easily conveyed on mobile devices.
To get an overview of all the content, and what to include on mobile, I made a content inventory of the website. Then, I decided what content not to include on mobile, since this content did not appear interesting to the visitors.
Step 3: Ideate
With an understanding of the problem areas and a definition of what to move on with in the redesign, I started sketching the hierarchy of the content on the website. This sketching session happened with the client, the owner of the company, to align everyone on the initial ideas of the redesign. The sketching session was primarily centered on how to put content first on the different important pages.
Low-fi sketching is great for communicating thoughts to other people. Especially in this project, it was important for me to visualize the insights from Hotjar in the form of sketches.
From the sketching with the client, I went back to the office and started sketching in higher fidelity. This should ensure a better idea of the final result while still creating a common ground for discussion about future directions.
From the low-fidelity sketching the next natural step was to make it look more like the real-world website. For this, I used hi-fi sketching.
Step 4: prototype
The high-fidelity sketching led to the client’s approval of the direction, and this then led to the next phase: prototyping. The goal for this phase was to make a prototype that would enable me to deliver the design to the developer, and to let it function as a common ground for future directions. The following screens show how the final prototype ended up looking.
The frontpage should give attention to a few highlighted articles, and then the articles and konferences should be found easily. In addition, the red bars function as a divider and visual attraction that should lead users to sign up for the newsletter.
The article page should give attention to the content, highlight the sharing possibilities and also make the article legible.
For the conference page, it was important that it was easy to sign up for it. Thus, on mobile I added a “Read more” button that would expand the content, if the user tapped it. This would give more attention to the sign-up button.
The client was extremely happy with the result, and we started implementation in December 2017. Now, the redesign has been implemented on their website.