Skills
.svg)
.svg)
.svg)
.svg)
Tools
.svg)
Tech Fleet is a team of designers and researchers working remotely on pro-bono projects for non-profit organizations. This project was led and managed by Techfleet's founder.
.svg)
The H.P. Rawlings Conservatory website was quickly becoming non-functional as it hadn’t been updated (both aesthetically and on the back end) in over ten years, leading to a decline in website and in-person visits.
.svg)
Make the conservatory's website experience delightful and accessible to ensure all groups, particularly younger users and elder users, can still accomplish their goals on the conservatory website.
Primary Stakeholder Goals
Major Constraints:
We conducted a competitive analysis of 23 websites; 14 of which were indirect competitors (similar gardens and conservatories across the US), and 9 direct competitors (other cultural centers or attractions located in Baltimore city).
.png)
The above-the-fold content is focused on 3 things:
(1) Encouraging users to come visit the gardens
(2) Showing users what their gardens look like with striking and large imagery
(3) Explaining reasons why they should visit: with events, promotions, exhibitions, and more
The team performed a heuristic analysis of the Rawlings website using Jakob Nielsen’s 10 general principles for interaction design by the Nielsen Norman Group. We found several violations ranging from major to minor problems and came up with solutions on how to address those problems. The worst fell under these categories: Visibility of Systems, Consistency and Standards, Aesthetic and Minimal Design, and Help and Documentation.
.svg)
The research team worked together to create a series of questions -- largely quantitative, some more qualitative -- to help us learn about our potential user base. The aim was to gather information about how people from the Baltimore, MD area and elsewhere use websites like the Conservatory’s to plan events and visits.
Participants
Baltimoreans
.svg)
Familiar with the Conservatory
.svg)
Search performance and website usability strongly influence potential visitors and venue renters.
The current Rawlings Conservatory website is not easy to use -- almost 2/3 of users did not have their needs met.
Some features of the website -- volunteer and venue rental information, especially (but also events, ticket purchase, Conservatory photos, and the mailing list) -- are too hard to find and should be more prominent.
.svg)
Based on our surveys, we created 5 personas. Initially, we had created these to be of specific demographics, including age, gender, as well as a photo indicating ethnicity, but decided to remove that information.
We had a long discussion about personas with the team and came to the conclusion that demographic information was not relevant to this project, and it was more important to understand user's motivations, personality traits, and behaviors.
Our personas thus have gender-neutral names and no photos but offer a more in-depth look at their goals, motivations, pain points, and potential solutions.
.svg)
Based on our research, we decided it was time to build something and test it. So we went with a mobile-first design approach since we discovered the majority of website traffic came from mobile devices. This made it easy to build a prototype that we could then put in the hands of our users quickly.
Keeping the four stakeholder goals in mind, we created some user flows that our participants would complete:
We completed 5 user interviews with participants who previously responded to our survey.
Other key learnings:
Armed with a strong idea of the users' mental models from the research phase, we put together some user flows -- how a user might navigate and complete tasks on a redesigned prototype.
With the information from the heuristic and competitive analyses, I built the proposed hierarchy of information for the new website. The team then used this information to run an open card sort using UXTweak. With 89 completed card sorts, we were able to confirm many of our assumptions in our proposed IA through analyzing the similarity matrix and the dendrogram.
Our Recommendations:
We put insights from the various research channels onto “sticky notes” on a digital whiteboard in Miro -- this ultimately included data from our stakeholder interviews, heuristic analysis, Google Analytics findings, public survey, card sort study, and user interviews and usability tests. Then we created groups of insights, based upon their commonalities and associations. As clear trends emerged, we gave the groups category names and from there summarized key findings and recommendations.
With accessibility and the Conservatory's existing logo in mind, the Design team created our Style Guide.
Subdued, botanically-inspired colors that reflect the ambiance at the Conservatory.
Straightforward, easy-to-read typefaces in high contrast for accessibility.
A vectorized version of the previous logo -- increasing resolution while keeping the image the stakeholder loves.
We cross-referenced our mobile wireframes, our research, and a potential WordPress theme to ensure this design would seamlessly integrate with WordPress, while also meeting the needs of users.
We had another check-in with our primary stakeholder to understand the conservatory's needs in terms of how this will be built, who will be implementing the design into WordPress, and what the constraints are. We were given a potential WordPress theme to work from, in which we were to choose a template we felt would fit the needs of Rawlings.
Some design decisions that came out of our user testing (and other research):
After research, analytics reviews, and a successful wireframe, we created a mid-fidelity prototype to present to our client for review.
"Love how photo-forward the ideas are, with the buttons, calls to action, and healthy negative space. And cutting out so much of the clunky writing! I really love the simple and clean design."
-Rawlings Conservatory Supervisor (primary stakeholder)
.png)
We ran a remote, unmoderated usability test via Maze to evaluate the prototype. We revised the user tasks outlined in the first usability test, and 17 participants ran through them.
(1) Volunteer for the Conservatory
(2) Donate to the Conservatory
(3) Review the Photo Policy
(4) Inquire about renting the venue
%201.png)
Due to the poor performance of the Volunteer task in the usability test, my proposed solution is to change the wording of the task to be more specific about what we are trying to get users to do.
For the Photo Permit task, several participants noted they found the task instruction confusing, rather than finding the prototype difficult to navigate. My proposed solution here is explore adding an additional entry point into the photo permit flow in the main navigation.
Currently, we are in conversation to assist in the development of the website as phase 2 of the project. This will involve implementing our changes from our usability testing, and working closely with the development team to implement the design into WordPress. Stay tuned!
I learned so much from this project! Originally assigned as an add-on role as a CX Specialist, I quickly onboarded as a lead and got to lead development of UX research and design deliverables using Agile (Scrum) framework. I also provided deep-dive sessions for the team about SEO and website performance. I produced a Google Analytics audience dashboard for the project and for knowledge sharing purposes–to show the role analytics plays in performance/success measurements for a website project.
Additionally, some obstacles we faced were around timing. If we were to do this project over again, I would have preferred creating wireframes sooner so that as we gained more insights from the research, we could implement those findings into the design right away.
Right from the start the constraints around this project were massive barriers for creativity and future design. The site really should be designed from the ground up to ensure longevity, but given an 8-week project sprint, choosing a more manageable template from WordPress ended up being more effective for this project.
Moving forward, it's important to note that when considering stakeholders, consider not only their goals, but their own capabilities. If the project you design is far beyond their own use to maintain, even if it works well for the customer on the front end, then you’ve really done nothing sustainable for all users involved.
%201.png)
.png)