The Challenge
Create an online-magazine brand based on a persona description provided to you. Design a responsive editorial page for that magazine.
Establishing a process for the remote design sprint
Research online
In preparation for the sprint, I and my teammate (Jenny Tang) collected statistics and read studies about the current consumption of digital media ve print media. What is the current reading behavior of users like? What are the trends for the upcoming years? The collected material gave us a good overview and helped us to imagine how a good online magazine should look like nowadays.
A kanban board and fast sketched mindmaps were very helpful to get an initial overview of all tasks. Since there were just two of us we quickly met on the same page, literally. We established the whole project in Figma working remotely on a shared canvas for 4 days. All the communication was via Zoom & Slack and file/link exchange ran via GDrive and Notion. It is amazing how positively this technology influences the workflow and how seamless the communication can be within the design team!
In this assignment, Ironhack “did the research” for us becouse the project was supposed to be focused on visual design. We were presented with several persona descriptions to choose from. I and my teammate decided to design for James.
James is a 33-year-old tech-startup founder. His work is his passion and life pursue. In regard to reading online magazines, he wants to acquire information fast and read effectively about issues relevant to his companies’ future growth.
Problem statement and HMW question
Our user works a lot, he can not dedicate much time for reading.
How can we optimize his reading activity when designing an editorial for him?
Job-to-be-done statement
To have a better understanding of the use case and our task we forged a JTBD sentence:
When the user takes time to read business-related articles, they want to acquire prioritized information rapidly, so they can get back to work up-to-date on the most relevant issues.
This process helped us to understand that our main design task is to focus on editorial features that facilitate the rapid assimilation of information.
What does our user read?
We have divided our competitors into primary and secondary. We compared the style of our primary competitors to get a better understanding of their brand attributes and USPs:
provides breaking technology news, opinions and analyses on tech-companies from around the world
is the most popular technology magazine in the tech-scene — it illuminates how technology is changing every aspect of our lives, in culture, business, science, and design.
is the biggest and most established player in online business news and is the global provider of 24-hour financial news and information, including real-time and historical price data, financial data, trading news, analyst coverage and general news.
Heavy fonts on headlines transfer confidence and boldness. All of the direct competitors use a very modern and accessible design style. Bright colors are indicators of importance and interaction, but always within a black and white geometric layout base. The style is decisive, informative, and radically utilitarian — reminding of the principles of brutalist architecture.
The work on the visual comparison gave us a very good overview and taught us how to appeal to this market sector. We could now better establish our brand and enable identification within the target group.
To start defining the character and visual language of our brand, we created a stylescape.
A Stylescape “are the collection of highly curated images, designs, type, textures, and colors that help defined visual direction, but more importantly, will get you buy-in from your client before you design anything.”
-Chris Do, Blind CEO
We chose to work with bold colors and shapes as well as an image style that symbolizes confidence, openness, and modern thinking. We wanted our brand to avoid the “nerdiness” that is often connotated with the tech world. Our user is smart and has an analytical mind, but is also style-conscious, independent and creative.
We made a mini-survey to see if our assumptions about the visual cues will be confirmed. We reached out to 31 people and asked them to assign attributes based on the images that we provided to them. We discovered that our participants also thought, that our design is innovative, and that it transfers strength, confidence, and a sense of style.
Above you can see the results of the survey: the size of the bubbles indicates how often the attribute was assigned. Due to a very tight schedule, we were not able to reach out to more participants but we understand that bringing an actual brand to the market would demand wider research.
The stylescape that we established helped us to:
summarise our visual design research
lay a foundation for the actual design process
agree on one direction within the design team
avoid miscommunication in the next phase
(potentially it would also help to communicate with a client/stakeholder)

Brand statement
Before getting into further ideation we wrote a brand statement to define the goals and values that our magazine aims at.
“Tech_bytes is providing daily reports from the forefront of innovation. Every day we are bringing pieces of qualitative information and valuable opinions to the startup world. If you want to know, what is coming up next in technology and design, tech_bytes offers a curated reading experience on the topics of your choice. We are constantly working on new features to optimize rapid information acquisition and we promise not to waste your time. You can effectively read what you need to know and get back to making the next big thing happen!”
Brainstorming on features and feature prioritization
To find the right features that will support the brand's statement we listed all interesting ideas and used the MOSCOW method to prioritise them.
Actually, we would like to incorporate all listed features in our design and develop the product towards even more innovative ways of reading. For this sprint, however, we decided to work only the highlighted features:
header navigation
search option
article snippets with a visual
article snippets without a visual (only headlines)
last update indicator
reading time indicator
listen to article option
related articles section under the article
sharing article on social media
important text passages (highlighted or bold)
opinions section
top reads section
social media links
subscribe to platform section
subscribe to newsletter section
video section
Style tiles
Working on several style tiles before diving into layout design helps to prevent realizing a bad design choice too late in the process. It also helps to stay consistent, especially when designing simultaneously. Also, it helps to communicate with clients and avoid misunderstandings. In our style tiles, we established basic colors and elements and so we could see how they fit and choose the best configuration.

We decided to use big headlines and bright colors to ensure accessibility and enable rapid scanning of text. The palette is mostly limited to white, black and grey, but we also have chosen energetic tones of blue and green for signaling interactions and for highlighting important messages. Our “white” and “black” are slightly off from extreme to give the layout a more sophisticated feel and make it more pleasant to the eye.
Establishing responsive design
Before designing for various viewports we had to decide, where to set the breakpoints. We decided that we do not want to design for more than 3 viewports due to tight time constraints. We checked where similar service providers to see set their breakpoints and decided to design the desktop layout at 1140 px width and make it break at 701 px for tablet, and 550 px for mobile.

Layout grid
We decided to work on a 12 column grid, because this way the content can be easily divided into 2 or 3 modules (“organisms”) and be stacked for the smaller viewports. We chose a 160 px margin to prevent paragraphs and pictures to be weirdly stretched in width. These choices, as well as a 24 px gutter, helped us to achieve a balanced composition which also fully complies with the standards of the industry.
Wireframes for all viewports
We established the MidFi desktop version of the editorial together. Then we divided the work on the mobile and tablet versions between us for faster results.
Desktop Prototype and usability testing
What do do with our user after they finished reading the article?
We created a prototype of the desktop version to test the layout for usability. We gave the testees the following task:
Scan through the homepage and choose a category in the navigation. From there choose an article to read. After reading the article, scroll further down. This way will arrive back on the homepage.
There are several possible ways in which the user could have been directed when they finished reading an article:
“The Bingereader” ( style) — recommends further articles followed by another article
“Take me up, Scotty” ( style) — makes the user click the arrow up to land at the head navigation
“Teleport” — take the user directly back to the homepage, once they arrived at the bottom of the article
“Infinite loop home” — (Bloomberg style) — we can let the user scroll further down until the homepage loads there
We found the “infinite loop home” most interesting to test (we had the second option in the prototype too). I an ideal timeframe and professional setting we would conduct testing for all the options. But in this project, we decided to test the most unconventional one to see what happens. Morover our user is not a “binge reader”, we want him to pick one or two articles from the main page daily and “get back to work”. This feature could be potentially a good solution for tech_bytes.
Testing results
In the prototype test, we mainly wanted to make sure that the layout is easily understood. The results were rather positive: the users liked and understood the layout, but there were two main issues:
We took too much vertical space at the beginning of the page and the users were not able to grasp the whole content at one glace. They were also not incentivized to scroll further down due to that flaw.
The “Infinite loop home” (Bloomberg style) feature came out to be very difficult to be adopted in this version. Some users were really surprised and didn’t understand it or didn't like it.
The first issue was obvious to solve, we corrected the real estate of the website by eliminating some white space and squeezing elements vertically.
The “Infinite loop home” confusion has happened probably because the scroll down lacked appropriate friction. We added a loading page — it is more realistic to incorporate the page loading time. It is a mask that darks out the homepage and loses opacity gradually until the user crosses the navigation threshold — from there there is no way to scroll back up to the article anymore. In further steps we would also add an information like “scroll down to arrive back on the homepage” and test it again.
It might be difficult for new users to adopt but this feature can be very useful for recurring users.
We had to present a HiFi prototype by the end of the sprint, so we left the usability issue at this stage and proceeded with polishing the HiFis. Then created a prototype that shows our overall idea for the editorial.
Atomic structure of the visual design
The HiFi design demanded to have an organized process. This is why we established atoms, molecules and organisms within Figma. Below is an exemplary part of our molecular file structure.
HiFi Prototype
In the HiFi prototype we are showing how we imagine the Search bar and also how the “listen to article” feature would be placed. Here is the user flow and the prototype is shown below.

Here is how the final prototype looks like.
And here are all the viewports in HiFi
The HiFi prototype and the visual design are definitely not ready to handoff yet and still demand to test. Also, we worked with imaginative content because the project was focused on visual design.
What is most important, we were able to learn a lot about efficiency and optimize the design workflow within a team. We also shared a lot tips and tricks with one another and decided to work together on the final Ironhack project.
Back to Top