Designing a Community Hub
Published July 2023
Project Summary
This was a client project I took on working with a local community to reimagine what their town website could become.
The goal was to hint on themes of “today’s newspaper” and “driving through a new town on a road trip.”
I conducted discovery calls to consolidate all of the components that the website would be capable of hosting, diagrammed a few rounds of wireframes, and worked on some more high-fidelity mocks to begin to conceptualize a new direction for the website.
My Role
Product Designer
Teams Involved
Contract work with a client
Length
3 Days (Phase 1)
Deliverables
Design for a new Community Hub website
Modular Design
My initial discovery work resulted in a concept that the client was excited to pursue. We used a Google Sheet to draft up this “modular” design approach to solving for publishing all of their community content on one page.
Furthermore, this design would pay homage to the old-school design of newspaper layouts, and enable a feel reminiscent of the New York Times front page.
I find this approach an easy way to diagram together online when a client is not as comfortable in FigJam or Miro.
The magenta grid highlights the modular approach that we discussed.
Wireframes
In a first round of wireframes my goal was to begin building a simple modular layout with examples of how the community’s content could appear. This landing page design represented a the direction that resonated most with my client.
Adding Some Fidelity
Refining some of the UI elements a bit helped us better envision this direction and walk the client through how this would feel with their content beginning to appear in the design.
Applying a Color Treatment
The client was in the middle of a re-brand, and supplied a color palette that they were considering adopted. This was just an opportunity to flex some creative muscle and further bring to life what this concept could become.
To speed my work up and avoid over-billing, I created some color component backgrounds that made mixing and matching colors an easy exercise. We quickly outlined multiple variations and focused in on three that we liked.
Putting Together a V1
I produced a few Figma prototypes for the client to bring to an internal meeting they were holding. The purpose of this was to solicit wider feedback on members of the community board that were not directly involved in our collaboration.
Final Thoughts
This direction ultimately was not where the client wanted to go, but it moved the project along and validated certain aspects of where we would take the design next. What we did move forward with was the modular design and some of the UI components that we were beginning to develop for content.
The modular design worked well for organizing all of the different components that were needed in the experience. The project also gave the client an opportunity to begin visualizing their new brand.
For 3 days invested, this was a productive learning to take away from our time.
I’m able to share this piece of the work since it was not ultimately published. As this project is ongoing, I will update this case study as more updates transpire.