Guiding Question

Initial Design, Feedback, and Visions:

Here is a screenshot of the initial design of the website. As one can see, it used a default Wordpress template. Based on talks with previous designers, the outgoing editorial board, and others on the Other Collective team, the template did not translate well to image of the brand. Based on their feedback, some key goals are listed:

Our main goals:

Competitive Analysis

Because this was a news media platform, our team looked at different platforms of various sizes in order to find out what the most effective layout would be. Overall, since the platform planned to publish 1-2 times per week, it seemed best to have a web page with only a few featured stories and the opportunity to explore more pages. We looked at a couple of different sites for inspiration and common design patterns.

Information Hierarchy

Our team discussed what the users path would be through the website. Since it was likely that users found our website for multiple different reasons, it was important that a user could quickly find what they needed. The information architecture needed to reflect that.

Wireframes

Here are some of the early wireframes that I made for the front page designs. I wanted to highlight the call-to-actions, as well as establish a hierarchy of what to expect.  The main call-to-action would be the front page story.

Digital Wireframes

Here are some of the early wireframes that I made for the front page designs. I wanted to highlight the call-to-actions, as well as establish a hierarchy of what to expect.  The main call-to-action would be the front page story.

Visual Branding

For our main headline font, we decided to go with 'alegraya'. It had a unique look that we thought matched our brand and was consistent with the magazine and social media.

For our color scheme, we also remained consistent, yet added lavender as a highlight color.

Final Design & Reflections

Home Page

Here is the final design of our website. In the final design, we decided to remove bright colors, strip down the graphic elements, and create a more neutral tone (with a ‘funky’ font at my editors' request, to establish brand visibility).

Article Page

This is the article page. Overall, it's pretty simple. We emphasized readability of text with 21 pt font and ideal leading and tracking. Overall, since our articles are typically around 800-1000 words, this text size will hopefully not fatigue the reader.

Section Page

This is the page for different sections, including: News, Features, Arts & Culture, Opinion, and Multimedia.

Reflection and Conclusions

Since the redesign of the site, Other Collective has had 5,000 hits and more than 100 online orders for merchandise and magazines.

We re-launched our website in Fall 2020. Overall, it was a slow process of rebuilding our site and making it compatible with the current Wordpress back-end. In this site redesign, I definitely learned a few key things:

• While looking at common design patterns may help, its important to be able to adjust design patterns for your design brief. Many of the media sites we were looking at were more active than other collective, and we needed to adapt to our more relaxed release schedule.
  
• Get feedback along the way. Overall, it's important to ask all members of your team for their feedback throughout the design process, in order to make sure everyones on the same page.