I helped design and engineer the user experience for a mental health website for East Lansing Public Schools.
User Researcher
UX Designer
UI Developer
East Lansing Public Schools
During the Covid-19 pandemic, East Lansing Public Schools found that mental health among students, parents, and faculty were declining. ELPS wanted to create a mental health campaign that fosters hope and support for the community by educating and providing useful, accessible information about mental health for all.
When my team lead and I were onboarded, most of the preliminary research for the users had already been conducted. I worked with fellow UX Designer, Emily Lin to conduct two stakeholder interviews to determine
We learned that the website we were about to build was part of multiple deliverables that make up the Trojan Mental Health Matters campaign and
that we needed to make our website consistent with the branding guide already given.
Following the stakeholder meetings, my team conducted a design and information review to understand what research had been conducted and what the current designs were. We found that high-fidelity wireframes had already been completed and personas had been made to represent the three primary targets of the information. These personas included Students, Parents, and Faculty.
From completing the information review, we found that the primary purpose of the website was to deliver relevant information about mental health and resources in as easy a manner as possible.
Our next steps were to conduct a usability test on an interactive mockup of the existing wireframes to determine the overall user experience of the current prototypes. We conducted two usability tests and our findings showed that the current layout did not adequately help our target audience find the relevant information they were looking for.
We identified three major concerns after conducting the usability test.
Our Usability test had shown us that the current designs were not focused on the users of the site. This led my team to create an Empath Map and Context Scenario for each of the user personas to understand where and how they would try to get relevant information and the thought process they would typically go through.
This context scenario helped us complete a card sort on a reworked information structure to target the pain points that were previously shown by the usability test. Our reworked information architecture restructured the initial wireframes to include separate and targeted information for each of our primary users instead of keeping all of the information on one page.
My team then completed low-fidelity wireframes of potential designs that were focused on all of the research we had completed. My team had split up to each develop our own version of these wireframes and then met back again to merge them together to form one complete unified high-fidelity mockup.
Our designs went through two iterations of development before we landed on the design that is shown on the website today. Once we had our designs and had them approved, we went ahead and developed the high-fidelity designs and launched the project. While Emily and I were building out the site, our graphic designer, Kaylee Mullen created the assets for the web pages. The website is being used by East Lansing Public Schools to promote wellness resources and foster a positive mental health community.
Top