PORTFOLIO OF CHRISTOPHER DUFFY AUSTIN
FAMILY WELLNESS ALLIANCE UX/UI CASE STUDY
I was contacted by the Family Wellness Alliance to help in designing their first website. The organization works to promote mental wellness by connecting people with mental health professionals and educating the public on its importance.
I worked with a basic guideline provided by the organization for what pages were needed, schemes they wanted to use, as well as the logo. I was otherwise given free reign over the look.
GOALS
B.
Create an appealing website that is easy to navigate for those of any age, while creating a welcoming tone that conveys the client's message of safety and understanding.
A.
Organize information and web pages so that visitors understand what the Family Wellness Alliance is , and what it can do for them, in a accessible and engaging way.
DESIGN ITERATIONS
From low-fidelity sketches to the finished website; how things changed and why.
Below are the different pages of the website in their various stages of production. Beginning with the low-fidelity sketches, moving onto the high-fidelity mockups made in InDesign based on client feedback, and finally the finished website.
Communication with the client was done through Slack. There, I was given the general outline for the website, the color code and the final logo design. I would create a mockup, post it to Slack, and go over the design choices with the client there. If any changes needed to be made, I would alter the mockup to their specifications and resubmit it for their final approval.
Before designing began, I was informed that the website would be published via Squarespace, and researched the functionality of the site in order to consider how the finished product would look using the tools it offered users.
I did not design the blog page as the clients and I felt it was best to use the default layout Squarespace offered. They would design the individual blog posts themselves.
The landing page for the website
For the homepage, I created a layout that greeted users with a header image meant to convey a welcoming, family friendly tone in the form of a couple with their child. The different pages of the site were listed below this with text and accompanying images that alternated alignment in order to avoid a static design running down the page.
The client initially requested that the first call-to-action that users saw would be the “Donate Now” button at the top of the page. I discussed this with them, and we determined that the “Schedule a Speaker” option was a more engaging option that helped convey the intent of the website. “Donate Now” became a fixture in the menu bar that users would always be exposed to, while the option to “Schedule a Speaker” became the first link above the fold. Other pages were listed on the high-fidelity mockup in order of significance.
The final version of the homepage further rearranged the other pages, putting the "Volunteer" page before the "Services" one. The "Donate Now" button was also removed as the banking framework has not been set up yet. View
The first call to action
My initial design from the sketch and high definition mockup was to convey a message of outreach to visitors to the site, using a format that had a photo paired with text explaining what the speakers were for. The image of the auditorium was meant to give an idea of what the page was for at a glance, allowing visitors to intuit that this page is about public talks and communicating with the Alliance.
I was given guidelines for what fields would be necessary for visitors to fill out when communicating with the alliance, but some like the "Topic of Interest" were deemed unnecessary for the final version of the website.
The final version went with a smaller photo and less text than I anticipated for the original designs, but kept the layout of both of my designs since they were the most straightforward option for organizing the information. View
Introducing the team
The initial design of the low-fidelity mockup made this page serve as an introduction to the entire FWA team before giving more in-depth profiles to the individual members. This was abandoned when the client decided it was unnecessary, as they wanted to introduce the members with no preamble.
The initial design also proposed a static image and text for the profile. I was also tasked with creating a hypothetical mockup for a more engaging design that would have the team’s portraits expand into their bios when a cursor moved over them.
The final version of the site uses a variation of my initial design in a vertical orientation. The hypothetical design was deemed impractical given the current technology available via the Squarespace framework and the deadline for the website's launch.
What the organization has to offer
This page went largely unchanged from the low to high-fidelity mockup. The goal was to give users a resource for all the different ways the FWA could help them, based on the user’s role in the community. These roles are youth, parents, community members, and professionals. The topics they deal with include dealing with depression, bullying and suicide prevention.
The final version is drastically different from the guideline I was given and the designs I came up with. Instead of breaking down the information by the different community roles that FWA can help, the final page gives a broad overview of both the roles of the people they wish to help and the different topics they are prepared to discuss, with an invitation to visitors to suggest more topics.
This was determined to be more efficient as there wasn't much content to fill out my initial designs.
Opportunities to engage
Much like the "Schedule a Speaker" page, the "Volunteer" page was redesigned from its more text-heavy version to the simpler one seen in the high definition mockup and the final version. There wasn't much need for a lot of text, and the call to action was very apparent from the image and form fields.
Other than switching which side of the page the image and text were on, there was largely little difference between the mockup and final version. The clients believed that a more detailed photo was necessary to convey the volunteer nature of the page, and I concur.
CONTACT
Thanks for checking out my portfolio. If you're interested in using my services, or have a question, don't hesitate to reach out to me!
Thanks for submitting!