SUMMARY
For this project, I embarked on creating a dashboard tailored for culinary enthusiasts, aiming to provide a platform for recipe sharing and tracking grocery expenses. The dashboard incorporated six modules of information, including social media interactions, recipe recommendations, user profiles, a curated recipe pinboard, receipt scanning for earning points, and graphical representations of monthly grocery expenditures. Through this endeavor, I aimed to deepen my understanding of dashboard and UI design, culminating in an engaging prototype crafted using Adobe XD.
GOALS
Beyond aiming for a good grade, my objectives were to grasp the fundamentals of dashboard creation and UI/UX design principles. I wanted to learn how to translate conceptual ideas into tangible designs, understand user needs, and effectively communicate information through visual elements.
Purpose of Dashboard
The dashboard aimed to serve as a centralized hub for culinary enthusiasts, offering functionalities for recipe sharing and grocery expense tracking. It was intended to simplify users' cooking and shopping experiences by providing easy access to recipes, personalized recommendations, and expenditure insights.
sketches
preliminary low-fi wireframe
Preliminary Work
In my initial research phase, I analyzed existing dashboards that resonated with me, focusing on color schemes, components, and design layouts. One particularly impactful note was a dashboard's efficient organization of modules, which inspired my own layout decisions. During the low-fi wireframe stage, I sketched out rough concepts, considering features such as social media integration and receipt scanning. These wireframes helped me visualize the structure and flow of the dashboard before diving into detailed design.
med-fi wireframe with the completed design system
Design System + Med-fi Wireframe
For the design system, I chose fonts that were clean and easily readable, such as Open Sans and Lato, to ensure optimal legibility across various screen sizes. The color palette consisted of vibrant hues inspired by fresh ingredients, invoking a sense of culinary excitement. UI styles and iconography were selected to be intuitive and visually appealing, enhancing user engagement. The med-fi wireframe depicted the layout of the dashboard, showcasing the placement of modules and navigation elements for seamless interaction.
Dashboard Construction
Assets were created to complement the design system, including icons for social media integration and receipt scanning. Buttons were designed with multiple states to indicate interactive feedback, such as hover effects. Widgets were developed to display dynamic content, such as recipe recommendations and expenditure graphs, seamlessly integrating with the overall design. The final dashboard layout prioritized ease of use, with clear navigation paths and visually distinct modules for intuitive interaction.
final design
Knowledge Gained
Through this project, I gained proficiency in Adobe XD and deepened my understanding of UI/UX design principles. I learned to balance aesthetic appeal with functionality, considering user needs at every stage of the design process. This experience also fostered a mindset of continuous learning and adaptation, as I navigated challenges and iteratively refined my designs to create a cohesive and engaging dashboard prototype.
click dashboard below to experience yourself
