A Place for Tradecraft and Art— UX Case Study
Forge is an online editorial where Tradecraft meets Art to foster cross-disciplinary connections
Ironhack- Project 4
Project Scope: Mobile-First Online Editorial Concept
Timeline: 4 Day Design Sprint
Roles: UX/UI Designer
Challenge
During our fourth design sprint at Ironhack, we worked individually over four days to design a responsive online platform for a magazine, newspaper or blog that would meet the needs and goals of one of the pre-determined User Personas.
This was an exciting project for several reasons. This was the first challenge where we met our Primary User in advance rather than discovering them through research. There would still be a lot of leg-work to dive into a deeper understanding of that User’s tribe, but starting with a gateway into the community was something we had yet to experience.
There were five potential personas to choose from, each fitting a different archetype. I wanted to challenge myself for this project starting with the persona I selected. I selected Paula, the young, laidback creative who wants to be a part of the art scene.
I started by critically reviewing her persona to see where I could provide value by meeting her unmet needs. I could see that her current reading habits centered around cultural zines with a focus on pop-culture and events. Based on her mental model, my initial idea was to create an editorial e-magazine with a focus on artists and their processes. This would bridge the gap between her goals and her frequently consumed publications.
Discovery Phase
Business Analysis
I started this sprint by gaining an understanding of competitors in my marketplace and what my user would be expecting in an art editorial. To do this, I researched some of the top competitors in the space I had selected, the Art Scene. Discovering the potential competitors was my first challenge as I had to research the community first. I used Google, Instagram, and art/design blogs as resources to determine which magazines were most prominent and influential in the artistic community. From this research, I was able to determine three competitors in the space: Cereal, Kinfolk, and Cultured.
I dove deep into each of the competitor websites to gain an understanding of Paula’s mental model for these online magazines. For this stage of research, I was looking for content, features, and visual layout. I found that the websites had many shared characteristics. Their layouts were clean, used a similar taxonomy, and focused on traditional artistic ventures. Each publication had some unique extra features that helped them stand out from one another, Cereal’s seasonal playlists were particularly interesting to me. After conducting my analysis, I could see that there were a massive number of features for each magazine. I created a large comparison chart, then I distilled this into the four most relevant design opportunities for my soon-to-be-developed magazine.
After this, I created a market positioning chart to determine the Blue Ocean of opportunity for my editorial. Determining the axes for my market positioning charts is always a little difficult for me. It is not enough, for my style of research, to simply place them on a traditional-innovative axis. This should, of course, be taken into consideration, however, it is not as detailed as I would like. When determining my axes for this project, I turned to the data from my research. Some of the magazines had a barrier to entry, such as a paywall, limiting access to the online versions of the magazine. This gave me one axis: Inclusive-Exclusive. I then looked at the content being covered by the magazines. The content of these magazines tended to be in the realm of traditional arts with a few branching out into other areas. This gave me my other axis: Cross-Disciplinary -Focus-Specific.
By placing each of my competitors into the chart based on those variables, I was able to get a visual understanding of where there was an opportunity within the existing marketplace.
User Research
Despite having a pre-selected User Persona, it was still necessary to GOOB (Get Out Of the Building) and speak with other users to develop a more thorough mental model for my editorial’s target audience.
I conducted 7 guerilla-style interviews and sent out a survey that yielded 13 responses. The data uncovered in the discovery phase was compelling. Based on my original user-persona I had chosen to create an editorial focused on the arts. However, after synthesizing the data through affinity mapping, I could see that my users’ unmet needs lay in a slightly different direction.
“I read these editorials because the content interests me and it’s relevant to the field I work in.”
“I definitely feel inspired and maybe a little envious. Not a bad envy, more like it motivates me to do more.”
“I like it when it looks like care went into the work. That’s when you know that the creator enjoys what they are doing.”
“Novels for narrative purposes. Blogs based off the industry which I am a part of and comic books because they are an interest of mine. And the New Yorker because I want to be more cultured.”
➤ 60% of users read blogs or editorials that have content that aligns with their interests.
➤ 60% sought sources that had a variety of topics.
➤ 50% returned to a source because they found the layout engaging.
➤ 45.5% returned to these same sources 2 or more times a week.
➤ 100% interacted with these sources exclusively via their mobile devices.
➤ 100% referenced Instagram as the main source of news and entertainment.
The most important data from this stage of discovery was the motivations of my users for reading online periodicals. My users made it clear that they had very little free time for reading daily. They devoted this time to articles that were informative, cultural, and industry-based. For inspiration, they wanted to see step-by-step processes in photos or videos so that they could follow along easily or be motivated to advance their practices. This meant that the content they interacted with needed to be relevant to their industry, cover a variety of topics, and optimized for mobile devices.
Define Stage
I synthesized the data from discovery and identified user pains and gains. I utilized the value proposition canvas to find my product-market fit to ensure my editorial would add value to the consumer.
Ideation
I have to admit, I hit a major roadblock around the ideation phase of this design sprint. I focused on bringing Paula and her tribe an art-based editorial. Yet, my other users were guiding me away from that original idea. I knew that for my editorial to be successful in the market, I needed to strike a balance between the world of traditional arts and careers in a way that would keep my users engaged, informed and entertained.
I was feeling genuinely lost. I knew what my users were telling me and I knew there had to be a way to align their needs with Paula’s and transmute that into an online editorial. When this happens, there is only one thing to do: TRUST THE PROCESS!
I used all the artifacts in the UX toolbox and finished with the MoSCoW method. Using the MoSCoW chart, and the help of our amazing TA, Nicole Matos, I was able to determine my MVP:
A mobile-first website for users that has online articles, videos, and the ability to indicate the user’s industry and see tangentially related content.
What originally presented as a roadblock, became a stepping stone to a more fully developed product. What I had been missing, was the connection between website, concept, and user. After examining the data, I had pivoted the concept of my editorial to something that would answer the unmet needs of my users through the content as well as the medium.
Forge transitioned from an art periodical into a hybrid editorial-trade-magazine focused on creativity and process. It would be a fully customizable experience focusing on the artistry that lies at the heart of every craft with in-depth articles and videos of the artisan and their process. Paula and her tribe would be able to customize their profile to show content specifically geared to their interests and industries. They would be able to further curate their experience by indicating a preference for tangentially or obscurely related content, meaning that they would be shown content related to their industry that they may never have interacted with or they could choose to simply explore different crafts that they would not normally encounter.
I’ll be honest, this final concept was one that excited me. One of my passions is fostering deeper connections, and Forge would be able to do just that. In addition to seeing relevant content with detailed processes, readers of Forge would see that every industry, at its heart, is an art form. It would remind the reader that everything they encounter in daily life has been created, designed, and cared for before it ever reaches their hands. The fact that the data I collected through research led me to this idea truly blows me away and has shown me how powerful the entire UX process can be.
Design Phase
Interaction Design (IxD)
Now that I had determined my MVP, it was time to develop the information architecture that would allow my users to navigate the site with ease. Given the time constraints of the design sprint, I selected one happy path for my users to help me determine the most necessary screens. I then made a site map to help me determine the best layout for these screens.
After working through my IxD, I began prototyping. I started with a low fidelity prototype to quickly test my design. Using my happy path and site-map as a base, I quickly created the most necessary screens and tested with real users.
Lo-Fi Prototype
Using the Marvel App, I conducted 6 User tests of my lo-fi prototype. I gave each user this prompt:
Find a brewing article, read it, watch the video, and then explore more content. After that, navigate to your profile page.
➤ 100% of testers completed the prompt in under one minute.
➤ 30% of testers had a high misclick rate.
➤ Issue 1: The location of the “Watch” button below the article on the article page
➤ Issue 2: The proximity of the “More Like This” header and the “Random Explore” button on the video page.
➤ Issue 3: 3 of 6 users clicked through on the home page without understanding that the article topic.
This initial stage of testing confirmed that my user flow was intuitive. However, there were three areas that caused my users to misclick. Moving into the mid-fi prototype, I made a few changes to reduce friction at those points in the user flow.
Mid-FI Prototype
I tested my mid-fidelity prototype with 5 users using Adobe xD’s built-in prototyping feature. I found that my changes had reduced friction throughout the flow. I had a 100% success rate with the only misclicks being at the video screen. All of my users wanted to press play, which is both understandable and accurate. However, at this stage of prototyping, I did not have that functionality set-up.
Now that I had tested my prototypes and fixed the known issues, I moved into developing the visual presentation of the magazine.
Visual Competitive analysis
I returned to my competitor research to conduct a visual analysis that would provide me with a base for my platform. Each of my competitors used spartan layouts focusing on one image for each article with a clean background. This aesthetic method encouraged the user to focus on the articles without distraction. The landing pages were set-up with a long scroll format for featured articles. The color palettes were largely black and white with hues of gray. From this analysis, I was able to identify my users’ visual expectations and to find opportunities for making my editorial stand out from the others.
Brand Identity
The next step was to determine Forge’s brand attributes. I would keep these key-words at the forefront of my design process and ensure that my design reflected those ideals. My editorial focused on the artistry and process behind a craft. I wanted to reflect that with my attributes. To do this, I thought of brewers, woodworkers, sculptors, and other crafts. I thought about their workspaces, the look and feel of the process before, during, and after. I thought of how an artist can lose themselves in the process and how they feel when looking at their finished work. Based on this, I selected Honest, Approachable, Cool, Imaginative, & Down-to-Earth as my brand attributes.
In my interviews and surveys, I had asked each user which colors they connected with the most. I combined these with my brand attributes to develop a data-driven color palette of autumnal shades with black, white, and green. Then, I created a mood board to help me align with the vision of Forge. I searched for images that spoke to the process and tied these into the color palette.
I conducted desirability testing with 13 users. The response to my first mood largely aligned with my brand attributes. Responses yielded attributes such as Creative, Earthy, Hand-crafted, and Discovery. However, 3 users had unexpected reactions. When asked to give their initial impressions, they gave responses such as Lost, Sad, Lonely, Dark, and Hospital.
The mixed data led me to redesign my mood board. My users had brought my attention to a flaw in my design thinking. The creative process is vibrant and messy, not clean and subdued. For my first board, I had leaned heavily on black and white as it lined up with my competitor analysis and user data. For my second board, I chose to lean more into the colorful side making it more visually stimulating. I tested this mood board with 6 users and all responded with attributes that aligned with my brand identity.
Delivery Phase
Visual Design Documentation
After testing, I moved forward in my design process and create my style tile. The most difficult part of developing the style tile for me was finding a font for my logo that embodied the idea of Forge. After extensive searching, I found the Amerika font family which had the look and feel of metal-work, craft, and industry. This had a look and feel that made me think of Forge, I tested this and two other fonts with 6 users, and all chose Amerika.
Hi-Fidelity Prototype
I had used the Atomic Design principle when creating my mid-fidelity prototype which helped me significantly cut down on the time needed to advance to the hi-fidelity stage. By using this method, I had spent a full day making my mid-fidelity frames and then my high-fidelity changes took less than an hour to finalize. AMAZING! All I had to do was use my style tile as a guide to update the colors and fonts. Then, I replaced placeholder imagery with hi-fidelity images and updated placeholder text to dummy copy.
One of my greatest joys in the prototyping phase is writing dummy copy. As a designer, I understand that dummy text won’t make or break a prototype but, as a copywriter and copyeditor, wordsmithery is my happy place.
I then used Adobe xD’s built-in animation tool to create micro-interactions that would make changes more visible and provide visual feedback for user actions.
Next Steps
While my prototypes were complete and the sprint was at an end, I had a few other things to consider. Forge was a complete concept, but it would need continued work and iterations. For the next steps, I would like to add onboarding to help new site visitors understand how to use their customization tools. I would also like to update the UI to meet a higher visual standard.
I also determined the next steps for Forge itself. These would include monetization through affiliate links, a social forum for communicating with creators, and a refined layout based on continued user testing. In addition to my next steps, I also determined some metrics for measuring Forge’s success in the marketplace. These metrics include the number of habitual users, created profiles, and exit rates.
Key Learnings
At the end of this design sprint, came a wave of relief. I had spent four days researching, prototyping, testing, and designing. The work was incredibly challenging and insanely rewarding. As I wrote this case study, I was able to look at this project with renewed excitement and gratitude.
I had trusted the UX process and used those methodologies to meet my user’s needs. The concept thoroughly resonated with its tribe and is something that would engage and connect users from a variety of backgrounds.
This is a project that I would love to see come to life.
Thank you for taking the time to read through my UX case study. I would love to hear your thoughts on this case study. Leave me some feedback or connect with me on LinkedIn.
