![](https://static.wixstatic.com/media/11062b_b75407a670324c39babd882c6c01d983f000.jpg/v1/fill/w_288,h_162,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/11062b_b75407a670324c39babd882c6c01d983f000.jpg)
![](https://static.wixstatic.com/media/c0d4e5_3ba0d06bb1c94e659d24f932242478a2~mv2.jpg/v1/fill/w_38,h_32,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/c0d4e5_3ba0d06bb1c94e659d24f932242478a2~mv2.jpg)
Rogue Code
My role:
Product Design / Research / UX Design / Visual Design / Interaction Design
Tool used:
Figma/Adobe XD/Photoshop
The product:
Design Rogue Code website(Educational website for coder)
The product contain website, Dashboard for employee/teachers and app for student.
Project duration:
This project took 1.5 month to complete
User research:
Summary
I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs.
Pain points
1
Can't ask doubt outside class
2
Time management
3
Can't Practice any time
Ideation
Digital wireframes
![Screenshot 2024-04-01 at 7.09.58 PM.png](https://static.wixstatic.com/media/c0d4e5_e4a66c8ed6884ef0ba4bc5e0c3a47897~mv2.png/v1/crop/x_19,y_0,w_1031,h_1004/fill/w_90,h_88,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%202024-04-01%20at%207_09_58%E2%80%AFPM.png)
As the design phase continues I made sure to base screen design feedback and finding from the research user.
Usability study:
STUDY TYPE LOCATION
Unmoderated Usability Study INDIA: Remote
Mirrored Screen Recording with Voice & Audio
From user's desired location (home, vehicle, etc)
PARTICIPANTS
8 total users:
(1) w/ age range 16-20
(2) w/ age range of 21-28
(3) w/ age range of 29-37
Findings
​
-
Need to ask doubt with teachers anytime
-
No event section
-
Practice area
Mockups
![Screenshot 2024-04-01 at 7.15.27 PM.png](https://static.wixstatic.com/media/c0d4e5_514d543426204767b587d6fafae0bde7~mv2.png/v1/crop/x_0,y_33,w_1168,h_648/fill/w_72,h_40,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%202024-04-01%20at%207_15_27%E2%80%AFPM.png)
High-fidelity
![Screenshot 2024-04-01 at 7.13.00 PM.png](https://static.wixstatic.com/media/c0d4e5_d44cff4bc7af4e75a7298db9e0113001~mv2.png/v1/fill/w_73,h_45,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%202024-04-01%20at%207_13_00%E2%80%AFPM.png)
The final hi-fi prototype presented cleaner user flows, better scrolling, & more details provided to user when ordering. It also included more recognizable icons.
![Screenshot 2024-04-01 at 7.14.17 PM.png](https://static.wixstatic.com/media/c0d4e5_1ef6514aca3c43abacfa07566187103c~mv2.png/v1/fill/w_68,h_31,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Screenshot%202024-04-01%20at%207_14_17%E2%80%AFPM.png)
Accessibility considerations
1
Navigation bar at top are always present and clickable
2
Dates in international format for differing languages to read correctly.
3
All colors easily readable for color blind and macular degeneration