A new way to Magazine! How to develop a strong analytical feature for trend analysing and surfacing fashion insights.
Forecasting Trends enhancing the User Experience. Tendance Magazine: A Responsive Web Design Editorial Project.
Introduction
Since early 2000, the most notorious magazines and newspapers have launched their online version. But only recently, this market has focused on user experience. Indeed, Millennials are the main consumer of online content and their consumption of online content is entirely different than the user of the printed press. With this project, we focused on making a responsive website for a fashion magazine for fashion professionals: Tendance Magazine. This magazine offers an engaging online experience for staying up to date with fashion trends and finding inspirational content.
The Challenge
By designing a responsive online magazine, we had to deliver a consistent, branded and engaging experience, directed to meet the needs and goals of one of the presented User Personas. We were given a primary persona designed out of available information online and research insights globally. As you will see later in this article, we made a secondary persona out of our discovery.
Because of our target group — young professionals, millennials — we designed for mobile-first.
Goal of the project
- Identify the foundation of visual design and best practices through observation, analysis and methodology.
Deliverables
- Animated hi-fi interactive prototype,
- Style Guide,
- Brand positioning,
- Benchmark analysis,
- Process logbook (explain how you organised yourselves to make it happen),
- Zeplin link,
- 5 min presentation,
- Report or case study.
Brainstorming
The main outcome from the brainstorming session was to refine the persona and aim to target trend seekers and trend setters from the fashion industry instead of marketeers.
Research
We interviewed our users and the most important finding are related to this:
Empathizing
Emphasizing with your users is key in delivering a product to their liking and needs and it is crucial to a human-centered design process such as Design Thinking. Empathy allows design thinkers to set aside their own assumptions about the world in order to gain insight into users and their needs. Paired with the user interviews and our persona, filling the Empathy Map helped us to focus on the right problems to solve, and how to do that.
In order to help us interpret the data collected in the user interviews, highlight patterns and better understand our user’s behaviour we synthesized the findings in an Affinity Diagram.
The Persona
From our research, we designed a second persona. This persona is a young fashion professional looking for high-quality fashion content to stay up to date with fashion trends and get inspired.
User Journey
From interviews, we mapped pain points in the daily routine of a fashion professional. We see there opportunities to deliver an up to date content, providing ready to use content to help them in their design process and communication tools to correspond with their team.
How Might We
At this stage, we had to converge our efforts toward one problem. We voted and decided to focus on helping fashion professionals to find content on our magazine, save it and being able to use it later at work.
Benchmark Analysis
We did competitors benchmarking as a process of measuring the performance of other magazines in the business considered to be the best and most relevant in the industry. The point of benchmarking was to identify opportunities for improvement, we did a direct competitor-to-competitor comparison of their product, service, their value proposition, process, etc.
Competitors Analysis
Market Analysis:
For a long time, magazine content creators had a hard time creating a distinction between simple paper magazines and engaging online ones.
The new online magazines have the challenge to set themselves apart from paper magazines but also for other websites like social media and blogs offering a lot of personalised and engaging multi-media content. For some content consumers, particularly younger tech-savvy types, a multi-media experience is the only way to capture (and keep) their attention.
From research we got to understand that for fashion professionals, to get access to tools and complementary content that can be useful and consumed for work purposes, could satisfy even the most demanding multi-tasker user.
Therefore, we aim to be a strong competitor on the market offering high value content from trend analysing and research insights like WSGN (Worth Global Style Network) does, but within an editorial format and providing fashion professionals with a tool to make their design research process more efficient.
WSGN is considered to be the world’s trend authority in the fashion scene and since they offer a very expensive monthly subscription to their users, we aim to offer to Tendance magazine users a free subscription model. To make our businesss model sustainable we aim to make revenue throughout paid and sponsored content articles.
Also we are a different option from what is currently on the market because we offer professionals the possibility to use Tendance as a handy tool for work to gather research insights from the industry, to manage this information on the platform, share it and save with other people.
For the future we aim to focus also on the feature of creating moodboards and style guides on the platform for work purposes.
What is Tendance?
Tendance is a digital-media magazine for fashion professionals that want to discover new and better ways of surfacing fashion insights, monitor and analyse emerging trends in the fashion industry and be able to interpret current trends and use them as a source of inspiration and reliable data for work. It is the new kid on the block that aims to garner loyalty, right from professionals working in the fashion scene.
Tendance gives value to users throughout a strong analytical feature for trend analysing, throughout editorial articles and fashion stories from the fashion industry.
Tendance believes in the future and strives to provide an authoritative view on tomorrows and focuses on storytelling content that is unique, easy to save and share to collaborate with your team. It is fresh and creative editorial content that most forecasting service companies usually steer away from and this is the reason why fashion professionals tired of seeing the same content everywhere and the lack of creativity in the fashion industry could use as new source of inspiration to rely on and as a tool to make their creative journey faster, more efficient and cost-effective, where ideas can be realised and shared.
With a strong eye for details to spot and forecast trends, our fashion editors work in collaboration with experts in every major fashion cities, building locally sourced but globally relevant content, including daily trend analysis and consumer insights.
If you are a fashion enthusiast who is interested in the inside stories of what goes into making real fashion trends, setting patterns, and influencing the industry get yourself a Tendance and don’t forget to sign up for the newsletter.
Tendance’s Branding
Before jumping into the design, we defined the brand personality of our magazine. Looking at our target group, we wanted a our brand to be at the same time stylish and modern. The interface should be sober and clean with a ‘small twist’ giving to the brads its originality.
Style Guide Inspiration
We made several mood boards, exploring several designs direction: Elegant & sophisticated, Trendy, Traditional & chic or Modern & visionary.
Moodboards
We tested these four mood boards with two fashion designers. The first mood board (Elegant & sophisticated) was their first choice. We modified it according to some of their comments.
Creating consistency before starting the design
Creating a design system for a project with a duration of two weeks was a great challenge but one that brought great learnings and benefits. It made the iteration process a breeze and helped us to keep the design consistent. It demystified the misconception in which a design system limits your creativity and made once more obvious, the advantage of using one.
Anima plugin proved to be extremely useful in creating and managing the design system. The stacking, padding and pinning option offered, helped us make all the components responsive and content adaptable.
Responsive card adapting to the content
Card Sorting
We did a card sorting session with users to organize topics into categories that make would sense to them. The outcome was really helpful for us to label these groups.
Site Map
When it comes to planning our website, creating a sitemap was helpful to ensure we account for all the pages needed for the site. And creating a sitemap had so many benefits, for example to visualise the way to navigate the site for PO and developers as well, but using it also gives better visibility to search engines. As designers we will refer to the sitemap to make sure we have included all main and secondary navigation and items in the design concepts.
The Happy Flow
The user wants to gather new trends and unique fashion insights to use for work inspiration and reliable research data at work. When the user have acces to trend analyse and articles they are able to save the relevant ones on their profile account and use it for later at work.
Wireframing
We experimented with different layouts, designing at the same time the mobile and web versions. According to our user, our platform should be as graphical as a fashion magazine. So we tried to give a large space to imagery and multimedia content. We experimented with horizontal and vertical scrolling and with card layouts.
Iteration process
First iteration
We divided our magazine into three main sections:
- News: in this section, the user can read all the latest news about fashion, designers, catwalks, etc.
- Trend analyse: This section proposes a more in-depth article, analyzing the latest trends.
- Inspiration: This section gives inspiration related directly or indirectly to fashion.
In each of these sections, the articles are ordered within the subsections “featured”, “trending” or “latest articles”. We created sponsored articles in order to finance our website. These sponsored articles should be well integrated and explicit. According to our user, these sponsored articles are ‘acceptable’ since most of the paper fashion magazines have a large amount of sponsored content.
When reading an article, the user can save the article in his/her profile and organize it by folders.
Feedbacks:
- Add some more spaces in the top header between the logos and the icons.
- In the bookmark section in the user profile, add more possibilities for the user to delete or add content.
- When working as part of a team, it would be useful to see who added or edited contents within a bookmark folder.
Second iteration:
We unified some graphical elements according to our style guide and tuned down the interface to bring more visibility to the content of the website (pictures, articles). We designed further the sign in flow and the team article sharing flow.
Feedback:
- Some graphical changes are needed to bring more consistency.
- It is not clear yet how we can add team members to a folder.
- Should we use horizontal scrolling or an infinity scroll for the article feed?
Third iteration:
One of the main changes of this iteration was the introduction of the infinity scroll for the news feed. From there we ran a usability testing.
User Testing- feedback
We asked a user to accomplish the following tasks with an interactive prototype:
- Explore the website, give his/her first impression
- Read an article
- Read a sponsored article
- Bookmark an article
- Save an image
- Find back a saved article or image
- Share an article with his/her team
- Check his/her profile details
We received a large number of feedbacks. Without going into each of them, we can summarize them by the following:
The Good
- The user was very impressed by the clean interface.
- The user loved that he could save images and articles
The Bad
- He thought that the new cards in the feed should be more focussed with less text.
- When bookmarking and article while reading it, the user is asked to create a profile. This new flow interrupted the reading of the user. Obviously, the creation of the profile was not asked at the right time.
- Adding a member to a bookmark folder seemed too complicated for the user.
- The user preferred the horizontal scrolling for the sections “featured” and “trending” from the previous version of the prototype.
The Ugly
- The user got very confused with the site structure. He couldn’t tell the difference between the headers and the sub-sections (“featured”, “trending” or “latest articles”)
Mockup for the mobile version:
Mockup for the desktop version:
The Prototype
Microinteractions
In order to conduct more user testing and have a higher accuracy we then created a high-fidelity prototype. We mapped the whole user flow in Principle, but for demonstration purposes, we will share with you the most important tasks a user needs to perform on our platform:
How we made all this to happen?
In only 2.5 weeks? Well, for this project we worked together the three of us: Alex, Antoine and Karen.
We managed to have a Process logbook, where we explained how to stay organised and managed each of the tasks that had to be done for each day class and to track to which person this task was assigned. We used Miro as a tool to collaborate and work together online.
Next Steps for Tendance
From Usabilty testing we had like to focus for the next steps on the moodboard feature. User seems to be more interested in managing material on the platform like saving and sharing images rather than articles with other collaborators.
Learnings
- Such a great project once again! We have learned a lot while doing this editorial project.
- User stories were key on this project and we really got to understand how important they are to help us to keep products user-focused.
- Having a design system allowed us to keep the design consistent and be able to iterate in a much faster way. Even thought is hard work to create it and to maintain it!
