Case study: editorial design
Hello and welcome! I completed my 4th Ironhack project and it was a challenge on editorial design. The challenge was:
Design a responsive online platform for a magazine, newspaper, or blog directed to meet the needs and goals of one of the presented User Personas.
The class was divided into 2 person groups. My partner, Sam, and I chose the user persona, Paula! Paula was selected due to her love of art, voracious reading habits, and her willingness to talk with anyone. Even aliens haha. These traits definitely resonated with Sam and I. We too are lovable dorks that find any excuse to read lots of books and obsess over our fandoms. We were excited to create a website that will cater to Paula’s interests.
How can we provide a platform to promote reading new content and building an art presence?
Beacon — find your light
The website Beacon was born. It’s like Sam and I had a Type A child that spent too much time in the art classroom.
Beacon is an art and design platform that allows users to view art news and trends, as well as connect with other creatives via personal portfolios. The portfolios can showcase a creative’s art, blogs, case studies, any kind of content the user creates. Users can also send direct messages to others and it can be labeled as friendly or business connections.
My partner and I envision Beacon to be open-minded, collaborative, but never condescending. Users are meant to “find their light” of inspiration and knowledge to become well rounded artists and collaborators.
Prepping the canvas
In this case study, I will go over the focal points of the project’s research, visual design, prototyping, testing, and final designs. The conclusion will represent where we shined, where we experienced turbulence, and the joy at the end of it all. The expected digital product was a hi-fi prototype presented as a desktop, mobile, and tablet version.
Our muse
The websites that primarily fueled our inspiration were: Tumblr, the Skimm, and Colossal. Our secondary websites were Instagram, Vice, and Twitter. Looking through each websites features, we wanted to include these in Beacon:
- Tumblr: create and customize an art portfolio, connect with other creatives, grow a following
- The Skimm: receive objective news about art and design
- Colossal: have artist and their work be showcased in spotlights
There were gaps in a website that shared creator’s content and art-related news. Tumblr came the closest to what Beacon was envisioned to be. The main thing that was missing was sharing news and the UI of the website was severely outdated.
Define
A market positioning map was used to pinpoint how my partner and I wanted Beacon to be a niche, modern, and innovative website.
The MOSCOW method was used to prioritize the features from most wanted to least wanted.
The drawing board
Making a website from scratch proved to be more challenging than thought. It’s one thing to think of a feature to add onto an app and revamp a website that exists. Beacon had to be born of it’s own inspiration. Below are the site map, concept sketches, and early prototypes of Beacon:
Prototype practice
The user flow for Beacon was for the user to create a new post on their portfolio. Once the mid-fi wireframes were established, designing the layout of the website came next.
Maze test results
The prototype was submitted into Maze.co to test how easy it was for the user to follow the directions to post on the portfolio.
The main feedback received was:
- The “Create a Post” button should be at the beginning of the navigation bar, since that is the primary function
- The “Create a Post” pop-up is cluttered
- The user flow and the goal of the site is user friendly and makes sense
Design delight
Here are the planned brand attributes:
- Open-minded
- Collaborative
- Informative
- Warm
- Structures
The mood board was created with images that convey those attributes. Warm yellow tones complimented with cool blue tones were my favorite. It was also fun to go down the rabbit hole of Tumblr and Pinterest even more.
The colors that were selected from the moodboard were warm yellow, cream, and teal. Orange was also added later into the color palette. The warm yellow would be the brand color and teal would be the ascent color for buttons.
The mood board was shared amongst the other students in the class. This was the feedback they provided on the perceived brand attributes:
- Powerful
- Knowledgeable
- Warm
- Modern
- Creative
It was nice to see that the mood board and color palette reflected Beacon’s look and feel.
The many faces of Beacon
The major changes from the mid-fi to the high-fi was the portfolio were the placement of Paula’s profile information and how her content would be displayed.
Mid-Fi Ppototype and changes marked in yellow:
Paula’s profile image and information was moved to the top center of the website. Her content got divided up with tabs. A tab for her artwork was created and another tab for her design work was created.
More of the desktop interface
To view the high-fi prototype click here
A desirability test was conducted to see how users responded to the look and feel of the website. The user’s feedback was added into a word cloud:
In the end
☀️ Learning more about UI and the design process was fun! It was insightful to see how much of a feat it is to create a website from scratch. Sam and I enjoyed collaborating on this project and we formed a good friendship!
⛈️ This project came with not only project challenges but life challenges. I was dealing with the lose of my beloved dog. Sam moved across states to start a new job. We were a great team and managed to get through it together and support each other along the way
🌈 Despite our setbacks, Sam and I completed the project as best we could. We look forward to more UI opportunities in the future
I enjoyed how this project made me regress to my Tumblr years. I did not peak in high school, nor do I think that I ever peaked. It’s been a downward slope since ;)
Thank you for reading my case study!
