Writing Primer: Case Study Article Development


Writing an article for the Portfolio Review is not a difficult task; however, doing so, does take time and effort to get effective results. Moreover, Digital Media students need to understand that writing is an essential part of their profession, and communicating in written and visual form specifically, is a critical skill. Learn to embrace it!

Most students who take this aspect of their education seriously have come to the realization that writing about project successes, and even failures, as well as sharing information with other like-minded professionals, can be an empowering and an essential element to their future careers. Thus, take it in stride: writing is requisite to graduation -

For this primer, I have written the article in a way that can provide students with a general direction for developing a consistent, highly in-depth, and visually rich experience within a properly structured article; one that can capture the essence of the content and provide the reader with an informative experience.

Below is a series of information to orient students as they begin their article development. Compare the elements outlined with the Designing Seamless iBook Backgrounds for Better UX Experiences article to identify some of the characteristics that make reading experience informative. In addition, the example and information is designed to get students started. There are many ways to organize and present a story — be creative and focused and the story will work its way out.

Focus on What Matters

From an article by Geunbae “GB” Lee entitled “How to Structure Your First UX Design Portfolio” I used the information to blend with my own points toward the end.

“After considering what Geunbae Lee wrote, he really nailed some of the key points we think students should consider as they write about academic and personal projects within the discipline. He outlined specific items, that when properly written into an article, can focus project elements within a document, in a clear and concise structure.”

He suggests as consideration:

  • Purpose of the project — why is it that you started this project
  • Objective — what you accomplished, what were the deliverables
  • Approach — how you accomplished, steps taken
  • Project duration — is it recent, how long did it take
  • Group members — names (or/and links to their LinkedIn profiles)
  • Your role — important when telling a story during an interview (how you contributed to the team)
  • Links — download app, view poster, view prototype, data sourceetc
  • Final product show case — pictures/videos (overview)

Geunbae’s list is key to structuring an article effectively. Obviously the goal is on telling a story, so be creative with the list. Be sure to inform the reader, which in this case, may be a faculty member for Portfolio Review, or a potential employer. It doesn't really matter, the point is to point out why the project is worthy of a read and why your skills set you apart from others? Oh, and what matters most? Simple. The content must be chuck-full of details!

Demonstrate Process

Most importantly, Geunbae also includes a fantastic reminder list of UX Processes to be used in the written material. Yes, we’re preaching to the choir, but let’s consider his points. He stated the following–

“This is probably the most important section to MUST have. If your project followed a UX process, I suggest you to explain it thoroughly but in a condensed form. The viewer should be able to follow through your footsteps by taking a look at…”

He then makes the following points:

  • Research — paper reviews, competitive analysis, interviews, contextual inquiries, surveys etc
  • Ideation — brainstorming, diverging and converging on ideas, customer journey, persona etc
  • Wireframe — ideas, sketches, brainstorming, what worked and what didn’t, testing results, iterations
  • Design — fleshed out design, test/feedback, iterations, final design
  • Prototype — user testing, iteration, towards development (if you did)

“Including related pictures of you and your team doing a design challenge, drawing wireframes, having user testing sessions and the iterated designs are all very important things to include..”

Did you catch all that? What a fantastic set of points to consider in article development, let alone on an entire portfolio. Right? Seriously, every student in the Web Design & Development degree have been introduced to these elements — use them.

Just to be clear, an article does not necessarily need to have all of these elements — just be wise about inlcuding them so that the information is as complete as possible.

Using the Example

Here are some additional details in addition to Geunbae’s amazing list as it relates to getting content fleshed out.

  • Think visually first. We’re designers or developers, not writers by trade. Focus on piecing the story together by assembling the visual materials to find the story. Once the story comes into view, start writing to it specifically using body text, captions, and pull quotes.
  • Utilize technical information to make explanations more meaningful. This might include resolution settings, hex color charts, code snippets, or even compression settings; all this makes for not only a detailed article, but also demonstrates creative and technical proficiency.
  • Screen or video captures within target environments can be extremely useful to validate points. Use tools like Reflector or ScreenFlow or Camtasia to record these critical assets.
  • Add unique visual appeal and context to screen captures by using device outlines. The Facebook Devices are free to download, and they’re amazing. Use sparingly, and these beauties will make content pop!

< The Example

Using the example to the left, I’ve clarified some important points in the structure, both written and visual, to help students identify a path forward.

Of course, every topic is different, and students will have their own way of organizing content, and telling a story, but the points here are meant to be a base to start from. Of course, this is also a learning process, so take revisions in stride.

Points to Consider

  1. Medium tools should be used purposefully to layout an article. Yes, the tools for formatting are limited, but that is blessing, as they can be employed to enhance the basic elements of an article without overdoing the formatting. Notice the use of one Drop-Cap at the beginning to set the visual tone, the use of Pull-Quotes at various times to reinforce critical points during the read, as well as placement of images to organize a creative and pleasing readability structure. But, use these limited tools to focus on writing as well as a way to help the reader focus on the story!
  2. Don’t center everything!
  3. Use rich visuals from the a project’s resource library to give context to the story specifically. Make sure visuals are bold, vibrant, and clear. Use captions to ensure a reader knows exactly why a graphic is important and call it out in the body text. Lead the reader through content with proper placement, spacing, and size. Moreover, visuals are the foundational elements and the glue of the story. They should be carefully selected, cleaned up so they present well, especially sketches and diagrams, and placed in a way that brings focus to the topic.
  4. Don’t center everything!
  5. Break up the article into sections. Doing so will allow for better storytelling and allow the reader to concentrate. Use creative titles to set the tone and focus of each section as well as a structural framwork for the content.
  6. Always use a finalizing statement (conclusion) to wrap things up. The reader should be led to the this end-point with a well structured article and leave with a sense of satisfaction for having taken time to read the material. Never leave a reader hanging. A paragraph or two is sufficient, but make it concise!
  7. Never center everything!

Last But Not Least

Follow the portfolio guidelines for both Web & App Development and Interaction & Design to ensure that articles meet requirements. Also, below are some simple do’s and don’t suggestions to make the effort more satisfying >

Don’t: Write an article specific to a class perspective. Always write the article in a way that a reader can focus on the story in a professional sense. Be an expert on the topic. At the end of the article, students can make reference to the course, project, or environment in a quick statement. (See example for this exact point)

Don’t: Never use common-tognue vernacular such as ‘like’ or ‘you know’ as a person would in an informal conversation. This is unfortunately becoming a real problem, and professionals MUST avoid speaking this way, both in person, and in written form.

Do: Be clever and witty as possible to break the ‘too-much-serious’ approach and let the reader know you are friendly. After all, designers and developers have souls!

Do: Always give credit where credit is due! Never take or assume control over someone else’s work, ideas, or suggestions. Reference them properly, too. In addition, make sure to use links to other Medium articles, resources, or examples on the Web to support your points. This also creates buzz and better SEO.

Do: To show you are one clued-in-person, always be sure to properly notate acronyms, titles, terms, or technical items. An example would be to always captialize Web and Internet as they are considered entities. Also, never type Codec, but instead use CODEC, or blue-ray, but Blu-Ray, as these are industry-level terms that need to be correct. Doing so denotes professionalism.

Do: Always test your Medium articles in multiple browsers, on multiple platforms, and within the mobile App, to ensure that articles properly format and media functions as desired. Have we not taught that testing is expected at every step?

Wrap Up!

Well, I hope this article helps in your quest to write well thought out and written articles for your portfilio? Have pateince! Be determined! And, always put forth 110% — the results will always be worth it!