App Design System
Details
Role
Lead Designer
Timeline
6 Months
Deliverable
Design System & Social Media App UI
Project Goal
Create a user-friendly and visually cohesive UI design system for our social media platform that enhances overall user engagement and interaction while ensuring consistency across all platform components and screens. In addition, provide stakeholders with a functional alpha version of our new social media application.
Step 01
Typography
Selecting the "Inter" font family for our social media app was a strategic choice driven by its versatility and exceptional readability. "Inter" offers a clean, modern aesthetic that aligns well with our app's contemporary design. Its extensive range of weights and styles allows for creative typographic expression while maintaining consistency throughout the platform. Using this font family, we aim to provide a seamless reading experience, enhance the app's overall usability, and reinforce our commitment to delivering a user-friendly and visually appealing social media platform.
Step 01
Colors
The choice of incorporating bright Canary Yellow and Turquose Blue into the color palette did not come easy. After many color scheme iterations, our final choice of colors was a deliberate decision that aimed at creating a dynamic and engaging user experience. Bright yellow exudes energy, positivity, and enthusiasm, which aligns perfectly with our app's mission to foster vibrant connections and growth for our creators. It adds a cheerful and attention-grabbing element, making key features and notifications easily noticeable. Meanwhile, the soothing and soft Turquoise Blue was selected to balance the vibrancy of yellow, creating a harmonious and calming environment. This combination not only appeals to a broad audience but also symbolizes the app's commitment to facilitating friendly and uplifting interactions, making it an ideal choice to enhance the overall user interface and user engagement.
Iconography
Incorporating "Font Awesome" for icons within the app is an excellent choice because it offers a comprehensive library of scalable vector icons that are not only visually appealing but also highly customizable. Font Awesome ensures consistent iconography throughout the app, maintaining a cohesive and polished user interface. Moreover, these icons are lightweight and easily loaded, contributing to faster app performance. Additionally, Font Awesome provides a wide range of icons that cover various categories, saving development time and resources. This versatility makes it an efficient solution for adding visually engaging and functional icons that enhance the user experience within your social media app.
Step 02
Buttons
The button set is pretty extensive. It consists of 3 type variants (Primary, Secondary, Outlined) and five style variants (Default, hover, active, etc). Although our primary brand color is Canary Yellow, I understood there were accessibility issues to account for, so I had to utilize the Myrtle and Turquoise color palette to help alleviate those concerns.
Form Elements, Toggles, Check Boxes, Radio Buttons
The design system form fields, crafted based on intended user engagement and insights from various social media platforms, represent a user-centric and visually cohesive approach to interaction. These form fields enhance user experience, encourage engagement, and align with contemporary digital trends. The form fields are designed with accessibility in mind, ensuring they are usable by individuals with disabilities. This includes appropriate contrast, keyboard navigation, and screen reader compatibility.
Step 03
Components are where all of the nuanced parts of the design system come together to create beautiful elements/organisms that will be used to build out the UI Templates.
The component library is broken up into two categories: User Components, and System Components. User components are somponents thats users can edit/update and change the state of that component. System components are components that are used by users but can not be edited or changed.
Components
User Components
Timeline Pushes
My Push
System Components
Navigation
Discovery Item
Step 04
Templates & Pages
Templates are page-level objects that arrange components in a layout and articulate the design’s underlying content structure. Pages use those templates and create specific use cases for those templates
​
Our template and page components are structured to be light and dark theme compatible. This gives the users a more engaging experience tailored to their needs and likes.
