Bloom | Web App
Bloom is a full stack JavaScript friend-finder app. The app recommends potential friends to users with a unique profile-matching algorithm. I collaborated with the developer to create the UI design; once the logo, color palette, typography, and initial wireframes were approved, I worked with the developer to put it into production. This included making design adjustments and providing guidance on execution, as well as a code contribution. This is an ongoing collaboration. My next steps as UI/UX designer are user testing and design adjustments based on test result analysis/synthesis. I would also like to gain more experience with GitHub by making more contributions.
Timeline: Ongoing since Fall ‘22
Role: UI/UX Designer
Tools: Adobe XD, GitHub
Deliverables: Inspiration Board, Logo, Profile Screen with Annotations, Wireframes, Production Images
View app on GitHub
Go to app
Discovery and Inspiration Board
I began by researching apps that help users find friends; for example, I came across Boo, which, like many other apps, uses photos to help users make new connections. With our product, we recognized that there was an opportunity to provide a friend-finding experience that doesn’t make user photos part of the criteria for finding new friends (through swiping or buttons). Instead, it displays potential friends to users based on matching values and interests. For the inspiration board, I researched friendship words and phrases to guide the look and feel of the UI. I also searched for colors symbolizing friendship, and palettes that made use of one or more of these colors. Fonts, illustrations, and photos were added, along with existing UI designs.
Logo
I wanted the logo to reference the name of the app, so I explored concepts mimicking petals and flowers. I also discovered that some of the petal shapes looked like chat bubbles. We ended up going with the transparent petal concept, because it looks the most like a flower while still making use of the bubble shapes. Having the petals meet in the middle with the white circle also references connection, which the app facilitates between users.
Screen Concepts and Annotations
Once the logo, color palette, and type styles were agreed upon, I created wireframes. The developer had some screens without styling, which I used for reference. Corners were rounded to give the app a more approachable, friendly feel. I also used a soft gradient and shadows to provide texture, depth, and visual variety. When these were approved, I sent a screen with annotations (pictured below) to help in the development process.
