Project Compilation
BoG Design Ops
Collection of Projects by Design Ops.
DURATION
Aug. 2023 - Current
ROLE
Product Designer
TEAM
Self, Joshua Samuel
TOOLS
Figma, Figjam
01. Background
Context and Purpose
CONTEXT
Background
Bits of Good is a student-led organization at Georgia Tech that uses technology for social good. It partners with local non-profits to build digital tools that enhance their impact. By leveraging students' skills and enthusiasm, Bits of Good bridges the gap between technology and social good, creating a positive community impact.
PURPOSE
What are Design Ops?
The Design Ops team at Bits of Good enhances project efficiency by providing essential design support. Like gardeners, we cultivate the design ecosystem to help project teams and designers thrive. We create and maintain design systems, facilitate collaboration, improve workflows, and ensure quality in all design outputs. This page compiles our key projects, including design requests and internal initiatives like the design system all in one place.
02. Southface
Design Requests and Enhancements
CONTEXT
What is Southface?
Southface is a non-profit organization dedicated to promoting sustainable homes, workplaces, and communities through education, research, advocacy, and technical assistance. As part of Bits of Good, the Design Ops team has undertaken several design requests to improve Southface's digital tools.
DESIGN REQUEST 1
Tag Design Request
If multiple tags are attached to a standard card, only the first three tags are visible in the standard card view. Users must open the standard card to see the remaining tags in a left-to-right scrollable view. Many of these tags are long and often get cut off, and users are unaware of the need to scroll unless they hover over the tags.
DESIGN REQUEST 1
Solution
We redesigned the tag display to prevent tag cut-off and enhance visibility. The new design introduces a tag indicator that shows the number of additional tags not immediately visible. Clicking on this indicator opens a popup where users can view all the tags in full.
DESIGN REQUEST 2
Adding Notes in Report
The Report Builder currently lacks the functionality for adding new notes to standards that do not already have notes. Users can only edit existing notes, which limits the flexibility of the tool.
DESIGN REQUEST 2
Solution
We introduced a new feature that allows users to add notes to any standard, regardless of whether it already has notes. This enhancement includes a button for adding new notes, which appears alongside each standard in the Report Builder.
DESIGN REQUEST 3
Responsive Design
The existing layout of Southface's web app does not adjust well to different screen sizes, particularly on laptops and tablets. This issue affects the usability and accessibility of the app across various devices.
DESIGN REQUEST 3
Solution
I implemented a responsive design to ensure optimal viewing and usability across different screen sizes. This involved adjusting the layout and interface elements to dynamically fit the mobile view.
02 Angels Among Us
Design Requests and Enhancements
CONTEXT
What is Angels Among Us?
Angels Among Us Pet Rescue is a non-profit organization dedicated to rescuing dogs and cats from high-kill shelters in Georgia. Their mission is to save as many animals as possible from euthanasia, provide them with medical care, and find them loving, permanent homes. Angels Among Us relies heavily on a network of volunteers, foster homes, and donors to carry out their life-saving work.
DESIGN REQUEST 1
Notification System
The client requested a notification system to alert users of new posts that fit their criteria. This system should send email or text notifications and allow users to turn notifications on or off, ensuring they don't miss relevant posts when open for new fosters.
DESIGN REQUEST 1
Solution
We developed a notification system within the settings page that allows users to manage their notification preferences. The settings include options to enable or disable email notifications and a feature to pause notifications. Additionally, users can edit their contact information directly from the notification settings.
DESIGN REQUEST 2
Draft Posts
The client wanted a feature to allow users to save posts as drafts in case they can't finish a post immediately or want to publish it later. This request was driven by the need for users to have the flexibility to start creating a post and return to it at their convenience, without losing any progress.
DESIGN REQUEST 2
Solution
We created a "Draft Posts" page, which is accessible from the drop-down menu alongside "Showing All Posts," "Only Covered Posts," and "Only Uncovered Posts." This new page allows users to save posts in progress and return to them later. The interface for draft posts mirrors the layout of the existing pages but includes additional functionality with Edit and Post buttons for each draft. This design ensures that users can easily identify and manage their draft posts. Publishing a draft post will remove it from the page as well.
03 BoGHack
Hackathon Website Design
CONTEXT
What is BoG Hack?
BoGHack is Bits of Good’s 1st ever hackathon. This 36-hour event focuses on social good and community building. Participants have the freedom to create innovative solutions within these themes. Exclusively open to Bits of Good members, BoGHack offers a unique opportunity to collaborate, innovate, and strengthen the community.
WEBSITE DESIGN REQUEST
The Requirements
I was tasked with building the BoGHack website, ensuring it meets specific requirements to effectively showcase the event. The website includes detailed sections on About, providing an overview of BoGHack and its focus on social good and community building; Tracks, detailing the BoG Track, Social Good Track, and Sponsor Track; Schedule, outlining the 36-hour event timeline with key activities and deadlines; FAQ, addressing common questions and essential information for participants; and Sponsors, highlighting the contributions of the event's supporters. These components ensure that the website offers comprehensive information and enhances the overall experience for BoGHack participants.
WEBSITE DESIGN REQUEST
The Design
The BoGHack website features a clean, modern design that emphasizes clarity and engagement. With a prominent banner displaying the event's name, dates, and a vibrant call-to-action button, the homepage immediately captures attention. The use of a simple navigation menu ensures easy access to key sections, while the color scheme and typography create a cohesive and inviting aesthetic. The design incorporates intuitive layouts and ample white space to enhance readability and user experience. Additionally, the responsive design ensures that the website is accessible and user-friendly across various devices, including laptops, tablets, and smartphones. You can visit the design here.
04 Design System
System Workshop
CONTEXT
What is BoG Design System?
The BoG Design System is a framework to streamline the design process and ensure consistency across Bits of Good projects. It includes Figma components, color tokens, and typography styles. BoG Capy, created two years ago, many teams have since made their own systems, causing inconsistencies. A unified BoG-wide design system would increase visual consistency, simplify updates, enhance accessibility, and ease development. We aim to update the system to reflect designers' needs, align with frontend libraries, and be easy to use.
WORKSHOP
Design System Workshop
To better educate BoG designers about the design system, the Design Ops team decided to build a comprehensive workshop. This workshop aims to educate designers on what a design system is and how to effectively use it. Additionally, I developed a Figma workshop specifically focused on buttons. The vision for the BoG design system is for each team to copy and adapt it to their product's style. The workshop focused on component variants alongside color styles and taught designers how to customize the vanilla component to fit their unique design systems.
Click photo to visit workshop
FUTURE
Next Steps
Update the Current Design System: Revise and expand the existing design system to reflect the latest design standards and practices. This includes updating Figma components, color tokens, and typography styles.
Conduct Training Workshops: Organize and conduct workshops to educate all teams on the updated design system. Focus on key aspects such as component variants and customization techniques to ensure designers can adapt the system to their unique project needs
.Implement Feedback Mechanism: Establish a feedback loop where designers can share their experiences and suggest improvements. Regularly review this feedback to make iterative updates to the design system, ensuring it remains relevant and user-friendly.
TechEats
Portfolio V1