Portfolio ankit passi (1)

21. TOPCODER PROFILE REDESIGN
THOUGHT PROCESS - BADGE TOOLTIP
Upon close inspection and associating color with the sections and
challenge track.
The following assumptions has been made.
1. Badge system is simplified and instead of providing indiviual badge to
each achievement, a consolidated view is provided for all challenge track
in which all the earned badges are counted in respective badge form.
On hover: a tooltip of that associated challenge badge will appear
containing extra contextual information such as Category of Badge which
is associated with the color information for that challenge track. And how
much user has progresses in the badge section ie How many badges that
user still has to win. It creates a milestone type so that user can keep in
check their progress.
On Click: A popup will appear which contains the information and detailed
list of all the badges earned by user. So that user can see what badges
they have won in respective category.
This way, no other space is wasted and user can also map the color with
associated challenge in their mind which is a crux of creating patterns
when user view certain type of information also known as Gestalt
Principle.
We can utilise that to induce pattern creation in mind of user but still
contextual text information and icons are also present to support their
color mapping process.

22. TOPCODER PROFILE REDESIGN
THOUGHT PROCESS - REFRESHING MEMORY/ONBOARDING
The problem posed was: how to let New / User coming after some time
about the color association to the challenge track.
I tried many methods to explicitly define the color legend but all of that
comes as disrupting the content flow and content hierarchy.
So i went to the crux of the issue and figured out the solution to address
both type of user and use the ONBOARDING process of the TopCoder to
learn / refresh their memory about the color association on the platform.
As soon as user that logs in for first time or coming back after a while, A
Onboarding popup comes up which explains the rules of interacting with
the TopCoder platform and all the information related to it before letting
them go to main dashboard.
By using this approach, It will help them to re-learn rules of Topcoder and
help them learn the platform again.
Modern website, being so complex, helps user to Re-board to the
platform by providing them with contextual information about the
services.
So that when user goes directly to platform, Patterns with color and
contextual text information can be created using Gestalt Principles and
hence, solving the issues to refresh the memory.
By if some chance, user can not still understand the pattern, they can visit
the help center for refresher as well.
This way, it doesn't affect the user - flow but acts as an extension to
increase the usability of the application.
For these type of experiences, Thorough usability testing can be conducted where we can
see if user is able to figure out what the process is and understand the color assocaition.
If user still needs explicit information, A Color legend can be provided in the profile section
which show what color means what.
Some of the experience is created by regular use of service and it helps to create a
familiarity about the color and associated information.
Since this design actually won 2nd prize in the Competition, i think Design worked for actual
customer base. But for thorough usage and changes, Proper usability testing is needed.

32. FAST - COLUMN SORTING
ITERATION 01
THOUGHT PROCESS
To create a default view, it would be better
to show all the options available to the
user.
Since user don't want to hover to each
table components, all the options for
sorting will be available to user at once.
Both chevrons in default state will mark as
Default view.
This will act as Indicator for state.
To keep things consistent, only 1 sorting
will occur at an instance
DEFAULT STATE

33. FAST - COLUMN SORTING
ITERATION 01
CLICK ON COLUMN SECTION
ACTION
ACCESSIBLITY
When user will click on the column, the
column state will transition into Ascending
state.
and upon further clicking, it will go to
descending state and after that, it will go
to Default state again, hence creating a full
lifecycle of chevron state.
The usability of this feature will be
dependent on the userbase: since the
spacing provided is less, the size of icons
are an issue for people with weak eyesight.
To encounter that, Iteration 02 is created.

34. FAST - COLUMN SORTING
ITERATION 01
INTERACT WITH THE ITERATION 01
ADOBE XD LINK
https://xd.adobe.com/view/29b2f145-fe45-431a-4235-fbb685a3ca75-5f83/?fullscreen

35. FAST - COLUMN SORTING
ITERATION 02
THOUGHT PROCESS
Since the space for both chevrons is not
available and it might also interfere with
the sight accessibility.
I worked for second iteration where we use
the web functionality to achieve out
purpose.
Initial state, no icon will be presented to
the user. hence keeping the layout clean.
DEFAULT STATE

36. FAST - COLUMN SORTING
ITERATION 02
HOVER ON COLUMN SECTION
THOUGHT PROCESS
Upon hovering over the column, the default
chevron icon with immidiate action will
appear, giving the user an instant feedback
of the change of states.
By default, it shows the ascending sort
option.

37. FAST - COLUMN SORTING
ITERATION 02
CLICK ON HOVER COLUMN
ACTION
Upon clicking the column, it will transition
to the ascending sort state.
On further click, it will transition to
descending sort and on further click, it will
transition to default state.
Thus it completes the whole sorting
lifecycle.

38. FAST - COLUMN SORTING
ITERATION 02
INTERACT WITH THE ITERATION 01
ADOBE XD LINK
https://xd.adobe.com/view/3d63c0cd-2f79-40a3-4bcc-9b9f1b2343f3-4b52/?fullscreen