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:

Maze

GoodNotes

Coolors

Canva Color Palette Generator

Market Research

Brand Comparisons

Market Positioning

Empathize

User Persona

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

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 events

2. Have social media shareable content

3. Socialize with other creatives

4. Provide recent art and news

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

Prototype

Information Architecture and Navigation

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

User Flow Sketches

Concept Sketches

Homepage and Profile concept sketches

Low-fidelity Prototypes

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

  1. Filter News articles to view only Most Recent
  2. Subscribe to an article’s author’s public profile
  3. Write a blog
  4. Create an expo event for your upcoming art expo
  5. 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

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.

News page and Creating event

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

Mood Board

“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.

Mood Board and Mood Board Test Results

Brand Colors and Typography

60–30–10 rule

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

Desirability Test

“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

Improvements

Skills

Final Thoughts

I am a User Experience and User Interface designer with a past life as a pro track and field athlete and author. Read my novel SPRINT DREAMS on Amazon.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store