Square Newsroom Expansion
Want to see the results before reading?
​
After nearly six years, Square’s Press page was due for a substantial upgrade. With annual launches of cutting-edge hardware and software, alongside an expanding global presence, the grid-style layout proved inadequate for the company’s growing user base and complexity. To better serve an international audience, the Press page would be re-imagined into a dynamic newsroom and easy-to-use asset hub for public relations.
​​
How might we... keep PR firms, investors and curious onlookers up to date on Square’s latest activities in a way that’s suitable to their location, language and culture?
Who were we designing this for?
-
Investors and shareholders
-
News outlets and PR firms
During the time that I worked on this project, Square had an active presence in 8 countries.
The Team
Me! (Production Designer)
Front End Developer
Designer and Art Director
2 project Managers
Content Producer
Copywriter and Translation Team
My Responsibilities
As a production designer, my role was to:
01.
Act as a consultant for the creative team during the design process to build the best web experience.
02.
Partner with front end developer to build pages in Contentful and add custom stylesheets and overrides.
03.
Have all copy translated and ensure layout stayed consistent between languages.
04.
Edit, crop and export images for web use.
Scope & Constraints
-
This project was completed across multiple time-zones, with team members based in Toronto, New York City and San Francisco.
-
Rather than a blog re-skin, the newsroom would expand to include a portal of brand assets that could be downloaded by news firms.
-
Each page needed translation into eleven different locales.
-
The allotted timeline from the initial concept to the final launch was approximately six to eight weeks - as a team, we'd need to move quickly.
The Process
The Design Stage
During the design stage, I liaised with the designer and art director on proposed Figma layouts and wireframes. I conducted research to identify user-friendly display methods, ensured foundational Contentful components were available to use and checked in with the development team and to ensure the feasibility of all custom layout requests.
The Page Flow Stage
In this stage, I created a "shell" of all pages in Contentful with placeholder components. I showed the development team the final Figma layouts, and we divided up work between tasks suited for production design versus development.
The Content Stage
Once US English copy was finalized, I added it to all page components and submitted staging links to the localization team to have the content translated for all global locales. While waiting on translations, I sourced, cropped and exported responsive imagery to add to the web pages. In the background, the development team added any custom code and style sheets necessary to make the Contentful components matched the designs.
The Q.A. Stage
Once ready, the page was sent to stakeholders to review. We used a spreadsheet to track feedback, identify the page and locale associated with each edit, and determine which edits were gating to launch.
​​
Launch!
Reflections
What I learned from this project
-
If in doubt - over-communicate. Your team can mute a channel, but they can’t hear your thoughts.
-
Approach from a place of empathy and curiosity.
-
Set boundaries around your time - especially with time zone differences.
What I would do differently
-
Trust my inner wisdom - nothing slows you down more than second guessing yourself in a crunch.
-
Do small QA sessions early and often instead of one big session at the end.