The challenge
As a Product Designer at Company Rv, you take part in the end-to-end product development process and build a deep understanding of the system, the users and the business as a whole.
The challenge: take an existing dashboard web app design and replicate it in five days, with additional levels of complexity.
Requirements
MAIN DELIVERABLE
An exact copy of the reference
- Pay close attention to detail and use the Atomic Design methodology.
- Use the Jost and Lexend fonts (Google Fonts).
- Take the color palette and logo from Dribbble’s media kit.
- Iconography can be a close match.
- Avatars don’t have to be identical.
SECOND PART · IF TIME ALLOWS
Explore and improve
- An alternate version based on my own judgment about accessibility, visual and interaction design, explaining every change.
- The information architecture, with one or more diagrams of the dashboard and its navigation.
- An additional mockup: a new desktop screen or a native mobile version (iOS or Android).
THIRD PART · FOR A MORE ROBUST DELIVERABLE
Prototype and document
- A high-fidelity prototype of the web app or the mobile screen.
- A UI kit that documents the design for the design-development hand-off.
GROUND RULES
Quality over quantity. Show an intentional use of Figma features such as Auto Layout and Variants, and be ready to explain how every decision brings value to the users, the team or the business.
What I delivered
I completed the three levels of the challenge, from the replica to a tested prototype and its documentation.
-
MAIN DELIVERABLE
The closest possible copy of the Dribbble design, built with Atomic Design.
-
SECOND PART
An alternate version based on my own judgment, the information architecture and navigation diagrams, and an additional mockup for Android.
-
THIRD PART
A high-fidelity prototype of the mobile app, a basic UI kit in Zeroheight and a small user test in Maze.
Figma
The platform where all the content of the deliverable lives, along with the design elements I built.
The replica
The main deliverable: the dashboard rebuilt with reusable components, Jost and Lexend, and the colors and logo from Dribbble’s media kit.
Foundations and components
Every part of the dashboard comes from a component library organized with Atomic Design and built with Auto Layout and Variants.
Primary color
- 100#FCDFEB
- 200#FABFD7
- 300#F7A0C4
- 400#F580B0
- 500#F2609C
- 600#ED2275
- 700#BB0F56
- 800#7D0A39
- 900#3E051D
-
Atoms
The primary color scale, Jost and Lexend, and an icon set with custom icons for the dashboard sections.
-
Molecules
Buttons in nine variants, two sizes and three states, icon buttons, badges, tags and the date filter.
-
Organisms
Nine card types, from quick stats to followers and popular shots, plus the sidebar menu and the header.
-
Templates and pages
The desktop dashboard and the Android home screen, assembled from the same components.
Alternate version
Based on my own judgment about accessibility, visual and interaction design, I redesigned the dashboard. Every change has a reason.
What changed and why
-
Color contrast
I checked the palette against WCAG contrast guidelines and adjusted the colors that failed, for better accessibility.
-
Main menu
Text labels next to the icons make navigation easier for first-time users, and each section can show a notification count when needed.
-
Icons
I replaced icons such as Views and Home to better match the sections they represent, and made sure the same section always uses the same icon.
-
Quick stats cards
A clearer visual hierarchy, plus the percentage increase or decrease compared with the previous equivalent period, such as this month against last month.
-
Filters and export
Data can be filtered by month, year, week or day, or by a custom date range. Every section updates with the selected range, and the data can be exported to CSV.
-
Most popular shots
The list shows only the top 5, with standardized icons for views, likes and comments, and a View all button that leads to the full list in Projects.
-
Top keywords
Keywords became dynamic tags whose size reflects how often they are mentioned, so the main trends stand out.
-
Top followers
The top 5 followers with their name, email, likes and rank, and a View all button to the full list in Followers.
-
Views by country
The map now comes with the top countries by views, and a call to action leads to more detail in Followers.
-
General changes
A 12-column grid for better alignment and scalability, fewer shadows for a cleaner and lighter design, and the official Dribbble logo for brand consistency.
Information architecture
The dashboard is the home of eight sections: Followers, Projects, Trending, Collections, Events, Payments, Analytics and Settings. Analytics groups the key metrics: views, likes, comments and followers.
Android version
For the additional mockup I chose a native Android version of the home screen, built with the same components as the desktop.
The quick stats become a two-column grid with their monthly trend, the date filter moves next to the title, and a bottom navigation bar gives access to Home, Search, Projects and Profile.
Prototype and user testing
I built a high-fidelity prototype of the mobile app that covers the login flow: log in, a loading screen, the home screen and search.
To go one step further, I ran a small user test of this flow in Maze.
Maze
WHAT IT IS
A remote user testing platform: it runs Figma prototypes with real people and turns their clicks, paths and answers into usability metrics.
HOW I USED IT
I tested the prototype’s login flow with a small group of users to check whether they could complete it without help and where they got stuck.
UI kit
For the design-development hand-off, I documented a basic UI kit in Zeroheight with the colors and components of the system.
Zeroheight
WHAT IT IS
A platform for documenting design systems: it brings Figma components, guidelines and code together in one place that designers and developers share.
HOW I USED IT
I documented the challenge’s UI kit (colors, buttons, cards and other components) so developers could build the design without guessing.