Beety Editorial Design (Ironhack Chronicles 2021)
For this project, I was paired with another designer to design a responsive editorial website for creatives.
Tools used:
Figma
Maze
GoodNotes
Coolors
Canva Color Palette Generator
Market Research
Brand Comparisons
To gain a better understanding of the industry, I researched editorial websites popular for providing content for creatives. This included Rolling Stone, Vice Magazine, and Repeller. In our brand comparison and feature analysis, we determined the strengths and weaknesses of our well-known competitors. While all of the brands covered politics in some capacity, the brands lacked in creating a space for new and upcoming creatives to share their thoughts, knowledge, work and events. In addition, as video and audio becomes more popular, I found the three brands had little video content. Finally, we found some similarities in design and information architecture and navigation that my team kept in consideration in future ideation.
Market Positioning
After our brand comparison, my teammate and I took a unique approach to the traditional market positioning analysis. Because the brands had major differences in content and writing style, we positioned Rolling Stone, Repeller and Vice based on their strengths in four key content topics (politics, news, entertainment and art). While this was helpful to determine which two topics each competitor highlights, for future research, it would be best to include additional traditional market positioning maps where the brands are all compared to the same criteria. Although there were setbacks to our approach of market positioning, this allowed us to determine where we wanted our brand to differentiate in content.
Empathize
User Persona
We were given details regarding our user persona prior to the project.
Meet Paula
- She reads Vice, Rolling Stone, Man Repeller, and other webzines.
- She wants to be an artist and connect with people (and aliens if they want to) around the world.
- She reads voraciously, everywhere, anywhere. In bed, public transportation, with friends, out loud, for her projects, etc.
- Goals: be cool and achieve her dreams. Read the most influential authors from her time to show off on Instagram. Have her first expo soon to start being “someone” in the art scene.
In addition to the details provided, I conducted a guerrilla interview with a creative in order to discover any additional goals and/or pain points not clearly conveyed in the provided user persona. Some of the insight reinforced information previously provided. This includes an interest to connect with other creatives and the high value of social media for creative inspiration.
“I mostly get it [inspiration] from people which makes the pandemic kind of hard. Absorbing media…observing people. I like to stay on top of trends.”
“I draw a lot of different things. Primarily black women. I like to use a lot of colors, like fluidity. I like something that is a statement piece.”
Ideation
Minimal Viable Product
With this information, I guided the establishment of the MVP statement.
The user needs a digital platform where they can access trending and consistent information regarding art and news and communicate with other creatives.
The platform must include the following:
1. Provide updates on events by upcoming creative expos and events2. Have social media shareable content
3. Socialize with other creatives
4. Provide recent art and news
User Stories
User stories aided in defining the multitude of tasks that users need to accomplish on our platform in order to accomplish their goals. Below are examples of the my user stories:
As a creative, I want to read art-related articles, so that I can learn about my favorite artists.
As a creative, I want to have a profile, so that I can have a space to showcase my work to the public.
As a creative, I want to read blogs, so that I can learn directly from other influential artists.
As a creative, I want to view other artists’ work, so that I can share their work on my Instagram profile.
As a creative, I want to create events, so that I can have a space to announce my upcoming expos.
As a creative, I want to subscribe to other creatives profiles, so that I can support them monetarily.
MOSCOW Method
Once I defined the user’s goals and unaddressed pain points from the provided user persona and guerrilla interview, my project partner and I brainstormed numerous solutions to satisfy the requirements of the MVP statement. My teammate and I then categorized our ideas using the MOSCOW method based on what would be feasible within tight time constraints.
Prototype
Information Architecture and Navigation
Looking at our competitor feature comparison and brand comparison, we used discovered mental models and found opportunities to create the sitemap. Being consistent with our market positioning map, we emphasized our content to primarily include content regarding art and news. Being consistent with our must-have features listed in our MOSCOW method, we included a profile login that included features that emphasize sharing content and news within a community. Our sitemap aided in determining the Information Architecture and how users will navigate throughout our platform to fulfill the user stories.
User Flows
Our user flows were created using primarily information gained from our user stories and sitemap. Below are examples of our user flows.
User Flow 1: Announcing upcoming expos
User Flow 2: Sharing content from another person’s account onto social media
User Flow 3: Subscribe to other creatives’ profiles
User Flow 4: Writing a new blog
Concept Sketches
Once we determined how user’s will navigate throughout our website, we conducted a Crazy 8 brainstorming session to develop concept sketches for key pages. Here are examples of the concept sketches for the Homepage and Profile that I created using inspiration from competitor platforms as well as platforms including Medium and Patreon. My concept sketches were eventually the selected starting point of our platform’s layout.
Low-fidelity Prototypes
Design
After dividing low-fidelity responsibilities, I created low-fidelity prototypes for the following flows and pages:
User Flow 1: Announcing upcoming expos
User Flow 2: Writing a new blog
Homepage
News Section
Music Section
Writing an article
Usability Test
In an informal, observational usability test with two user participants, I gained helpful feedback regarding flaws in the low-fidelity prototype. Below were the tasks that I had the responsibility of typing for test participants to complete:
- Filter News articles to view only Most Recent
- Subscribe to an article’s author’s public profile
- Write a blog
- Create an expo event for your upcoming art expo
- Read an article about news related to art
In addition to the above tasks, I also asked participants the following questions:
Did you find any difficulties with any of the tasks?
Do you have any preferred editorial platforms the you enjoy interacting with? Why those platforms? Why none?
When you think of art, what words or thoughts come to mind?
Some feedback received included confusions regarding the website content itself where the user was confused with determine the difference between “News” content and “Art” content.
“Looking at home screen, I didn’t know what it was. It is obvious content. The top part above the fold says new articles with featured and sub featured. That made sense. Scrolling down, I assumed it was the same thing but not as featured. The ‘Art’ …are the news stories about art? When I think ‘art’ I don’t think of news as one and art as another but not having the same content. It seems each one is the same type of content but different categories. So it made me curious about what would the content be?”
Subscribing to another creative’s profile was also confusing for the user.
“When I think of people and community, you’re used to following them…I think I am okay with the word subscribed..but this makes me think of if I am hiring like a developer to fix a page…I don’t know how this would relate to how we would follow someone like on social media…I am curious to know what these levels are.”
Finally, a consistent issue that arose was the use of confusing language throughout the website including labeling the link to announcing an art expo and creating a new blog post.
Mid- fidelity Prototype
Usability Test
I had the responsibility of creating the mid-fidelity prototypes for the flow for creating an art expo event. Taking the user feedback from the low-fidelity usability tests into account, I added a breadcrumbs progress bar.
However, some additional problems were brought to my team’s attention. Aside from typos, users consistently found difficulty in determining how to find an artist’s profile.
User Insight
“How you going to like or share but you ain’t even read it? I guess that’s the real world.”
“I didn’t click the profile first, I clicked the article to get to the profile.”
“The difference between follow and subscribe needs clarity.”
“[Creating an expo event] Flow was explanatory but where does that show up? In gallery? Where can I see my events? Expos are not on drafts.”
Branding
Visual Competitive Analysis
To determine our brand’s visual design, we first conducted a visual competitive analysis between our competitors, Repeller, Rolling Stone, and Vice. In this visual competitive analysis, we found that Rolling Stone and Vice kept their branding simple with two to three primary colors and news-related images while Repeller used a variety of muted colors matched with eclectic imagery.
Mood Board
In the low-fidelity usability test, one participant shared the following thoughts below when asked about their connotation of the word “art.”
“Creative”
“Designed”
“Intentional as opposed to an accident where paint was poured on something”
In addition to this insight, I also created the below brand statement for the brand.
[Falcon] is bold and inviting but never reserved.
I took on the responsibility of determining our brand personality by first using words used in the brand statement for our primary branding and determining associated words.
Following our brand personality, my teammate and I then created a mood board which was tested in a roundtable where research participants shared words that came to mind when looking at our mood board. I then recorded the results in a list of words. Based on the results from our mood board test, the use of bright colors, eclectic and random imagery, and art pieces that depict culture accurately represent our previously determined brand personality.
Brand Colors and Typography
To continue with the imaginative and inviting personality of our brand, my teammate and I determined our primary, accent, neutral and semantic colors. I suggested the use of Canva’s Palette Generator which gave us our decided orange color. Once those colors were determined, I decided to apply the 60–30–10 rule to determine our background colors, link colors, and font colors. In addition, I had the responsibility of determining the typography. I decided to select a handwritten Quite Magical font to convey an inviting feeling and paired with Poppins.
Once our brand personality, brand colors and typography were selected, I had the responsibility of brainstorming a number of brand names until we decided on the name Beety to replace our placeholder brand name, Falcon. Because our brand caters to artistic individuals and creatives, I thought of various words associated with art. Some other names included “Boldr” “Imaginee” “Creatve” “CreateSpace” and “Artbrd.” Two words in particular that came to mind were “Beauty” and “Pretty.” Combining these words, I came up with our brand name, Beety, which also sounds fun and inviting. With our brand personality established, I created a style tile to best convey the look and feel of our platform.
Hi-fidelity Prototype
Once we established our branding, my teammate and I started the high fidelity prototypes. I took on the responsibility of designing the high fidelity prototypes for the homepage, music page, most recent music page, news page, political news page, and the profile pages for users. I also created the high fidelity screens for the flow for creating a new expo event and the flow for writing a blog post. Taking feedback from the mid-fidelity usability tests, I removed the like and share button from the article thumbnail. In addition, I changed the “Message” and “Follow” call-to-actions in the profile pages to links while keeping the “Subscribe” call-to-action as a button in order to indicate content hierarchy and emphasize importance of tasks.
Desirability Test
Following our high fidelity prototypes, my partner and I conducted a desirability test with five users using Microsoft’s reaction cards. After showing my high fidelity screens for the home page, music page, news page and profile page, users shared five words that resonated most with them. While our brand words were bold, inviting, up-to-date and imaginative, we received a variety of descriptive words. Words that were repeated included “attractive,” “engaging” and “fresh”. Many of the users commented positively on the bright colors as well as emphasized the platform as intuitive and clean, which worked in hand with our modern brand personality.
“Page is pretty effective. I like your layout. It seems to find what you need on the page. I like that the categories have sub-categories. It almost feels like Yahoo and Yahoo I use to read a lot of articles. It looks credible.”
I love how it is simplistic. It breathes room for the images to pop. Nothing is fighting with each other. I like the profile page because you can set the banner and easily view the gallery or blog. She [persona] can show off how knowledgeable she is.
Reflection
Tool and Techniques
While I tend to lean towards projects related to UX design rather than UI, I thoroughly enjoyed incorporating my prior Marketing knowledge into this design project. In addition, I learned helpful visual design techniques and tools to more easily determine a brand’s personality including its brand colors, and typography. Also, learning about style stiles, style guides and design systems will benefit me for future projects. I enjoyed the visual appeal of style tiles when presenting the possible look and feel of a platform to stakeholders. To add to determining colors, I greatly enjoyed using the website, Coolors and Canva’s image color picker to determine color palettes.
Improvements
While I am proud of the final project, I would have liked to incorporate more use of Figma’s grid layout feature. While I like the clean and spacious look of the final design, I would have liked to play with geometric shapes to add more randomness and boldness into the design. Following randomness, I would have liked to use different but similar layouts throughout the website rather than keeping to one layout for the home page, music page, art page and news page. I would have also liked to have used more interactive elements including hover buttons and animations for the images. I would have liked to have taken the time to re-evaluate the sitemap to better implement the navigation between a user’s profile and the general home page. Finally, in regards to team dynamics, I see room for improvement in different teamwork structures. While I typically prefer breaking apart large project deliverables into individual responsibilities, I found myself in a different position where I sometimes worked on smaller deliverables with my teammate to make sure our expectations are aligned. For future group projects, I would like to explore more versions of teamwork.
Skills
While there is always room to learn more in my UI skills, I found that my UX skills greatly impacted my final UI project positively both in the final design and in my team. First, as a storyteller, following the story of my design was incredibly helpful. I made sure to incorporate what I learned throughout each iterative step of my design process. Second, my listening and research skills led to helpful improvements. I used direct quotes, suggestions and comments from participants to include or remove features of the Beety platform. This led to a final design that was described by users as “effective” and “efficient”. I felt great satisfaction when a participant shared, “I feel so heard,” when they saw a suggestion they made for the redesign of the platform implemented in a later prototype. My listening and research skills also shined when conducting the desirability test. Because an issue occurred in which my partner and I were not able to verbally explain the directions of the desirability test to participants, I took on the responsibility of writing out the directions to share with participants.
Final Thoughts
Overall, I am excited to implement these skills, techniques and tools in future projects. As a designer, I enjoy being presented with problems that can be solved in a multitude of ways.
