Building a brand and website from the ground up for a local UX community
Designer and Lead Developer
4 months
Brand Design, UX Design, Webflow Development
Roseville UX is a design community located in Roseville, CA that provides an inclusive forum for designers of all levels. This community was founded by Lia Fetterhoff, a former Senior Designer at Google, in June 2019 with only about 10 members (including me) and have since ballooned to about 400+ members as of February 2021.
The community initially started off without any branding and social media. Because of that, the only way for someone to learn and discover Roseville UX was through Meetup, which is a service that allowed people to start local groups in their community. To increase our presence in the area, the founder wanted to establish a brand and also created a website that acted as a second entry point into Roseville UX.
About 9 months after Roseville UX was founded, a small volunteering team was formed to take this design community to the next level. For this project, we had two key members: a lead designer/illustrator and a designer/developer (me).
Discussions about a website began in late February 2019 and the website launched in June 2019. Here's the journey of how we brought an idea to life.
To begin establishing our brand, we wanted to think about the purpose, values, and attributes for Roseville UX. These three elements are what typically makes up a brand and would influence our decisions about the design style we go with. Using a brand attributes exercise helped us document and establish a brand direction relatively quick.
After the exercise, we've believed that Roseville UX's values are community, collaborative, educational, and inspiring.
.png)
We wanted to create a brand that revolved around our goals as a community: education, modern, and fun. A mood board was created with color palettes and illustration ideas that would be used for our brand. After further exploration, we wanted our color palette to remind the user which city the group was founded, therefore the official City of Roseville logo was used as our baseline.
Some of the logo variations for Roseville UX had elements of the City of Roseville’s logo. For example, some logos had a red and blue color scheme, and a rose either next to the “Roseville UX” text or replacing the dot in the letter ‘i’.
We also experimented with different color palettes during this phase. Note that warmer hues implied a modern tone, while the bolder hues implied fun and playfulness.
Our final logo and the rose petal
The rose petal is inspired by three metaphors relating to the city in which our community began and the values by which formed our foundation.
The rose is a nod to the flower in our city’s name, Roseville. The petal is a simplified representation of the flower. The blocks represent building blocks, symbolic of how we all build upon one another when first starting our design journey.
Combining these metaphors and abstracting the shape into a simplified form eventually formed the basis of our logomark.
Primary and secondary colors
Red, blue, and black are the primary colors for our brand. The secondary colors are not used often, but are used for illustrations or to break up text-heavy content.
Red Hat Display
Red Hat Display is used for large and bold headings.
Red Hat Text
Red Hat Text is used for regular body text.
Before creating the website, the only way for people to find out Roseville UX was our Meetup page. We wanted to be strategic with the content on the website so that it catered towards a wide variety of audiences we may get.
As a non-profit organization, sponsors are key to supporting our community. We want to show how people can sponsor and support us to further build our community.
Our goal as a community is to provide opportunities for UX designers to learn, grow, and up-level their talent. We want to achieve this by allowing new and experience UX'ers volunteer for Roseville UX.
After establishing goals for our website, we dived right into creating mockups. For collaborative prototyping, we used Figma.
Low-fidelity wireframes
During the prototyping phase, we created several low-fidelity wireframes to plan the layout for the website. The first wireframe was an attempt to brainstorm the content strategy.
High-fidelity mockups
After creating several low-fidelity wireframes, we began working on high-fidelity mockups. We continued iterating on the layout during this phase because we realized that some layouts did not look great with the brand/design style applied. In later stages, the lead designer began putting illustrations into the mockups.
Home page - Navigation bar and hero section
The navigation bar is designed to as simple as possible. Our goal was to not have any dropdown menus or mega menus as they add complexity. The hero section gives the user an idea of our goals as a community.
Home page - Get Involved Section
The first thing that the user sees below the fold are a set of cards that might interest a variety of audiences. For those who are new to UX and are willing to learn, they have a direct link to our events and the volunteering opportunity. For those who wants to give a talk or support us, they have direct links to do so.
Home page - Blog and Slack Section
Along with our website, we have a few volunteers managing a Medium blog that discusses various topics in UX. We also want to highlight our Slack group, which allows the user to get the latest info about events and more.
Home page - Sponsors and Footer
We want to proudly show that Roseville UX is supported by our wonderful sponsors. Our footer is designed to be simple and provide links to our social media accounts.
Get Involved page
We created a dedicated page showing how people can get involved with our community.
Sponsors page
A dedicated sponsors page allows us to tell potential sponsors about how they can help us. This page also houses our sponsorship deck.
From the very beginning, we wanted to eliminate the code barrier for members who want to edit the website’s content or design. We chose Webflow as our main platform because it allowed us to create the website without any code.
As a developer myself, I was really impressed with the capabilities of Webflow. After a day or two of getting used to the interface, I was able to fully build out the website in less than a week. In an effort to make the website easy to edit by anyone, I turned some user interface elements into symbols, which allowed editors to easily change the content without modifying the design.
Webflow's Interface
Webflow's interface allows editors to easily go in and edit the page's content. The above picture shows the UI when an editor wants to change the content of a card.
After launching the website in June 2019, we have received overwhelmingly positive feedback from Roseville UX members and also attendees from our events. Most importantly, the launch of the website and our brand led to a substantial growth in the amount of followers for our Meetup page, gained sponsors like Sketch, and brought in a few more volunteers to our volunteering team.
Looking back at my experiences with this project, there were three points of reflection/retrospective:
While the lead designer and I were excited to jump into this project, we should’ve planned out every phase thoroughly first. This occurred to us after realizing that we should've started the brand attributes exercise first, rather than starting off with creating a mood board.
This was a project where collaboration is crucial for the product’s success. The Roseville UX’s brand and website wouldn’t have been possible if it weren’t for the constant communication and collaboration between both project team members.
Each team member learned something new about their respective area of expertise. I learned a lot about starting a brand from scratch and the lead designer learned a lot about web development.
