[et_pb_section fb_built="1" _builder_version="4.4.6" background_color="#f7f7f7" background_color_gradient_direction="123deg" background_enable_image="off" custom_padding="32px|||||" locked="off"][et_pb_row _builder_version="4.6.5" custom_padding="||1px|||"][et_pb_column type="4_4" _builder_version="4.6.5"][et_pb_text _builder_version="4.4.6" text_font="Montserrat||||||||" text_font_size="18px" text_line_height="1.6em" header_font="Lato|700||||||rgba(0,0,0,0)|" header_text_color="#000000" header_font_size="50px" header_line_height="1.2em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" custom_margin="0px|20px|14px|20px|false|true" custom_padding="0px||||false|false" animation_style="fade" header_font_size_tablet="" header_font_size_phone="30px" header_font_size_last_edited="on|phone" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone" locked="off"]

Ragno e-learning

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.6.5" custom_padding="0px|||||"][et_pb_column type="4_4" _builder_version="4.6.5"][et_pb_text _builder_version="4.4.6" text_font="Montserrat||||||||" text_text_color="#000000" text_font_size="18px" text_line_height="1.6em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" custom_margin="0px|20px|-2px|20px|false|true" custom_padding="0px||||false|false" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone"]

Ragno E learning is a personalised professional ecosystem for skill development programs

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.6.5" custom_padding="1px|||||"][et_pb_column type="4_4" _builder_version="4.6.5"][et_pb_image src="http://rahulram.in/wp-content/uploads/2020/12/ragno.png" title_text="ragno" _builder_version="4.4.6" custom_margin="6px|||||" custom_padding="||0px|||" box_shadow_style="preset2"][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="4.4.6" background_color="#f9f9f9" custom_padding="35px||2px|||" locked="off"][et_pb_row column_structure="2_3,1_3" _builder_version="4.6.5" custom_padding="||4px|||"][et_pb_column type="2_3" _builder_version="4.6.5"][et_pb_text _builder_version="4.4.6" text_font="Lato||||||||" text_text_color="#474747" text_font_size="18px" text_line_height="1.6em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" custom_margin="0px|20px|40px|20px|false|true" custom_padding="0px||||false|false" animation_style="fade" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone"]

Problem Statement

Ragno E learning is a personalised professional ecosystem for skill development programs. ,It provides one-one interactive online classes. The portal helps to keep track of students performance throughout the course duration.

[/et_pb_text][et_pb_text _builder_version="4.4.6" text_font="Lato||||||||" text_text_color="#474747" text_font_size="18px" text_line_height="1.6em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" custom_margin="0px|20px|40px|20px|false|true" custom_padding="0px||||false|false" animation_style="fade" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone"]

To Increase the enrollment of the students by having clear and prominent user experience.

[/et_pb_text][/et_pb_column][et_pb_column type="1_3" _builder_version="4.6.5"][et_pb_text _builder_version="4.4.6" text_font="Lato||||||||" text_text_color="#474747" text_font_size="18px" text_line_height="1.6em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" custom_margin="0px|20px|40px|20px|false|true" custom_padding="0px||||false|false" animation_style="fade" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone"]

My Responsibility

As a WordPress designer my role is to brainstorm and gather necessary information, wireframing and wordpress development using divi plugin.

Project Duration:

May 2020 to Jun 2020.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" admin_label="Feature Section 02" _builder_version="3.22" use_background_color_gradient="on" background_color_gradient_start="#f7f7f7" background_color_gradient_end="#ffffff" background_color_gradient_start_position="44%" background_color_gradient_end_position="44%" custom_padding="34px|0px|6px|0px||"][et_pb_row admin_label="Feature Area" _builder_version="3.25"][et_pb_column type="4_4" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text admin_label="Subtitle" _builder_version="4.4.6" text_font="Lato||||||||" text_text_color="#474747" text_font_size="18px" text_line_height="1.6em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" custom_margin="0px|20px|40px|20px|false|true" custom_padding="0px||||false|false" animation_style="fade" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone" locked="off"]

Brainstorming & Wireframing

The Project had short duration for completion. so we directly jumped into brainstorming session discussing on product vision, strategy, target audience with the Product CEO. Based on the discusionsihad drafted a low fidelity wireframe in figma and presented with the stakeholders.

[/et_pb_text][et_pb_image src="http://rahulram.in/wp-content/uploads/2020/12/Wireframes-Ragnoelearn.png" title_text="Wireframes-Ragnoelearn" _builder_version="4.4.6" custom_margin="||41px|||"][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.4.6"][et_pb_column type="4_4" _builder_version="4.4.6"][et_pb_text admin_label="Subtitle" _builder_version="4.4.6" text_font="Lato||||||||" text_text_color="#474747" text_font_size="18px" text_line_height="1.6em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" custom_margin="0px|20px|40px|20px|false|true" custom_padding="0px||||false|false" animation_style="fade" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone" locked="off"]

Building Design System 

Design consistency plays a vital role in the overall user experience of the product. I ensured all the brand assets- Typography, Icons, Colors, Grid system are based on web accessibility Guidelines and adaptable to wordpress framework.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" admin_label="Quote Section" _builder_version="3.22" custom_margin="-1px||50px|||" custom_padding="4px|||||" locked="off"][et_pb_row column_structure="1_2,1_2" admin_label="Quote" _builder_version="3.25"][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="http://rahulram.in/wp-content/uploads/2020/12/Color-Pallete-1.png" title_text="Color-Pallete" _builder_version="4.4.6"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="http://rahulram.in/wp-content/uploads/2020/12/Typography-1.png" title_text="Typography" _builder_version="4.4.6"][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.4.6"][et_pb_column type="4_4" _builder_version="4.4.6"][et_pb_text admin_label="Subtitle" _builder_version="4.4.6" text_font="Lato||||||||" text_text_color="#474747" text_font_size="18px" text_line_height="1.6em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" custom_margin="0px|20px|40px|20px|false|true" custom_padding="0px||||false|false" animation_style="fade" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone" locked="off"]

Highfidelity Design in WordPress

The main reason for going with wordpress is to add more pages in future and creating a reusable UI components will drastically reduce the maintenance cost and without a developer the site can be easily maintained and scaled.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.4.6"][et_pb_column type="4_4" _builder_version="4.4.6"][et_pb_image src="http://rahulram.in/wp-content/uploads/2020/12/Ragno-homepage.png" title_text="Ragno-homepage" _builder_version="4.4.6"][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="4.4.6" background_color="#00326B" background_color_gradient_direction="231deg"][et_pb_row _builder_version="4.6.5" locked="off"][et_pb_column type="4_4" _builder_version="4.6.5"][et_pb_text _builder_version="4.4.6" text_font="Montserrat||||||||" text_text_color="#ffffff" text_font_size="18px" text_line_height="1.8em" header_2_font="Montserrat|700|||||||" header_2_text_color="#000000" header_2_font_size="50px" header_4_font="Montserrat|700|||||||" header_4_text_color="#ffff00" header_4_font_size="25px" header_4_line_height="1.6em" custom_margin="0px|2px|40px|2px|false|true" custom_padding="0px||||false|false" header_2_font_size_tablet="" header_2_font_size_phone="35px" header_2_font_size_last_edited="on|phone" locked="off"]

What I've Learned throughout the design process?

1.How to rapidly wireframe in short duration.

2.Making a responsive design system which can adapt to wordpress design system.

3.Creating reusable UI components on WordPress Divi was challenging.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version="4.4.6" custom_padding="0px||3px|||" locked="off"][et_pb_column type="4_4" _builder_version="4.4.6"][et_pb_button button_url="http://www.rahulram.in" button_text="Back To Portfolio" button_alignment="left" _builder_version="4.4.6" custom_button="on" button_text_size="20px" button_text_color="#00208a" button_bg_color="#29c4a9" button_bg_color_gradient_start="#da502b" button_bg_color_gradient_end="#f8b172" button_border_width="0px" button_border_color="rgba(0,0,0,0)" button_border_radius="3px" button_letter_spacing="3px" button_font="Roboto|500||on|||||" button_icon="%%3%%" button_on_hover="off" custom_margin="20px||20px||true|false" custom_padding="|36px||36px|false|true" button_text_size_tablet="16px" button_text_size_phone="14px" button_text_size_last_edited="on|tablet" button_icon_last_edited="off|desktop" box_shadow_style="preset1"][/et_pb_button][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="4.4.6" background_color="#fcfcfc" custom_padding="13px|||||" locked="off"][et_pb_row _builder_version="4.4.6"][et_pb_column type="4_4" _builder_version="4.4.6"][et_pb_text _builder_version="4.4.6" header_2_font="|300|||||||" header_2_font_size="30px"]

Similar Casestudies

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure="1_2,1_2" _builder_version="4.4.6"][et_pb_column type="1_2" _builder_version="4.4.6"][et_pb_image src="http://rahulram.in/wp-content/uploads/2021/04/SMR-Thumbnail-2.png" title_text="SMR-Thumbnail" url="http://rahulram.in/serene-meadows-casestudy/" _builder_version="4.4.6"][/et_pb_image][/et_pb_column][et_pb_column type="1_2" _builder_version="4.4.6"][et_pb_image src="http://rahulram.in/wp-content/uploads/2021/04/IX1-Thumbnail.png" title_text="IX1-Thumbnail" url="http://rahulram.in/ix-casestudy/" _builder_version="4.4.6"][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure="1_3,1_3,1_3" _builder_version="4.4.6"][et_pb_column type="1_3" _builder_version="4.4.6"][et_pb_image src="http://rahulram.in/wp-content/uploads/2021/04/Logofolio-2.png" title_text="Logofolio" url="http://rahulram.in/logos/" _builder_version="4.4.6"][/et_pb_image][/et_pb_column][et_pb_column type="1_3" _builder_version="4.4.6"][et_pb_image src="http://rahulram.in/wp-content/uploads/2021/04/LeadMirror-Thumbnail.png" title_text="LeadMirror-Thumbnail" url="http://rahulram.in/leadmirror/" _builder_version="4.4.6" hover_enabled="0"][/et_pb_image][/et_pb_column][et_pb_column type="1_3" _builder_version="4.4.6"][et_pb_image src="http://rahulram.in/wp-content/uploads/2021/05/1596469241-694.jpg" title_text="IPL Fest" url="http://rahulram.in/iplfest-2020//" _builder_version="4.4.6" border_radii="on|4px|4px|4px|4px"][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section]