I designed this fictional mobile application for an Adobe XD design course. The task was to design an application in an industry I am familiar with. This application allows users to manage freelance designers.
Project overview
Challenges
- Showing the most important business KPIs on the dashboard
- Making the process of finding suitable designers as easy as possible
- Highlighting different experience levels and skill sets
Solutions
- Showing current job information and KPI graphs on the dashboard
- Suggesting freelancers and highlighting differences between them
- Adding tags and highlighting hourly rate on freelancer profiles
Results
- High fidelity designs
- High fidelity prototypes
Research
I started the design process by researching competitors and reflecting on my own experience as a freelance designer. I also created a user persona that reflects a typical user which you can see below. Based on my research I picked a dark colour palette to create a unique brand identity and picked green as the accent colour for its calming nature.
Low fidelity designs
During this phase I produced sketches and wireframes
Wireframes
I created wireframes for all the key pages to work out the optimal layout. Based on my research I made sure to include all the necessary UI elements.
High fidelity designs
During this phase I produced high fidelity designs and prototypes in Adobe XD.
Landing page and empty homepage
The main landing page design promotes “Create account” as the main CTA. When users first sign up, the homepage would be empty so to make the onboarding process easier, I added a placeholder graphic with some instructions.
Homepage with data and freelancer profile
On the homepage I included key information that a hiring manager would want to see. On the freelancer profile page I show the most important information that would allow hiring managers to decide if they want to hire this person (hourly rate, experience on the platform etc).
Messages pages
On the messages page I grouped messages by freelancer as well as project. On the chat page I focused on showing messages in an easy-to-read design with clear message statuses similar to WhatsApp.
Talent page and menu
Before entering a search query, the talent page shows trending freelancers and categories to make the process of finding freelancers easier. The slide-out menu contains links to all key pages a user might need to manage their account and navigate the app.
