From Print to Online: Designing Aedes-Magazine
As designers, we want to design products that create value for the user. An intuitive flow, a consistent design and simple animations that surprise the user: these are all things that give a product extra value and contribute to a better user experience. Aedes-Magazine is a project that has all of these things and we are excited to share our design process.
Aedes is the branch association for housing corporations in the Netherlands. Aedes-Magazine shows the work of the housing corporations and how they work together with the municipalities, the tenants and social organizations.
Aedes asked us to create a new online first magazine with a brand new look and a great user experience. The magazine would also be available offline and there was one goal: making sure the offline and online magazine would have similar experiences.
To achieve this, the project had to be well- coordinated and well-prepared. Through workshops, prototyping and extensive user testing (all before any development happened) we managed to create a solid design that all parties involved are excited about. Together with Aedes’ offline design agency Curve we grabbed our shovels and went to work!
Concepting week: let’s sync up!
Working together from the start of the project was essential to keep the style of the online and offline magazine aligned. We believe that working together actually means: all parties involved together in a room (or preferably outside on a sunny day with a nice breeze 😍)!
We did this by organizing three workshops, in which we would determine the expectations, wishes and goals of the three parties involved. The result would be a style direction for the online magazine that is consistent with the offline magazine.
Monday: workshop 1
We started off by spending some time to get to know each other. It was going to be a busy week in which we would have to deliver great work together.
After this, we focused on what the message of the new Aedes-Magazine would have to be. We did this by creating a product statement. We zoomed in on the readers and business goals of Aedes-Magazine. Each team member wrote down their interpretation of the main focus of the magazine. Then we reviewed every statement and selected the best parts to create a final version that everyone agreed on.
At the end of the day, we asked each party to select magazines (offline and online) that inspired them, so we could discuss these on Tuesday.
Tuesday: workshop 2
By discussing the collected magazines, we started to recognize design elements that the client likes ánd dislikes. It was a good preparation for the following two days, in which we and the print agency would create different style directions for the new Aedes-Magazine.
Friday: workshop 3
On Friday we looked back on the outcomes of Monday and Tuesday and presented the first designs we made in the past two days. After the presentations we discussed everyone’s feedback. It was very important for us to find out which elements in the designs (style and interaction) we could keep and which we had to let go of.
We also used this day to compare our designs for the online magazine to Curve’s designs for the printed magazine, to make sure the designs were in-sync. We focused on elements like typography, colors, imagery and white space. Luckily we had similar ideas about many things, but a couple of things felt a little inconsistent. Luckily, we could fix this at this point in the project.
It was great that two design agencies –with a different expertise and vision– inspired each other with their design. We were well-prepared for the following three weeks in which we were going to design the full user experience and -interface.
The Design Process
After an intense and inspiring concept week it was time to start the actual design process. During this period we regularly scheduled ‘design-syncs’ with the client and the print design agency to make sure we were still on the same page.
As always, we wanted to create a product with a great user experience. The magazine shouldn’t feel as ‘just a blog’. Also, it had to be a mobile first design, because a lot of people will read it while they are in the train, during lunchtime or in their spare time. This is why we added a couple of interactive elements which contribute to a better online reading experience:
- Earlier editions of the magazine
- Reading time per article
- Panorama pictures
Of course the visual style contributes a lot to the reading experience. We worked on updating the color palette and chose a new font for better readability. We chose to keep the visual style elegant and simple with plenty of room for imagery. Images are very important to Aedes because they give the social tenant a face and make it easy for readers to relate to the stories.
Prototyping and user testing
We wanted to design a digital product with the look and feel of a magazine.
To achieve this, we used Framer to create prototypes. We used these prototypes to validate our ideas through extensive user testing. These user tests were also a great way to see if we managed to create the feeling of a magazine.
With the ViewController module we could create and test the flow of our designs and also show the animations we created. We could test the animations to see if they made a difference for the experience of an online magazine.
We tested our prototype with five users and gave them several tasks to see if they understood the flow we created. Two of the most surprising (and useful) outcomes were the following:
- It should be clear what the bottom of an article is. At first, we designed an ‘endless scroll’ that would show the user related articles at the end of every article. Scrolling down even further would bring the user back to the index page. Unfortunately, this was a disaster. Our test panel didn’t understand what was happening because the index page almost had the same look as the related articles. It wasn’t clear where the article ended and the user felt more comfortable scrolling ‘up’ or ‘back’ to the index page, than further down.
- The screen shouldn’t change too much when scrolling up. Initially we added a social bar that would appear when scrolling up in an article. This bar allowed the user to share the article or go back to the index page. Scrolling down again would make it disappear. Our test panel didn’t like it because they said their screen changed a lot and it distracted them while reading.
What’s next?
We are responsible for the complete design and we are proud to have achieved this in only five weeks. Workshops, usability testing and great communication with both the client and their print design agency all contributed to an amazing result.
Even more so, when we heard that Aedes had more than 1000 subscribers in less than 24 hours for the online magazine. This was a huge increase compared to their previous magazine. And their users love it💚
This is only the beginning of Aedes-Magazine. In the next few weeks we will implement a lot more cool stuff, like 360° pictures, videos and polls.
Curious? Check out the online magazine!
