Technology Used:
A trusty pencil, a sheet of paper, a ruler, Google Forms, Figma, Adobe Color, Dribbble, FontAwesome, Unsplash, Chart.js
My Role:
As the sole UI/UX designer on this project, I created and conducted user surveys to gather data that would inform the ultimate design, documented user personas and key problems for each, drafted wireframes of a component-based interface for the dashboard, designed a mood board to create an overall visual direction for the project, and combined both the wireframes and mood board to high-fidelity mockups. After completion of designs, I determined long-term ways to measure the success of the project and gather data for ongoing improvements.
The Research:
All research was conducted using a survey created by me in Google Forms.
The user goals were determined to be as follows:
1. Store and access all information related to the renovation project in one location
2. Track costs
3. Determine quickly if they are on track for completion within budget and time frame
4. View progress on renovation tasks
The Wireframes:
The Mood board:
Because this project needed to be mocked up quickly, no branding was provided in the beginning. To create some semblance of a cohesive design, I created a mood board to use as inspiration for the overall style.
The Mockups:
Future Measurements for success:
Number of 5-star reviews in "What do you think of this product?" survey
• A Simple modal that appears on the screen asking the user to rate the product
• Appears every 30 days until completion of the project
Allows for users to dismiss the modal, click a star rating, and/or leave a comment explaining their rating
Number of referrals sent by users
• Ratio of customer sign-ups to customer onboards
Future Plans:
• Additional screens showcasing the onboarding process for initializing the dashboard with the user's specific project, hover/focus on buttons, clickable icons, charts, and project inspiration photos, and navigation menus (account and settings)
• Interactive prototype for further design context and user testing
• Responsive mockups of 1-column approach
• Animation of progress bar graph to update when a task is checked off
• Integration with banking accounts to pull in purchases for Budget Tracker
• Categorization/tags of purchases
• Invoice payment integration with Stripe and/or PayPal
• Contractor dashboard for project management
• Color theming tool for users to customize the colors on their dashboard
• Additional interfaces for each type of contractor (interior designer, tile/flooring, electric, etc.)