Stigma Free Ottawa
November - December 2023
This was a project I completed for Ottawa County while working for Webtecs, Inc. I performed the role of Lead UX Designer. The goal of the project was to educate people about the negative stigma surrounding mental health. Motivate them to break the stigma by learning how to Be Honest, Be Heard, and Be Informed.
Methods Practiced
Discovery
In the Discovery phase of the double diamond design method I worked to identify the problem. The original website is not currently up to date with its information. Critically it also lacks connections to resources for help. Lastly the website is outdated in its style and user interface.
Image of original site's landing page.
Define
In the define phase of the double diamond method I worked to detail what the new design needed to fix. After meeting with the Stigma Free Ottawa team we determined a few goals they wanted the website to solve. Firstly this new responsive website aims to help people understand the stigma around mental health and combat its negative aspects. Secondly it exists to identify and bridge gaps in services, equip service providers, create community dialogue, and ensure every child in Ottawa County has access to the mental health support and services they need. Lastly, it will do this through a modern and easy to use user interface.
Develop
During the development phase I used skills like User Flows, User Journey, Site Mapping, and Card Sorting to create the new sites Information Architecture and sketch some initial wireframes.
User Flows
During the development phase I used skills like User Flows, User Journey, Site Mapping, and Card Sorting to create the new sites Information Architecture and sketch some initial wireframes.
User Flows created for Stigma Free Ottawa.
Sitemap + Card Sort
When it came to creating the Information Architecture of the new website I conducted a Card Sort and built a Site Map. This card sort went a long way in helping me determine how users and how the Stigma Free Ottawa team would categorize info and under what headings they would put it.
In this project the card sort and site map went hand in hand. They combined to help me paint a clearer picture of the user’s mental model. Personally, I find understanding the users mental model is the most exciting and rewarding part of design. Therefore I really enjoy conducting card sorts and building site maps. They really set the framework or architecture for the project going forward.
User Flows created for Stigma Free Ottawa.
Sketches
After getting a clearer picture of the user mental model for the new Stigma Free Site, it was time to start sketching some ideas out! This is part of the reward for doing the work in the information architecture stage. You get to start sketching and see ideas come together. I always sketch with paper and pen to start, it gives me the freedom I need to create what I want. I do believe constraints are good to have in design, however I believe designing digitally can force a bit of a certain look and feel into the design you may not intend. Whereas with designing on a blank sheet of paper allows for a more natural design to appear.
Pen and paper sketches hashed out for Stigma Free Ottawa.
Digital Wireframes
After designing with pen and paper, it was time to bring things to the digital world. I start with a low-fidelity grayscale wireframe, this helps the stakeholders focus on structure of the content and not the look and feel of the site when reviewing the design at this stage. In fact, it helps me to focus on this too and not get caught up in UI designs too early!
Beginning UI Design
Once the general information structure was set and agreed upon we began sourcing inspiration for the site’s new look and feel. This was an enjoyable process that I created a mood board to assist us with. We were able to get some examples from the Stigma Free Ottawa team and find a few that match that look. I then began creating the initial UI designs below.
Usability Testing & Improvments
After conducting usability testing with 3 other peers and receiving feedback from my manager, I constantly iterated my design over the period of 3 weeks, with 5 major improvements.
Improvements #1
Importance and Location of Information.
A major point that arose from the user interviews was locating the most relevant information. The information was easy to find, but there were several ways to highlight the most important information. We then had to determine what the most important information was.
Improvements #2
Space to breath.
Spacing was very tight, causing a cluttered user interface. Providing the sections breathing room was essential to giving the users a better experience viewing the site.
Improvements #3
Sharp to Round UI.
The sharp edged user interface was interesting, but missed the point of the site’s nature. Therefore I made changes to a rounded appearance, keeping the same style overall however. The boldness of the colors was also softened to match this welcoming tone.
Improvements #4
Resources Filter.
The resources page had an overload of information to sort through. It was a natural solution to provide a filter to allow users to pinpoint the information they were looking for.
Deliver
With a few rounds of usability testing and some excellent actionable feedback we were ready to complete the design and deliver it to the developer. I created a high fidelity version of the design and put together a style guide.
Final Designs
Below you can see a few images of the final design. The most notable updates were adjusting the colors to a softer feel and moving from a sharper geometric UI to a more friendly rounded UI.
Final designs, ready for developer handoff. View Figma file here.
Final Designs
Below you can see a few images of the final design. The most notable updates were adjusting the colors to a softer feel and moving from a sharper geometric UI to a more friendly rounded UI.
Style guide for Stigma Free website. Full style guide in figma file below.
Figma File
You can view the Figma file I shared with our developer here:
Stigma Free Ottawa - Web Design
Reflection
I have written a short summary and reflection of my experience working on the Stigma Free Web design.
Pros
Taking Feedback
Development Limitations
Cons
Limited User Interviewing
Reflection
This was my first project in a new job, I was beyond excited to work on it. I learned a ton and was happy to put my past experiences to use in new ways. I was so happy when our team received the following positive feedback. “This is INCREDIBLE! (coworker) and I looked at it together and were giddy with excitement. I was nervous about opening it and seeing it – not as a reflection of your work, but more a reflection of my perfectionism and (sometimes outrageous) high-standards! This is meeting my every expectation! It is beautiful. We really liked how the shapes and colors made it feel softer and more welcoming. I feel like this version will be a lot more engaging for our audience."
Team Feedback
This was my first experience working with a design team on a project. I was giving the lead on this project and got to work right away putting ideas on paper. I shared these things with my manager and received such excellent feedback along the way. Probably the biggest piece of feedback came in the UI look and feel of the project. As you can see in the initial designs I had a much sharper looking UI, but my manager advised me to round out the edges to provide a softer, more welcoming feel. This along with other great feedback was awesome to receive, it is what helps me become a better designer everyday.
Development Limitations
Starting with a blank piece of paper will always be how I start my designs, however it can lead to some eccentric designs. And these sorts of designs sometimes need to be altered for a few reasons. Sometimes they hurt usability and sometimes they are difficult or even impossible to build with the tools the development team is using. I learned this lesson here in a few places on the design. I had to adjust parts of the design to what the tool we used to build the website was capable of. A great lesson to keep in mind for future designs.
Limited User Interviews
An area I would like to improve on would be User Interviews. I did not get to conduct user interviews before this project. I’ve found user interviews to be the most direct way of determining what job the user is trying to get done when they visit a site or interact with a product. Not conducting any for this project left it up to me to determine this more or less myself. I’ve begun to study the Jobs to be Done framework and build user interviews around it for use in the future.