The Mayor's Office of New York asked Hyperakt to help bring their plan alive into an online public space. In order to do that, we wanted the site to speak differently from other government-driven designs. The concept reflects that desire with a rich, colorful, and modern design. It incorporates many juxtaposed graphic elements which embody the dense, highly-stimulating nature of New York.
Interactive
#OneNYC
By:








































#OneNYC is a detailed plan for a strong, sustainable, resilient, and equitable NYC. Hyperakt developed an engaging and accessible website so all New Yorkers can be involved in the future of the city.
The Production
Production involved a very rushed turnaround. Fast-paced meetings going over the site map, wireframes, look & feel, color palette alternates and names, charts, maps, photography and development. The team managed to wrap the entire project from sign-off to site launch in one month.

The "look & feel" of the website, illustrating chart styles, photo treatment, typography, and color.

Logo iterations to work with the original NYC logo by Wolff Olins, over the course of a name change.

From wireframes to web skin, Hyperakt aimed for easy navigation, but still a high-level of visual interest.
Final
The final design was a clean evolution of the NYC brand, pulling from their original color palette, type, and chunky logo aesthetic. The site is brought to life with the many custom photos and videos shot for the project by the Mayor's Office in-house photo team, integrated with bold color overlays. The design allows users to seamlessly flow through the site moving from goal to goal with ease.

Some areas are left minimal while others are visually dense, creating a balance and flow of content.

Directly picking up from the original NYC brand, this photo grid acts as an attention-grabbing intro.

Telling the story of the plan's evolution through different modules of information on the homepage.

To allow for a strong call-to-action, a "speak up" button is featured in the nav on every page.

Every vision and every goal is simple and easy to navigate, even though they are content-heavy.

Goal pages within each vision are color-coded for increased navigability, including the type!

Client
NYC Mayor's Office
Credits
Laura Berglund
Senior Designer
Wen Ping Huang
Designer
Eric Wang
Developer
Ambika Roos
Project Manager
Software
Focus
More From Howww
VIEW
Graphic Design
Kakaopage Brand eXperience Design Renewal
Plus X
After Effects, Illustrator, InDesign, +1 more...
A.J.
6
A.M.
6
D.B.
6
D.S.H.
8
F.A.
6
G.R.
8
J.S.
7
M.P.
6
M.S.
6
P.K.
7
6.6
Creative
A.J.
7
A.M.
7
D.B.
8
D.S.H.
8
F.A.
6
G.R.
5.5
J.S.
7
M.P.
7
M.S.
6
P.K.
6.5
6.8
Design
A.J.
7
A.M.
7
D.B.
7
D.S.H.
7
F.A.
7
G.R.
6
J.S.
8
M.P.
7
M.S.
6
P.K.
6
6.8
Craft
A.J.
6.7
A.M.
6.7
D.B.
7
D.S.H.
7.7
F.A.
6.3
G.R.
6.5
J.S.
7.3
M.P.
6.7
M.S.
6
P.K.
6.5
6.7
Total








































VIEW
Graphic Design
2018 WOMEN IN TECH REPORT
HackerRank
After Effects, HTML, HTML5, +1 more...
A.J.
5
A.M.
6
D.B.
7
D.S.H.
7
F.A.
5
G.R.
8
GMUNK
7
J.S.
5
M.P.
8
M.S.
7
6.5
Creative
A.J.
5
A.M.
6
D.B.
7
D.S.H.
6
F.A.
7
G.R.
7
GMUNK
6
J.S.
7
M.P.
8
M.S.
4
6.3
Design
A.J.
6
A.M.
6
D.B.
6
D.S.H.
6
F.A.
6
G.R.
8
GMUNK
7
J.S.
8
M.P.
6
M.S.
6
6.5
Craft
A.J.
5.3
A.M.
6
D.B.
6.7
D.S.H.
6.3
F.A.
6
G.R.
7.7
GMUNK
6.7
J.S.
6.7
M.P.
7.3
M.S.
5.7
6.4
Total








































VIEW
Interactive
The Punisher - Concept Microsite Design
Leonardo Rabelo
After Effects, Illustrator, Photoshop
A.J.
6
A.M.
6
D.S.H.
7
F.A.
6.5
G.R.
6
GMUNK
5
J.S.
7
M.P.
7
M.S.
8
P.K.
5.5
6.4
Creative
A.J.
7
A.M.
6
D.S.H.
7
F.A.
6.5
G.R.
6
GMUNK
6
J.S.
7.5
M.P.
6
M.S.
8
P.K.
8
6.8
Design
A.J.
6
A.M.
7
D.S.H.
7
F.A.
6
G.R.
6
GMUNK
6
J.S.
6
M.P.
7
M.S.
8
P.K.
9
6.8
Craft
A.J.
6.3
A.M.
6.3
D.S.H.
7
F.A.
6.3
G.R.
6
GMUNK
5.7
J.S.
6.8
M.P.
6.7
M.S.
8
P.K.
7.5
6.7
Total







































