Building a community-driven platform and open innovation management system to solve global challenges.
Solve, a new initiative from MIT is a marketplace connecting innovators with resources to solve global challenges–from education and health to energy and inequality. Each year, Solve announces global challenges for which it seeks solutions. Anyone can submit their product ideas for a chance to pitch in front of the MIT community and potential partners for sponsorship at their flagship event, Solve at MIT. When Solve partnered with Atlantic Media Strategies (AMS), they lacked an engaging web presence, a clear challenge cycle process, and content strategy to inspire their community. Our team at AMS helped to tackle these challenges, and I lead the design and creative direction for the project. The solution is a website, a user-generated content platform and an open innovation management system to better serve the community, clarify the challenge process, and effectively communicate the initiative’s purpose and reach.
Client
MIT Solve
My role
Lead designer at Atlantic Media Strategies
Credit
Zach Kalman,UX Architect
Nate Luzod & Evan Byrne,Development
Leslie Gillian,Client Management
Recognition
W3 Awards, Silver Award
After meeting with the Solve team, we realized that getting to know our existing users could be our roadmap to a better experience for our prospective users. That only by understanding their goals, motivations, and pain points, can we entice prospective users to join the community. This meant interviewing and surveying all the different types of users that make up the Solve community to better understand them. These people included Solvers–those whose solutions have been selected, Solve members, judges, and site administrators. The user research at this stage led us to uncover some key user insights that informed the way we designed the site. The main takeaway for each user category is: My role was to conceptualize, design, and help clarify design needs for both the client and our development team. I worked closely with my core team to hold collaboration sessions with clients at appropriate moments, brainstorm solutions, and test for validation. As in previous projects, applying these facets of the process allowed us to speed up the decision-making process and move faster with more comprehensive feedback from the client. I learned to adapt my design process to work half a sprint ahead of development cycle in order to clarify design needs in advance, which helped the dev team estimate better and be more precise in the tasks that needed to be completed in each sprint. Collaboration session during discovery phase. Photo credit: Zach Kalman Being able to empathize with our users was invaluable to my process, as it led to tremendous opportunities for design. In order to build a dynamic, user-generated content platform, it was essential that my team and I kept our focus on our users’ needs and goals. To help guide us and ensure our solutions evolved in the right direction, I worked with the team and client to distill our user research insights into design principles. Below are our design principles for this project: Design Principles As our development team began to build the infrastructure of the site on Laravel, I worked with our client to clarify our product’s visual language direction. I surveyed the internal stakeholders to gain an understanding of the challenges the team faced with their existing brand identity system. The goal was to uncover what’s working and what’s not and use this opportunity to iterate upon the identity system. Based on the feedback, I improved the visual language to meet our content strategy needs and to better reflect the brand personality that the team agreed upon. The original color palette was functional. However, a few of the colors were tweaked for contrast to meet our web accessibility standards. Each of secondary bright colors is used to represent the challenge theme. Solve’s brand typography wasn’t accessible for web usage, so I took this opportunity to explore new typography directions. Based on the team’s feedback, the brand type should convey ‘warmth’ and has ‘human’ characteristics to reflect a sense of community. Freight Sans and Freight Serifs were chosen for their humanistic qualities and large x-height which makes reading easier on screens. In addition, they come in a robust range of styles (thin, regular, medium, italics, bold, etc.), making them very versatile for different contexts. Photography is a powerful visual language. Images of real people in the Solve community are used to convey an authentic, diverse community. Stock photography can be used if needed. However, when using stock photos to describe an abstract idea or subjects, they should always include a human element.The challenge
Solve needed to
Our strategy was to
To engage prospective solvers, we needed to get to know the existing ones.
The Process
Strenthening the visual language
Brand personality
Color scheme
Typography
Using photography to convey community
Building a UI component library
In order to communicate a unified story effectively, we needed a cohesive UI component library that reflects the brand’s personality. We used this opportunity to replicate functions of our own internal component library for this project. This is a library of elements that can be reused, rearranged, and combined to create patterns that fit our communication needs. This system allowed us to streamline our design and development for the website, and served as a foundational visual language from which to build the application.
Mobile-first approach to prioritize what’s important
We used the mobile-first approach to prioritize what’s truly important to communicate. We took advantage of the limited space and mobile constraints to eliminate distractions and focus on the content hierarchy. I mocked up wireframes to serve as conversation starters to get consensus on what content to include.
A website to tell a unified story
In the effort to clarify Solve’s mission and promote specific business priorities like upcoming events and memberships, the homepage was designed to feature this information upfront. At the same time, we wanted to help users to better understand the value of participating in Solve challenges and the benefits of being part of the community.
Solve events
The events section was designed as a hub for Solve’s flagship events, and solve-a-thons. Attendees can find event information, schedules, and speaker bio for each event here. Solve administrators have the ability to update and edit content for all events in this section.
Challenge themes
Colors are used to organize content. Each color is assigned to a challenge theme, and all solutions under that theme. For example, red represents “Sustainability,” green represents “Health,” yellow represents “Education,” and blue represents “Prosperity.” This color theme strategy was intended to help users recall information as the challenge question changes each year, even though the theme categories stay the same.
The overall challenge for the application was how do we clarify the process and improve the user experience for potential Solvers, judges, and admins. We first approached this daunting task by breaking it down into manageable chunks. I framed each design challenge as “how might we” questions to help us generate ideas and features. Then, we prioritized creating the features based on available resources and time constraints. I worked closely with the core project team to determine the user flow for the submission process and identified these design opportunities to help the users achieve their goals. In order to grow the number of quality submissions, we needed to improve the submission process from the ground up by doing the following: Designing the solution submission processPlatform to better serve the community
1. How might we clarify the solution submission process to encourage potential Solvers to publish, participate, and interact with the community?
The solution submission process was designed to be flexible, allowing people to save and edit their work as they collaborate with the team and get feedback over time. The work is saved, and accessible in the user’s dashboard. I designed the progressive indicators to guide users and communicate which section still needs work so that when users come back at a different time to continue the process, they can recall their place easier.
The dashboard experience for each type of user
Participants dashboard experience displays the appropriate schedule of the challenge timeline, allowing them to manage their solution submissions, add team members, discover other solutions, and update their profile.
Submitted solutions2. How might we better enable users to tap into the community for support and collaboration?
Submitted solutions are published in the challenge theme section. To learn more about each solution, users can read more about it in its own solution section. Users can comment on each paragraph to give specific feedback and encourage participation.
Participant dashboard
Within the dashboard, recommended solutions are dynamically displayed based on users’ preferences. This allows users to discover others’ work. In addition, users can add team members to their solutions. The hope is to encourage collaboration as time goes on.
3. How might we clarify the judging process and enable judges to manage and collaborate better?
- Build a dashboard experience in the application to manage assigned challenges and solutions
- Designed a scorecard area to help judges keep all scores for all assigned challenges
- A scoring tool build in context of the judging journey to ease the process
- Designed a note area in the scoring tool to ease communication efforts between judges
Judging experience
The judges’ dashboard was designed to help the judging process easier. Each judge can manage and see their assigned challenges with a scorecard in one place. We also designed a judging tool that helps them judge solutions in context.
4. How might we enable admins to better manage all their tasks in one place?
- Feature the dashboard with overview of new users, solutions, and comments
- Make challenges, events, articles, and pages editable within the CMS
- Give admin the ability to create new challenges and users within the CMS
- Designed the ability to export solutions summary so staff can manage assigning judges to solutions
We launched in May of 2017, and we’re excited to see the growth of the community thus far.Results
2358
Submitted solutions as of August 2017
3363
total users
Conclusion
Working with the Solve team who values putting users first and creating a community to crowd-solve difficult challenges was very rewarding, and undoubtedly led to great results. The project contributes to Solve’s mission and ongoing strategy for being the marketplace that connects innovators to resources to implement their ideas. Working on such a complex project on a tight deadline helped us learn a great amount which we’ve used to improve the way we work on other projects.
Lessons Learned
- Building empathy for the users by writing design principles as a team. When we’re in the weeds working against technology and time constraints, it’s easy to shift our focus away from our users’ needs. One of the ways I find helpful to remind the team to be empathetic to our users is by contributing to writing design principles and participating in that process as a group. The sense of ownership in the act of writing help serves as a reminder as we go through the project because it becomes a part of our belief system.