KEELY SPITLER
Mom's Mental Health
This project took me through the steps of writing a project proposal, creating a site map, low-fidelity
wireframes, user testing, style guide, logo and high-fidelity prototypes.
The overall goal of Mom’s Mental Health was to connect mothers suffering from postpartum disorders with mental health providers in their area. The website would allow mental health providers to create profiles with information about their practice. Prospective clients can use the website to search for these mental health providers using their zip code.
Project Proposal
The project proposal describes the purpose of the website, the methodology of creating the website, potential project risks, tools used to design the project, website requirements and compliance requirements.
Site Map
Next, I built a site map that laid out a blue print of the website. Taking the requirements of prospective clients and mental health providers into consideration, the website needed to include a user facing side for prospective clients and an interface for mental health providers to create profiles.
Low-fidelity Wireframes
Once the site map was completed, wireframes were designed using Adobe XD. Wireframes were designed for the home, contact, about us, learn, search results, therapist profile, client profile, therapist profile on client view and client review pages. A usability testing interview is included that tests the first round of wireframes. The usability interview required a user to perform two tasks, then asks a series of questions to understand the users experience. Following the usability test, I changed the therapist profile page to accommodate recommendations. The below images display the initial wireframes, the updated therapist profile page and a usability testing interview.
Design Elements
After completing the low-fidelity wireframes, I created a style guide including the logo, fonts, color palette, button design and navigation action colors.
High-fidelity prototypes
Interactive prototypes were design in Webflow. The following imagesinclude screenshots of prototypes for the home, contact, about us, learn, search results, therapist profile, client profile, therapist profile on client view, client review, log-in and sign-up pages. A usability testing interview is also included that tests the first round of prototypes. The second gallery includes prototype changes after usability testing.
Prototypes before testing
Prototypes after testing
After usability testing, a few changes were made. The main navigation bar was missing a link to sign up for an account. There was a log in button that directed you to a log-in screen with a sign-up link at the bottom of the page. To make it easier to
sign-up, a link was added to the main navigation bar directly to the sign-up page. It was also difficult to return to the therapist profile page after leaving a review. To correct this, a success message was added with a button that takes the user back to the profile page. To improve usability, a success message was also added to the Contact Us form to inform users the client received their information.
