UX/ UI Design | Copywriting
Branding
BACKGROUND
Openthink brings activists and organizations together to coordinate ideas, actions, events and projects. Their online platform serves as an interactive database that facilitates open collaboration and solution-based discussion for organizations and their volunteers. The platform also allows organizations to find and collaborate with allied groups to work towards shared goals and objectives.
By crowdsourcing ideas on a single platform with a forum structure, Openthink serves as a hub for discussion to turn ideas into reality.
DURATION
5 Weeks
TOOLS
Figma

PROBLEM

Customers were having trouble understanding the purpose of the Openthink platform based on their current marketing website. Openthink has a simple single landing page for customers to find out more and join their platform. They are looking to make their website informative and modern while giving their customers more context for why they should choose Openthink for their organization or as an activist looking to get involved.

GOALS

- Create a responsive website for users to find and educate themselves about the Openthink product
- Craft an authentic brand that aligns the voice, look and feel of their company
- Start a UI and branding kit for the future design work being done on the platform

Research

LETS LEARN MORE
‍STAKEHOLDER INTERVIEWS
    The stakeholder interviews provided insight into what the current market trends were, who their customer base is, branding, and visual design needs. I learned more about the goals of the business and the functionality of the platform we would be marketing.

    Personas were created to give context to the split parts of Openthink as a company and who they are serving.
    ‍COMPETITIVE ANALYSIS
      Allowed me to gather how products like Openthink are displaying information on their marketing pages. Openthink essentially has two products
      1. A place for activists to join organizations and get involved
      2. A place for organizations to get organized, collaborate, onboard, and request for volunteers to complete tasks
      I revealed two main patterns. Many websites will market first to the consumer of the product (the activist) and second to the business using it (the organization). The second pattern markets to the business and lets them do their own marketing for their individual pages. Since Openthink is aiming to be active in both spaces, I decided to present the idea of marketing to the activists on the homepage instead of their current design, which was marketed almost entirely to the organization. 

      My idea to create separation was confirmed with user research.
      ‍USER RESEARCH
        My goals were to find discrepancies in what the website said vs what was understood, to find out what information was missing, and how the website could better serve them both as an organization and as an activist. User research was done with organization leaders and activists. I took the responses and created an affinity map to see the patterns within the interviews.
          The main takeaway from this research was the copy was unclear. Users felt the copy used a lot of buzzwords and didn't give much feedback on what the company and platform actually does for its users. When creating the designs, it was important to simplify the language and provide clear information describing the platform’s purpose, use cases, and value it provides to activists and organizations.
          ‍BRANDING
          The stakeholders requested a rebrand of the website. Using the mood boards they previously created, I made a simple style tile to combine their ideas and visually tell their story.
          Inviting, multi-colored palette with white space and fun icons.
          Color fade inspiration from Asana.
          Bright faded color palete with clear CTA’s.
          Click image to enlarge
          ‍STYLE TILE
          Click image to enlarge
          Click image to enlarge

          Design

          LETS MAKE SOMETHING AMAZING
          ‍SITE MAP & SKETCHES
            A site map was created for the stakeholders to showcase how we would separate the pages.
            ‍DESIGN
              Several iterations of the design were created showcasing different styling elements and flows. Because I had already identified a visual aesthetic, I was able to go directly into high fidelity versions. We went through a few rounds of copywriting and editing to complete the designs you see below.

              Test

              DOES THIS THING WORK?
              PROTOTYPE
              This is the prototype used during testing before the edits were made that you see above.
              View Prototype
              KEY TAKEAWAYS
              User testing was done to make sure the marketing storyline and copy were clearly understood. These were the results:
              ‍
              - Users were able to understand the use case for Openthink as an organization with the    updated copy.
                    “Platform for individuals can connect to organizations”
                    “To be able to see overlaps in organizations working on similar issues”
                    “Connect organizations that are working on similar issues”
                    “Networking tool. Organize and collaborate effectively.”
              - Visually, users used words like airy, spacious, simple and easy to understand.
              - Users were still unclear on the details of how the platform functions due to a lack of    visual representation of the app itself. Things they asked about included:
                    Searching for Events - this would be a separate page on the platform
                     Project Management Tools - These would be shown with screenshots
                     Onboarding - These would be shown with screenshots
              - All users were interested in how they could use Openthink for events
              - A detailed and intentional search feature will be necessary for the platform to facilitate   the level of collaboration Openthink wishes to accomplish. It will help activists find   organizations to volunteer for and it will help organizations find other organizations to   collaborate with. 

              Branding

              CONSISTENCY IS QUEEN
              ‍DEVELOP & HANDOFF
                One of the most challenging parts for the team post design will be for them to take their new branding and implement it onto their platform. A UI Kit and branding guidelines were necessary for this growing company. Both of these will continue to grow as the app switches to the new branding. I’ve handed these over to the next designer working on the first iteration of brand changes on the app side of the project.

                Conclusion

                WHAT DID I LEARN AND WHAT'S NEXT?
                RESULTS
                Openthink will measure their success by how many new, organic users and organizations sign up for their platform through the website after implementation.
                NEXT STEPS
                The timeline for building the website is 6-8 weeks. I’ve provided them with a list of future additions and changes that will be helpful in visually showcasing their platform designs as they are built and additional features to consider for future projects.
                CONCLUSION
                Working with Openthink on their designs gave me an opportunity to showcase my previous experience in branding in marketing. In the future, I would bring more focus to the story of the brand and dive deeper into the goals of the business.
                Go to Bondadosa Case Study →

                WANT TO WORK TOGETHER?

                If you like what you see and want to work together, get in touch!

                Resume
                LINKEDIN