Redesigning I&E-Cell website - Pt.1

The I&E Cell website, hosted on CPANEL, currently uses plain HTML, CSS, a bunch of bootstrap components, and some javascript. Although the website is quite functional and optimized, I believe that some problem that exists with it is its poor UI design, therefore a bad user experience. The design should be built in a component-based hierarchy. The benefits we get from it are many, like organized content, fast routing, etc. But the downside is re-rendering, v-dom, and limited customization that can be avoided by choosing the right tech stack.

Choosing the right Techstack

  • NextJS, a front-end React-based framework.
    Comes with predefined page routing, SEO optimization, and support for CSS preprocessors.
  • TailwindCSS, writing CSS in classes
    Opts for a different way of processing classes. unlike Bootstrap which uses chunky JS methods to work, this just writes CSS into the class names of the elements. It also supports additional plugins to work with.

Site Structure

Home Page

HomePage Mindmap

Tweaks in brief

  • Left-align the Content of Hero section and place the latest update section within the right side of the hero section. Updates should list themselves vertically at most 5. A glossy background is recommended for the Update cards.
  • Remove the file links.
  • Add an about section after the hero section. Include the Vision and Mission of I&E Cell as well.
  • The newsletter is occupying unnecessary space, to make a fair deal with it, reduce the description content and embed the download buttons within the banner of the newsletter. Use a toggle in the year released for the users to access previous prints.
  • Further down the List of Sections, rename the past Event section to Recent events, and limit the number of posts to three.
  • Cards in both The Events, and Visits sections should be the same as redefining a whole new HTML wouldn’t be much fruitful in a react environment. Define content as props in the common component and render wherever required.
  • Remove the Entrepreneurs Training section.
  • Remove Internship Programs and Mentor Support Section.
  • Remove Startup Initiatives.
  • Remove Incubation Center Connect. This section will be included on the Visit page of the Incubation Center.
  • Remove the Alumni Entrepreneurs section.
  • Mentors section should have a picture of the mentor.
  • Contact and email should be placed within the footer. A sitemap is to be added along with the quick links of file links that previously existed right after the hero section.

Events Page

EventsPage Mindmap

Tweaks in brief

  • A sidebar to select a year of choice to view past events.
  • Event cards should be the same used on the homepage.

Alumni Startups Page

StartupPage Mindmap

Tweaks in brief

  • Include Alumini Entrepreneurs Section inside the detailed view of particular startup.

NOTE: The layout of each of the startup pages can be better fetched when in markdown. React-markdown package support markdown formatting in Next.js. While, Tailwind-markdown for typography is also to be used along with it.

Internships Page

InternshipPage Mindmap

Tweaks in brief

  • Topbar to sort the preference of the user.
  • Roles should be noticeable at first glance.
  • Form should open in a new tab.

Team Page

TeamPage Mindmap

Tweaks in brief

  • Use Tailwind’s breakpoints to create responsive layout for cards.

CaseStudies Page

Casestudies Page Mindmap

Tweaks in brief

  • A detailed view of a Casestudy should function the same way as it does in social media, yes, the carousel effect.

    NOTE:

    • Fade out the last words of the title/description if it exceeds the length of the cards.
    • Use Tooltip in long titles.