Meta Magazine
Welcome to my fourth challenge of the Ironhack UX/UI Design Bootcamp case study. This time we designed a responsive online platform for a magazine directed to meet the needs and goals of one of the given User Personas.
Before we get started, let me tell you a little bit about the setup of this project. We were assigned a partner with whom we would spend the week doing research and prototyping. I worked together with Valeria Solari, a lovely soul from Chile. We shared ideas, respectfully voiced our beliefs and doubts, and managed to maintain a great work environment throughout the project.
Each challenge starts with a different approach and base information. This time we were given personas to choose from. Out of the selection, we went with:
We were given free rein to our approach and what research methods we would choose. Sticking to the Design Thinking approach, we selected some methods that would help us fully empathize with Paula to further understand her desires and motivations.
So, we put ourselves into Paula’s Dr. Martens and got down to work.
An empathy map started us going. It helped us define some more possible things that Paula would say or do. We took the information given to us from the persona description and reverse used the empathy map. Empathy maps are used to create personas, this time we got creative and used it to our needs.
This then took us into the next phase. Jobs to be done. Having some supposed things Paula would say, we could write out some tasks she would want the website to do. Here is the one that we favored.
This would allow us to create a platform that would cater to more desires than just her reading addiction alone.
Now we had some ideas about what to implement into the magazine.
We would:
- Cover the topics: literature, music, visual arts, and culture
- Allow users to create their own profile where they can publish their own creations
- Allow people to follow each other
- Have a recommendation engine that suggests publications that might interest the user based on recent searches
- Suggest similar posts to ones being read
- Allow users to share directly on other social media platforms
Now that we had ideas for the content and use of the magazine, we could focus on the style of the magazine.
Paula reads Vice Magazine, Repeller (formally known as Man Repeller), and Rolling Stone. All three magazines are quite diverse in style and content so we did a feature analysis bringing in Dazed and iD and removing Rolling Stone. Rolling Stone was throwing the project off balance so we focused on the others.
We analyzed the features and found that they all offered similar topics of interest. Most of them had a subscription option and had the same demographic, iD magazine reaching a slightly older demographic than the others.
The next step would bring us further to the design of our website. Having done the visual identity competitive analysis we could distinguish the brand attributes of each magazine. These were:
Assessing the brand attributes, we could tailor our magazine for our user and complement our attributes to those of the ones Paula already reads.
These are the ones that our magazine will carry:
We created 3 different moodboards and asked people to vote which one most represents the attributes. Using surveys to decide which moodboard to chose meant taking our bias and personal preferences out of the equation. The one with the most votes was this one:
From here, we could finally move on to what elements and features we would like to have on our site. We listed all possible features and did a card sorting to help us organize and structure our website.
Most of the cards were placed in the labels we had initially categorized them into, but some were placed differently.
The header and footer seemed to be the section we would need to assess the most. So we put a lot of thought into what should go into the header, the footer, and what can be left on the main sections of the page.
Next came the layout, we wanted to keep things minimal, not to overwhelm the readers. We decided on things such as: keeping white space, bringing the header down to the essentials, and placing the rest in a hamburger menu. “Subscribe” was one of the debated features which we placed in the footer to keep the main page as clean as possible.
We then moved on to our lo-fi, drawing one each, to give us more chances of creating the best version.
We showed our lo-fi to 5 people and asked for their feedback. So far everything seemed to be making sense and they were looking forward to see the mid- and high-fi.
The icon that got the most questions was the heart icon above the article preview image. It was confusing to some why it was above the image and not below. We wanted a button for liking a post and also saving posts for later. The iterations made will be shown in the high-fi prototype.
To see what the magazine would look like on a phone, we made two mobile screens.
Having the skeleton ready, the fun UI design could begin. We put some time into finding two typographies for the magazine. One for the heading that would stand out and one for the text. Being a magazine meant that the text needed to be easily readable. We chose Caligna Demo for the headings and Quasimoda light for the body text.
After much deliberating, we decided on orange and green to be our main colors. Here’s why:
Orange = Creativity, Youth, Sociable
Green = Inspiration, Invigorating, Growth
From there we moved onto designing buttons and cards for the article previews. Keeping lines thin and sleek to match the mood.
And finally: the Hi-Fi
Some key learnings from this project are:
- Having more space can be challenging to keep it simple
- Picture selection is important
- Having a good work dynamic makes the project a smooth process
Next Step:
- Implement notifications on new publications
- Allow people to direct messaging
I really liked this project! Coming from a photographic background, I have spent a lot of time in the fashion industry and I could bring in previous knowledge during this project. Also Valeria was a great person to work with!
