Pangyrus

UX Designer

I am actively working on this project, so the details will change often.

Overview

I am working as a UX Designer for Professor Greg Harris's website Pangyrus. Pangyrus is a website for Boston-based writers, editors, and creative professionals with a new vision who writes high-quality content on the internet. They aim to foster a community of creative individuals and organizations dedicated to art, ideas, and making culture thrive.

Organizational goals

Tools

Sketch, Invision, Photoshop, Illustrator

Timeline

3 weeks

Research

Business Model and Project Canvas

Competitors

Competitor Analysis

Who are the top competitors? Roughly how much of the market share do they have?

Name of top competitors are Grubstreet, Granta, Slate. Grub street is still growing but Granta and Slate are top publishing company and their ranks are within 100.

What is the tone of the language used on each competitor’s site? How does that differ between sites?

Their website looks professional, credible and authentic. Granta has a traditional classy look. Slate has easy, modern, friendly look. Grubstreet has professional and business type look. We want our site to be classy, professional yet friendly.

What are the differences between offerings of different competitors? Where do your offerings fit?

Grubstreet is offering class, workshops etc. Granta and Slate are traditional publishing companies so they don’t have any other offerings other than their content. My site is offering content and also interactivity like local events. So it fits between Granta, Slate and Grubstreet.

Who do you think they are targeting primarily? Is it the same as your target audience?

How are people responding to these brands (check twitter, facebook, instagram, pinterest etc.)

All these sites have a huge Twitter and Facebook followers. Slate is followed by Harvard University at twitter. They have over millions of users and daily interactions. These are established brands so people look up to their content and love reading what they post.

Elevator Pitch

Create a clean, easy to navigate, professional, secure yet friendly website for writing enthusiasts.

Empathy Maps

Personas

Logo Design

Brand Guide

Based on the profile of the business I developed the following Tone Guide.

Professor Harris (Client) prefers the color of Pangyrus logo to stay wine red (exact color code: #cf575b)

According to me the website can improve the look and feel by changing the color palate. The background can stay white as it attracts attention to the content. But the default text color should be dark grey.

Typography

Based on website's profile I selected these fonts for content.

Mental Models and Workflows

Mental Model Findings

Navigation based on Personas

Students

  1. Homepage
  2. Genre
  3. About us
  4. Submissions
  5. Contact us

Editors

  1. Homepage
  2. Genre
  3. About us
  4. Career
  5. Events
  6. Contact us

Readers

  1. Homepage
  2. Genre
  3. About us
  4. Subscribe
  5. Contact us

Scenarios for user testing

Student

You’re an English major at Harvard and you’re graduating in a year. Your advisor has suggested you start publishing your work, as it’s important for your resume. He gave you a few websites where you can get published, one of which is the Pangyrus.

  1. How can you publish your article there?
  2. How can you know more about them?
  3. Can you meet them without contacting?

Editor

You’re an editor and you have been editing for 25 years. You contribute to a few magazines in US and UK. You heard about Pangyrus in a literature event hosted by Harvard Business Review. You’re wondering if this magazine is worth to contribute. Can you find that information?

Reader

You are a working professional who likes reading. You came across an article of Pangyrus at Twitter. When you clicked the article, you liked the content and now you’re interested in reading their premium articles. How can you read them?

Mockups

Homepage

Section Page

Mobile Design

Submission Page

About us Page

User Testing Findings

  1. A lot of text for submission page.
  2. Submission Eligibility in bullets.
  3. Hyperlinked submission categories.
  4. Will submission cost me money – not entirely clear
  5. What’s a cover letter?
  6. Painful to scroll just in order to submit
  7. Is there a word limit?
  8. Do I need to submit through email?
  9. Want FAQ or call option

Observer's notes

KJ Method

Testing Scenario

You’re an English major at a Harvard and you’re graduating in a year. Your advisor has suggested you start publishing your work, as it’s important for your resume. He gave you a few websites where you can get published, one of which is the Pangyrus. How can you publish your article?

Outcomes

Submission Page

  1. Categories should be hyperlinked.
  2. FAQ, Call or Chat option should be added.
  3. Confusion about Enhanced Submission – will it cost me to submit my article?
  4. Enhanced Submission should be called ‘Submission With Editing’.
  5. Is cover letter similar to job cover letter?
  6. What are submission criterias?
  7. Do I need to submit via email? Confusion about the words written.
  8. Submission Eligibility – too much text. It should be bulleted.
  9. Who is eligible to submit?
  10. Are there any formats for submission?
  11. A lot of texts are there – too much scrolling.
  12. There should be a submit button on top.
  13. Is there a word limit on submission?

General

  1. The word ‘genre’ sounds confusing, ‘Topic’ is a better alternative.
  2. There should be a little description about genre.
  3. Events should not be a calendar as there are not too many events.

Improvements

  1. I added a new design mockup for ‘about us’ as some users wondered about the magazine before submitting.
  2. I moved the staff information from the about us page.
  3. I changed the submission categories and made them hyperlinked.
  4. I found the submission criteria in a page hidden underneath and added that
  5. Modified ‘Enhanced Submission’ and changed it to ‘Submission with Editing’.
  6. Edited the words which created confusions about the payment.
  7. Changed the cover letter and broke it down into understandable pieces.
  8. Changed the events from calendar to a picture with words format.

AHA moment

I was struggling with the design mocks for quite a while. I also found the texts there was bit eye heavy. But when I did the user testing, I realized what was the actual issue. That was my aha moment.