Taskbar is all about bringing the taskmasters and task workers on a single platform to engage in tasks with greater transparency. Taskbar while bridging the gap between taskmasters and taskforce, also revolutionizes the mode of payment by eliminating traditional currency mode payment. In a most contemporary way, Taskbar uses the HBAR to replace the way you pay or receive your payment, as it works in both ways, no matter you have a task or you seek a task, Taskbar helps you in both scenarios.
Find a Task
Taskbar lets you choose from a wide range of available tasks to work upon, as we are focused to grow as a versatile platform that brings the best of available tasks yet in an innovative way.
Main Objectives
For this project there were two primary objectives that we set out to accomplish through the design process:
Create branding guidelines for the company that would faithfully reflect the brand’s identity and speak to the user’s goals.
Create user interface for an e-commerce app that allows user to quickly and easily find and purchase products without needing to go to a physical store.
Our Goals
User Stories & User Flow
High Fidelity Wireframe
Prototyping, User Testing
User Interface, Visual Design
Design Tools
Adobe XD
Photoshop
Desk Research
Design process
1. Define
User Stories
In light of the scope of the project, a number of user stories were considered and I selected those which would reflects the goals of potential users. With these key user stories selected, we determined the success criteria that would determine the user flow.
Key points
The new user can access the information/ inventory without having to register, so that the user can go and explore the inventory before creating the account.
The returning user can overview the past activity, previous purchase, search history.
With having different categories of the product with basic filter option for browsing lots of products in the platform.
The Customer should be able to place multiple items in the shopping cart so the Customer can purchase more than one item at a time.
User should be able to get the recommended product in the feeds
Payment process should be followed in ease.
2. Ideate
User Flow Diagram
The User Flow Diagram helped us identify and define pain-points, problems and improvements that we redesigned to enhance user experience in reaching their end-goal such as creating a task. The User Flow helped us understand the relationship between different sections and their micro to macro interactions.
Mid Fidelity Wireframes
The mid-high fidelity wireframes helped us to asses what functionalities, layout, and components are going to have interaction with the user. While creating the wireframes we kept the client in loop for quick discussions and approval.
03.Test
Prototyping
After creating mid fidelity wireframes, We started with the prototyping using Adobe XD. This allows User to click and walkthrough and uncover small problems or pain points in the structure or flow of the user interface. This step was valuable to understand how to improve the design for users.
User Testing
With switching to User test mode in the Abode XD, we created usability test that would evaluate the prototype’s ability to help users accomplish a set of four tasks within a scenario. The Test provided valuable insights in to the user behaviour and pain points while using the Taskbar Prototype.
04.Materialize
Colours Guide
We selected a range of colors that reflects the personality of Taskbar. Orange bringing excitement and green bringing calm feelings of renewal.
#F05A22
R: 240 G: 90 B: 34
#ED0B0B
R: 237 G: 11 B: 11
#FFF6DD
R: 255 G: 246 B: 221
#1A1A1A
R: 26 G: 26 B: 26
#FFFFFF
R: 255 G: 255 B: 255
#FAFAFA
R: 250 G: 250 B: 250
#4DACA2
R: 77 G: 90 B: 34
#6DC7BE
R: 109 G: 199 B: 190
#F2FFFE
R: 242 G: 255 B: 254
#1A1A1A
R: 26 G: 26 B: 26
#FFFFFF
R: 255 G: 255 B: 255
#FAFAFA
R: 250 G: 250 B: 250
Typography Guide
Typography is the art and science of font style, appearance, and structure which creates harmony and consistency in a design. Hence, we used the font Roboto which is simple and easily readable.
Aa
FONT:
Roboto
WEIGHT:
Light
Regular
Italic
Medium
Bold
SIZE:
13px
14px
16px
17px
20px
24px
40px
54px
Icons Guide
We have used a range of recognizable and noticeable icons to communicate features and functionalities as the usage of recognizable and clear icons help in navigation as most users perceive images faster than words.
Final Screens
After completing the Wireframes, we created colors, icons, typography, as per the design style guides which helped us build a clean, clear, consistent design. Our goal was to have minimal visual aesthetics without hurting the functionality and user experience. These are the final screens where the wireframe meets the style guide and creates the main User Interface.
Homepage
We have created a Homepage where a user get's an insight of What Taskbar is, Why to join Taskbar and How Taskbar works.
Onboarding
A User has to login or register and Join the Taskbar Community to have access to a wide range of opportunities.
Profile
A User has to add their Superskill i.e. a thing you can do at breakneck speed, with high attention to detail, and also provide personal information so that potential clients can easily find you.
Find A Task
Find Task section let's you easily Find a Task, Apply for a Task and also Bid on a Task.
Create A Task
A User can Create A Task according to their need and find potentials applicants who can help achieve the task.
Hedera Wallet
Taskbar uses HBAR which is a faster, more secure and modern way of payment. All a user needs to do is link their Hedera Wallet or Create one with Taskers and they're good to go.
Final Mobile Responsive
We have created a fully responsive application adjusted to your device providing an optimal experience across the board and improving user experience.
