Web Design for a Mental Health Organization
Cornell Minds Matter promotes the overall mental health of all Cornell students and works to reduce the stigma of mental illness. On a project with 4 team members, I designed and implemented a re-design of their website using HTML/CSS, PHP, and JS.
The purpose of the website would be to contain information about the club and its members and advertise their events on campus. They currently have a Facebook to post upcoming events and an Orgsync with general information about the club. The website will be one place that contains information about the club including its events, its members, and its mission. It will also allow members to sign up to volunteer and allow students to join the Listserv so they can get emails about upcoming events.
We spoke with our client to understand their needs and goals for their target audience.
Need #1: Content
“Currently our Orgsync extends beyond the Cornell Minds Matter club and includes a lot of information about mental health in general. We want this website to be more about the Cornell-specific events to make it a better experience for new members and current members.”
Need #2: Organization
“The content is clustered and unclear in organization and importance (ex. on the home page, the font for navigation bar is small in relation to the other information).”
Need #3: Contact Point
“The Orgsync currently takes you to a separate page to log in and only then can you contact the organization. It is very unclear and not user-friendly which may potentially deter new members from joining the club.”
The organization cares most about 3 groups: those who are 1) currently members of the club, 2) looking to become members of the club, and 3) interested in the events that the club puts on.
Wireframes and Testing
Afterwards, we drafted wireframes for the basic structure and flow of the website. We tested these sketches with key CMM members to see if we had accurately addressed their needs.
We also conducted a cognitive walkthrough with the GenderMag method, looking at usability and comprehensibility for a specific persona. From this, we learned that it was important to keep event information easily accessible to prevent information overload. We decided to minimize the number of actions that could be taken from the navigation bar, and only have one dropdown.
We integrated user research and feedback from user testing into the final design and experience of the website.
Our design decisions were grounded on the needs and wants of our client:
The client wanted to emphasize relevant Cornell related events and condense the general information about mental health on the website. The events tab we created is sectioned into 4 sub tabs based on the type of event. Each event has a short description and the option for members to signup. We also used a visual to portray the club’s overall mission and sectioned off the information so it was less dense.
The client wanted a clear information hierarchy so there would be no confusion as to where information was located. We used card sorting to decide what pages we needed and used the cognitive walkthrough to make sure it was clear to users where to find the information they were looking for.
#3 Contact Point
The client wanted a seamless and efficient way for users to contact the organization. We created links to email every E-board member so the user could easily send a message without having to navigate to another page.
This project allowed me to combine my design thinking skills with development tasks in order to create a complete website. It was rewarding to turn a sketch into an interactive prototype. Working with real clients also allowed me to think more deeply about content strategy and brand identity, which I am hoping to incorporate more of in future projects.