A refresh for a NYC government agency's website.
The Mayor's Office of Information and Technology (MOTI) has a mission to push NYC to become the most innovative, tech-friendly, and equitable big city in the world. The agency is relatively young, but their work is unique and dynamic. They act as a consulting agency with other agencies and non-profits to generate solutions solved with technology.
Our team was tasked with redesigning MOTI's website (which is still in its form prior to the project at nyc.gov/forward) to drastically increase user engagement. We knew we needed to correctly define MOTI and showcase why New Yorkers should deeply care.
I served as the Project Leader and the point-of-contact between MOTI and our team of 4. I also played significant roles within the areas of User Research, Content Strategy, and Information Architect. This project was conducted over a span of three weeks.
Below is a screen capture of MOTI's landing, Initiatives, and Innovation pages before the project started. At our initial meeting, our clients felt that their current website didn't communicate the dynamic and inventive work they were doing.
We conducted a heuristics analysis and found that the site was lacking in several of Nielsen's standards: findable, clear, communicative, useful, valuable, and delightful. We found that there was a lack of purpose within each of these pages, and navigation was ambiguous.
Alignment on the problem:
Daily Brainstorming and Ideation:
Our team of 4 had were working together for the first time and also had no recognition of MOTI before the project started. As Project Lead, I found it important to get aligned quickly as a team. These pictures represent our collective whiteboard notes during daily team morning meets. This helped us align in the same direction which got us off to a healthy start.
Like all complex activities, MOTI's day-to-day business was difficult to comprehend at first. To fully understand who we were designing for, we started by interviewing 5 MOTI staff members. We learned that MOTI acted more like a consultancy agency than the typical government organization that provided direct services. We also learned how their website might better serve New Yorkers; in particular, MOTI desired to attract tech talent into NYC government, provide a space a dialogue for the tech community, and help citizens and organizations learn how they can advocate for themselves through tech.
We also interviewed 13 potential users to determine their priorities and how they currently experienced the agency's website. To the bottom left, we interviewed a career coach to web developers, and we gained insight to engage job seekers on MOTI’s website. To the right, we interviewed an educator who is interested in connecting her organization with other non-profits and government agencies.
Since the existing sitemap was ambiguous and unintuitive, we sought the help of several users to determine a more friendly navigation structure. We had both internal stakeholders and regular NYC citizens perform a card sort to guide our navigation structure.
After this initial round of research, we were grateful to learn so much more about MOTI and how they might serve the New York population. The diagram to the right represents the various parts of MOTI that could be represented on the web. The child nodes have been blanked out.
Defining the problem:
To synthesize our user research, I crafted two distinct personas to represent the types of New Yorkers that would actively engage in this website. The persona to the left is "Jill, Non-Profit Leader" who might desire to grow her network to connect her non-profit to various NYC government agencies. To the right is "Mark, Tech Talent": a software engineer who represents a software engineer that might be interested in finding a career within NYC.
We developed a sitemap with conversational navigation, because users sought that from a government site. If you noticed in the original website, projects were divided into two confusing categories: "Innovations" and "Initiatives". Instead, we simply categorized all projects under "What We Do". This made it easier for users to discover MOTI's activities.
Developing towards a solution:
Early Ideation and Sketches:
We conducted design studios with sketches to communicate how to prioritize features in a quick and efficient manner. Using our design goals and research findings, each team member quickly drew up low-fidelity representations; our sketches were analyzed together to determine the placement of content on our higher fidelity wireframes.
Testing Templates on Medium Fidelity Wireframes:
We then quickly graduated to medium fidelity wireframes, and we used those to do some early user testing. Here, we printed out paper wireframes to gather feedback from users to determine usability.
Some Ideas Didn't Work Out:
Naturally, we had design considerations that we had to discard. This mockup represents a minimalist and maybe modern approach with the navigation terms of "About", "Impacts" and "Resources". Users found the terms excessively vague, and the hamburger button was more of a burden than a helpful tool.
Transitioning from Medium to High Fidelity:
These wireframes show our transition from medium fidelity to high fidelity. As we narrowed down to a final template, we continued to iterate based on user feedback.
The Landing Page
The landing page addresses both client and user needs. The navigation bar purposefully has a conversational tone to promote a strong desire that this agency has to connect with New Yorkers. Also, pertinent information regarding events, careers, and social media content is displayed and updated regularly. We also provided a definition of MOTI so that users can become more familiar with this relatively young agency.
Project Gallery Page
We kept the Project Gallery Page as simple as possible to emphasize the projects themselves. We provided users with a simple navigation feature to filter and search between various projects. Also, we provided large, eye-catching images to complement the descriptions of the projects to encourage users to dive deeper into each project.
Project Details Page
This simple template highlights the description for each project and, importantly, the other collaborating organizations.
Delivering to our client:
We produced a detailed research report, annotated wireframes, and an interactive prototype. Our clients expressed delight and appreciation after our final meeting which included an engaging presentation.
To view a prototype or to discuss this project, please get in touch with me (firstname.lastname@example.org).