A news platform on mobile
Product Designer @ Adapt Digital Agency 2017
Summary
Responsibilities
-
Concept development, sketching, prototyping, and user evaluation along the way in the process.
- Collaborating with engineers to implement the solution to pixel-perfection.
- Client meetings and negotiations to establish timeline, budget, and requirements.
Problem
This project was carried out for the Danish companyByens Ejendomwho 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.
Byens Ejendom reached out to us because they saw an increasing number of mobile users, while mobil conversions falling drastically. The website had not in any way been optimized to function 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.
Solution
The project was formed by a lean and iterative process. This meant that the client and the engineers were constantly drawn into the design activities to ensure a high-quality solution.
The project ended up in a full redesign of the news website which included the home page with articles, article detail pages, conference sign-ups, about pages, and more.
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.
Process Overview
Empathize & Understand
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 Hotjar to reveal the online behavior and voice of the users. 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 tosee 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.
Analyze & 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 meant that all other information just cluttered the views and thus we had to find a new placement for those elements.
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.
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.
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.
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.
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.
Results
Increased conversion and happy users
The client was extremely happy with the result, and we started implementation in December 2017. Now, the redesign has been implemented on their website.
https://byensejendom.dk/
