For this design sprint, Camille and I had 2 weeks to redesign the website of JV le Mag, an e-commerce to buy subscriptions to their magazine. Our challenge was to make the site more in line with the personality of the editorial team and to propose a range of subscriptions that would be easier to understand for users.
— The Problem
Currently, the site is used as an e-commerce site, to buy subscriptions to the magazine and related products. But the range of offers is too confusing, which creates a very low rate of new subscribers and the goodies are not highlighted enough. Moreover, there is very little information about the magazine itself, the editors and the content they create.
— Research
Business & Competitor Analysis
JV le Mag is a video game magazine that was born in 2013, created by a small team with few resources. They offer a wide variety of content in several medias (articles, podcast, twitch lives). They have a very close-knitted community that enjoys their in depth investigations, subjectivity and independence.
Readers appreciate the more in-depth investigations into the video game industry, as well as the magazine’s political subjectivity and outspokenness. The editorial team makes sure to create a safe space opens to all.
Let’s take a look at the competitors. At a time when everything is digital, JV le Mag is the “last one standing” by offering only a paper magazine and no online articles. With their more specialized and political line, JV le mag attracts a passionate, young readership with precise expectations of publication, while their competitors offer more surface articles, game tests…
Brand Position
As JV le Mag has no desire to become fully digital, we have positioned our brand in such a way as to distinguish it from its direct competitor, Canard PC. Our goal will be to highlight the specialized side of JV and to differentiate it from its competitors.
User Survey
We made a survey that we shared on JV le Mag discord, to find more about the community, 32 persons answered. Almost 80% of the respondents are men between 26 and 39 years old. For the most part, they discovered JV le mag at their beginning through the ZQSD podcast or via social networks. 76% of them have a subscription to the magazine.
User Interviews
We followed our survey with 5 interviews of regular and long time readers. We wanted to know more about their attachment to the magazine and test the actual website with them to see what could be improve.
— Define
Affinity Diagram
With our user research we realized that some themes were coming back regularly and we were able to split all our findings in an affinity diagram. We especially focus on the goals and needs of our users to find improvements to work on.
Jobs Stories & JTBD
We wrote a few jobs stories to look at our users situations and motivations and what can come out of those.
We then categorized the Jobs Stories into Jobs To Be Done to isolate the functional and emotional aspects to describe the task that customers want to achieve.
User Persona
We made a user persona, Simon, who is an intellectual with a passion for video games. He discovered JV le Mag through their twitch live stream, “Le 13/14”. He wants to know more about them and start support them.
Simon believes that sites should be infused with the same energy as the brand and is quickly frustrated by poor user experiences.
User Journey Map
With the user journey map, we tried to illustrate the actual process to buy a subscription to the magazine online. In this scenario, Simon discovers JV le Mag through their twitch stream and then goes to the website to find out more about the team. He instead found a basic site that doesn’t seem to represent the journal, with minimum infos and a confusing range of subscriptions.
Problem & Hypothesis Statement
With this research, we were able to write our problem and hypothesis statements. Right now, the offers on JV le mag website are too complex to understand and do not reflect the spirit of the magazine and the team.
The JV le Mag website was designed for users to subscribe and buy merchandise. We noticed that the offers were presented in a way that was too complex for users who did not complete the subscription process, causing a significant loss of profit to the business.
We believe that by optimising the user journey, we will achieve a better subscription rate. We will be able to confirm our hypothesis if there is a 10% increase in subscriptions in the first quarter of 2022.
How Might We
To conclude this stage, we generated 3 HMW to help define the product even further and find features and design opportunities:
HMW add value to JV le Mag website so users can have an overview of the content before making a purchase decision?
HMW simplify the subscriptions section so the user can make an easy and quick choice?
HMW highlight the team and their activities outside the magazine so that subscribers feel involved in the community?
— Ideate
MOSCOW Method
Using the MOSCOW method, we brainstormed to find the features we wanted to prioritize to make an immersive website, close to the identity of the magazine and easy to understand and navigate.
MVP
We wrote our Minimum Viable Product to determine the bare minimum goal of the website: encouraging people to subscribe and have a clear idea of the merchandise sold.
The goal of the JV le Mag website is, at the bare minimum, to transcribe the magazine’s tone of voice into an immersive experience to encourage users to subscribe. By offering simple and understandable subscription solutions, we believe we can grow our loyal and supportive user base.
Site Map
We moved to the site map, to decide on the overall structure and architecture of the website, with a homepage giving an overview of the magazine and the team, an eshop regrouping all the merchandise and a customisable step by step subscription process.
User Stories & User Flow
We wrote a few user stories to describe the core need of our users when trying to buy a subscription:
As a fan of video games and pop culture, I want to subscribe to a magazine that is committed and reflects me so that I can get involved and support them in the long term.
As a future subscriber, I want a subscription page that is easy to understand so that I can make a quick and efficient choice.
As a curious person who has just discovered JV le Mag, I want to have an overview of the magazine, its values and its team so that I can identify with them before subscribing.
As a follower of JV le Mag, I want to be able to see at a glance if they are live on Twitch so I can follow their shows and news.
We then created the user flow to clearly see all the steps they will go through, from the moment they enter the website, to the order confirmation page.
Concept Sketches
We divided the concept sketches between the two of us and we tested with five users. With the answers we were able to understand the key problems in our first draft. We iterated to make adjustements and moved to the mid-fidelity wireframe.
Mid-Fidelity Wireframe
We moved on to the next stage, the mid fidelity wireframe. Whad them tested and learned several lessons to optimise our user journey. For example, making a grid of images is good, making it understandable is better and an e-shop does not always have the product in the header.
— Visual Design
Visual Competitor Analysis
A visual competitor analysis helped us gather insights for design and functionality.
We realized that the competitors have a relatively similar graphic design, using the same tones: red, orange, yellow (sometimes more than one) and very simple neutral tones, black and gray.
Only Canard PC stands out by using very saturated and psychedelic colors.
Our goal being to stand out from the competitors, we decided to start with a more limited and coherent palette and a more modern and refined design and layout.
Moodboard & Brand Attributes
It took us some time to create our moodboard because we were too focused on the structure of the website rather than the visual design or art direction we wanted to take. We finally found inspiration in graphic and modern visuals, with bright and fresh colors. We also wanted to keep a little retro touch.
We created brand attributes and tested our moodboard with 10 users. Our objective was to see if our moodboard conveyed the desired atmosphere and if it was consistent with our brand attributes.
Style Tile
For the style of the website, we opted for bright but yet soft colors, so it can be pleasant to the eye, directly inspired by the colors of a Nintendo controller.
We chose rounded shapes to support the fun and light side of the magazine. To balance that light atmosphere, we picked a rounded but serious and easy to read font, Karla, that goes especially well with magazine articles.
We agremented the rest of the design with some Memphis patterns, to accentuate and highlight the products.
And last but not least, we decided to reserve a special role to the mascot of the magazine, Jean Vidéo, that we tuned a little to suit our brand new design.
Before / After
On the original site, there was a problem with the subscriptions page. It wasn’t clear, there were 9 offers in total. We put everything on one page, with only 4 options and a step-by-step process to customize the 11 months subscription.
One of the strengths of JV is their illustrations and the initial grids did not show them off at all. Also, it was difficult to navigate as there were nearly seventy magazines with no filter or search options. We reorganised the grid so that it is formed according to the user’s choices using the search bar or the filters. The biggest frames are special editions.
Design Iterations
Creating a shape of header that suited us was probably one of the hardest steps. It’s the first thing you see, so it had to reflect our thinking and work so far.
Luckily, a little hard work and a few short nights allowed us to find something in line with our guidelines. We decided to use the illustration of the magazine’s anthology to create impact and put you directly in the mood of the magazine. This way, long-time fans know exactly where they are and newcomers get a glimpse into the spirit of the magazine and the team.
High-fidelity prototype
Finally it’s time to show you the final design.
We created a more immersive homepage, with an overview of the team, merchandising and an exclusive free read for potential new subscribers.
We simplified the e-shop section, creating a grid to showcase past magazines.
For the subscription, we designed a step-by-step solution. Instead of 11 different options, the user can choose one of 4, then customize it by adding books from JV le Mag.
You can test the full prototype here.
— Next Steps
We still have a lot to do on this project.
We would like to design an about page to present the team and the history of the magazine in more details, as well as the profile page, order history and user’s parameters.
We want to enrich the design system to collaborate more efficiently with the front-end developers and add more of JV le Mag’s own illustration in the different headers.
And finally we would like to take the project to the next level by creating a mobile app.
— Key Learnings
It was my second project working with Camille and just like the first one, everything went smoothely.
I had the opportunity to deepen my Figma practice and challenge my creativity by rethinking an entire subscription process (not the sexiest thing to design!).
The hardest part of the project was the header. We did a lot of iterations to create something original, that catches the eye, sets the mood and makes you want to scroll.
At first, we also didn’t have all the resources we needed, like artwork, and our first design had a lot more Memphis patterns, which didn’t fit the personality of JV the Mag. We also had to modify a bit the mascot of the magazine, Jean Video, to fit better with our design and color scheme.
But luckily, we have an amazing client, Sophie, who totally trusted us and gave us carte blanche. In the end, this is the most important asset in a project: to be able to take the time to try, to make mistakes, to start over.
Camille and I will continue to work with Sophie to finish designing the entire site. We hope to be able to accompany this brand new identity and see it come to life very soon!
Thank you for reading and stay tuned!
