Case Studies Pt.4: Out of Water Editorials
It’s Project 4 at the UX/UI Bootcamp I enrolled in earlier this year. The group and I are more than halfway through the course and we have all grown, at least a little bit since we started.
Project Overview
For this assignment, we were instructed to work in pairs to design a responsive online platform for a magazine, newspaper, or blog directed to meet the needs and goals of one of the User-Personas given.
To jog your memory — a User Persona is a fictional character created to represent a user type that might use a site, brand, or product in a similar way.
The Goals our persona wanted to achieve included investing more in self-care and contributing more to an empathic society.
The Solution was Out of Water Editorials, a news page containing articles about wellness, the contribution to the environment, and non-profit organizations.
As Designers, our roles include:
- Applying research on the industry of editorial design
- Interviewing users who may or may not use these types of websites
- Using wireframing techniques to find a foundation for the website that was being created
- Integrating visual and interaction design to find ideal colorways and typography to theme the website
- Prototyping the final results with several fidelities
- Testing users to reveal the strengths and places to improve the final result
1. Research
For this assignment, we used Brand Positioning and Benchmark Analysis to identify, compare and contrast competitors to find a healthy entry for our digital product into this industry.
This approach also gave us a starting point on which to define the content our website should have and the features it should always promote.
Our Brand Positioning research consisted of four theories:
Brand Comparison
Comparing the different companies gave clarify on some of the topics and audience they catered to. We kept in mind what we wanted to achieve. Based on these results we decided on blending topics that would work in a majority of these settings.
Feature Comparison
Using this model revealed features our competitors had as well as some that are not in their focus.
Value Chart
A Value Chart was also used to find opportunities where other companies might not be directing their content to. We used this chart to measure the scopes of our companies if they were in the Digital, Physical realm of media and if their reach was wide or targeted.
Visual Competitor Analysis
When analyzing the visual aesthetic of our chosen companies to research, we took a look at the primary colors and fonts used on their websites.
2. Design
This project presented a few ques on User Interface Design and Interaction. As a team, we did our best to implement mobility into our digital product. But with little communication and no concrete demand for responsive design, we focused our attention on a desktop interface with as many features as we could put in place.
To properly brand our product we used:
Moodboards
Brand Attributes
Color Theory
To complete our brand identity, we combined our findings into a Style Tile.
3. Testing
Testing was administered throughout the entire process to prompt continuous improvements. Our early results showed the confusion users had when moving through the prototype. The last few tests showed more engagement than the site could currently provide. The strongest results came from our heat map research.
Final Thoughts
At first, I was not excited about another group project. I knew several environments where we would be working with more than one designer on any given project. But with nothing at stake in this instance, there was no reason for accountability. There was also a barrier of communication, making for deliverables not divided evenly. The mentalities of me and my partner at the time were very different. Being able to blend our imaginations together became more remarkable than completing the project itself.
And yet, out of all the projects we have completed so far, I’ve enjoyed this one the most.
