Ironhack Project 4: Editorial

Brad Perlman
Bootcamp
Published in
5 min readApr 19, 2022
MONA Logo

Just about halfway done with Ironhack’s UX/UI bootcamp, we have completed week 4’s project. The project for this week was to create a fashion editorial for a user persona that was provided for us at the start. Our user persona was Candice, a 28-year-old trend seeker who loves to read fasion magazines in her free time to gain inspiration and stay on top of the newest, hottest trends.

Candice (User Persona)

Because we were given our user persona to begin with, we wanted to conduct some additional user research to learn more and further understand our target audience. We created a survey of 8 questions that received 19 responses in just a few hours.

Some takeaways from our survey are:

  • 68.4% of users are females.
  • 63.2% of users’ age range is 18–29 years old.
  • 47.4% of users never read fashion magazines, while 26.3% read them monthly, and 21.1% read them yearly.
  • The most popular fashion magazines among our users are Vogue, Elle, and GQ.
  • Users love seeing fashion trends, clothes, pictures, and clean design.
  • Users get frustrated by current navigation processes and not being able to find the content they were looking for

To organize our findings, we created an affinity diagram and made our empathy map based on our user persona.

Affinity Diagram
Empathy Map

After collecting the data going over them as a group, we then proceeded to conduct a visual competitive analysis, a SWOT analysis, and moodboards for Vogue, Elle, and GQ. From the analyses, we were able to take note of reoccurring themes, content, and other principles throughout the different websites.

Moodboards for Vogue, Elle, and GQ

Once finished with the competitive analysis, we made a journey map for our user persona. By doing this, we were able to pinpoint her frustrations and pain points, while we also jotted down possible changes that can use to our advantage as we design our website.

User Journey Map

This ultimately brought us to our problem statement: Trend seekers and fashion lovers are not meeting their needs of easily finding relevant articles that they want to read.

And thus, we came up with our How Might We statement, which is: How might we facilitate the navigation process through the online magazine to easily find the exact content users want to see?

The result of this was creating a simple user story and user flow that showcased the users’ process as they used our website.

The user story is: As a trend-seeker, I want to quickly and easily find articles on the latest fashion trends so that I can gain inspiration and share fashion tips with friends and followers.

User Flow

Once this was finished, we were ready to start prototyping. We started off by having each group member create their own lo-fi mockups so that we can come together and go over them to decide which ideas we wanted to combine and continue with. We decided to start with the desktop version first, as we talked about how it might be easier to downscale rather than upscale. This was a super valuable process that provided us with a great foundation for the mid-fi prototype. Additionally, we created a list of design goal notes that we used as guidelines moving forward.

Group Lo-Fi Mockups

During our mid-fi prototype, we made sure to use Figma’s layout grid feature that allowed us to create a clean and organize layout. Also, during this stage is when we created our prototypes for tablet and mobile too.

Mid-Fi Prototypes for Desktop, Tablet, and Mobile

Finally, we created our hi-fi prototypes for every device. We were able to achieve this rather quickly because our mid-fi was very organized. What took the most amount of time was creating our components and placing them where the old placeholders originally were. So personal lesson learned: create components early on, as it will save you a bunch of time in the long run.

Desktop Hi-Fi Prototype
Tablet Hi-Fi Prototypes
Mobile Hi-Fi Prototype (extended due to horizontal scrolling)

As always, you can check out the prototype here. Please let me know what you think in the comments!

Before we conclude, here is our Style Guide:

Mona Style Guide

Key Takeaways

To conclude, my main takeaway from this week is this:

Components are key — making these early on will be extremely helpful and save you a bunch of time in the long run.

I will definitely be way more aware of this moving forward, and I am very happy that I learned all about them early in my career.

--

--

Brad Perlman
Bootcamp
Writer for

I’m a UX/UI Designer with a background in Game Design. Check out my portfolio here: https://bradperlman.com/