If you have any questions, comments, or ideas be sure to send me a message.
Hearth provides neighborhood residents with all of their local needs, completing basic tasks while participating in their community. Apply for permits, request maintenance, pay dues, book amenities, and view local events. Stay on top of multiple properties and interact with your homeowner’s associations. Hearth builds the community by strengthening the homes within it, unifying community and convenience.
Concept design, UX research, user testing, wireframing, and prototyping were all done to make the vision of this product come to life.
Homeowner’s Associations across the country independently collect and spend their resources on tasks which all aim to achieve the same purposes: to protect property value, maintain shared spaces, and provide services to their residents. Hearth aims to offload the repetitive overhead, increase community involvement through convenience and accessibility, while simultaneously providing customization options for each association. Volunteer hours and revenue should be spent on what they are meant to: improving the communities they belong to.
When setting up the project, time expectations were set with the understanding that since no product like this existed, much of the time would be spent on UX Research and validating the need for a service like this.
While the ux process was done iteratively, ultimately the time investment is reflected above.
This project began as a website redesign for a single housing association, but as comparative analyses came in it became apparent that associations across the country were investing in the same core product, but with varying resources and outcomes. The design opportunity then became how to create a universal product of high quality, malleable enough to please everyone, and improve the functionality of the associations themselves.Unique to Hearth is the solving of a problem for two groups: the app is intended to assist both the volunteers and the residents. In doing so, part of the solution was to create a bridge between dual user bases.
Before beginning design on the project, I needed to gain insight into the user base. How common are HOAs? Are they growing in number? How are they funded both in time and capital? Primary research provided the following insights:
With such a large user base, I needed to interview a broad sample of residents and board members among varied demographics, allowing the ubiquitous pain points to stand out. Interviews were done in person, over the phone, via surveys. Results were sorted using affinity map and distilled into the Venn Diagram here.
With the input from the first round of interviews sorted, the design focus evolved into: "How do I create a platform which performs all of the expected functions, while also correcting the pain points seen universally across the variety of existing services?
Red routes showed the functions that would be most frequently used for an app for an HOA, and provided the basis for the minimum viable product (MVP):
User stories were also used to identify what a viable product would entail. A use of spreadsheets provided a more customizable experience to modify the stories.
With this information gathered, I could ideate the MVP with the necessary functions, while also designing corrections to pain points in processes, as well as any added resources that were commonly requested.
Feedback from users through interviews and their user stories was then distilled into three distinct personas that could encompass the majority of the user base.
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
Moving into the visual design of the app, I started with user flows of the functions for the MVP. Below are the permits and billing flows.
Billing
User flows for the billing portion of the app aims to accomodate the user desire for an easy way to view what they were being billed for, a clear schedule of payment and a way to dispute. In creating the billpay segment, we kept transactions, statements, and upcoming dates clear.
Permits
Permits were often done in offices, or one at a time. The goal here was to expedite this process and apply for multiple permits at a time, as well as be able to view the permits digitally.
Drawing a storyboard of the user's entire experience makes sure that the solution chosen is a feasible one for the user and for the native mobile app.
With the initial user flows drafted, sketches were created in Notability.
A few guerrilla testing sessions were done with these initial prototypes. The feedback indicated much room for improvement with the main theme being that there was too much going on and the design needed to be simplified, which was done in the wireframes.
Wireframes allowed me to see all of the functions that are packed into this app and move from a website design to a spacious mobile design. My initial transposition from website to mobile app showed a very dense arrangement of information, which was smoothed out over the next few iterations. Wireframes were crafted in AdobeXD.
As rounds of testing improved functionality, thought went into how Hearth should feel. When looking at housing listings, the idyllic image has clear skies and a lush lawn. To inspire that sense of new beginning and lightness into the app a palette of blues and greens were implemented. The logo font is serif to imbue a sense of tradition and rootedness.
Within the app, variance of age and accessibility is taken into consideration. The fonts are a clean sans serif, the colors provide high contrast backgrounds, icons use thick lined simple graphics, and large buttons are there for clarity and ease.
Below is a progression of the design form and colors. An alternative design was considered briefly, intending to be to be reminiscent of a national parks websites, but was discarded in favor of an app that felt more in line with modern designs and would more broadly resonate.
User tests were conducted with 5 users, and their comments were sorted into an affinity diagram, prioritizing improvements for each user flow.
These fixes are implemented in some of the corrections below, with suggestions for future features clustered in the bottom right corner.
Across all of these iterations of the permit process, the layout of the screen changes. Extra screens are necessary, and it is clunky overall. A more streamlined approach that allows visibility of available permits, status updates, and a simple way to add a new permit was designed.
In the new design, the first page covers most needs:
On the second page, dropdown menus are kept when there are many choices. However, for the relevant permit choices a scrollable layout allows a complete overview of the options. Every option also has all the necessary information explained so users don't need to reference another resource.
One of the major pain points for both residents and board members was response time for issues that arose. A common resident experience entailed calling an office, filing a report, and being given a set time to expect a response. By implementing better organization while complaints are incoming, expected wait times can be reduced. On the side of board members, the frustration was not being able to address all concerns in a timely fashion, whether the gating was sourced from available office hours, receptionist availability, and paper sorting of issues.
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
Unlike the permit process which was simplified and reduced, issue reporting benefitted from expanding the screens. Given that users are reporting an issue, a level of frustration already exists with the issue itself, so giving the users a diffused layout is meant to give them an expectation of what's to come, and walk them through th process.
With the wireframes and visuals set, a prototype of the three sketched functions are here, created in InVision. Three tasks can be accomplished:
The app is intended for users of all ages and abilities, so keeping the design simple, clean, and visible was priority. This mean keeping fonts and symbols a little bit bigger, colors a little bit darker for higher contrast, and buttons large enough to easily press, and far enough to accidentally not press.
During the initial brainstorming of this app, I kept wondering how it would work, who would program a large database, and thinking that I would have to lay out all of those things. I learned to make sure to keep the focus on what the users would see and interact with.
Onboarding screens for the residents
Onboarding screens for the HOA which will include a means of uploading guidelines, payment plans, and a means of registering properties.
Provide digital voting opportunities for current items
Allow residents to submit suggestions and concerns for the community.
Allow users to add their utility usage for monitoring, friendly competitions, and rewards. Create a friends, local, and per capita comparison.
Add your pets to your account for dog park resources or lost animals
Send ideas, inquiries, or even ASCII art.
