Challenge
Rebuild SERL Website with a design system
Timeline
Aug 2020 - Sep 2020
My Role
Worked on Interactive /Visual Design teaming up with Jennifer and Aveina
Wireframes - Adobe XD
Site Development - WordPress
Tools
Quote
Simplicity and consistency is the key to a successful design.
Results
A user-friendly website that helps CSUN students to learn about the SERL program and to forward their applications.
Overview
Systems Engineering Research Laboratory, also known as SERL, is a research facility within Cal State Northridge geared towards students with interests in computer science development, artificial intelligence, and engineering. Their mission as SERL members is to improve the performance, safety, and efficiency of human-centered systems through innovative use of systems engineering analysis, human factors engineering, and information technology. We have. created a consistent design system throughout the site to give users a better understanding of their mission. Also, this case study includes how we have developed the site using WordPress and how we have checked accessibility with the UserWay plugin.
Problem
The previous website got hacked
-
The design and layout were not consistent throughout the site (h1, h2, h3, h4, body)
-
Margin and padding issues
​
Extra items
-
Embedded a form to the website to receive student applications
-
Added a page for current students and alumni
-
Added cards for current and past projects
-
Added project pages for each card
​
Old SERL Site (Home and Project Page)
​
Process
Site Map
Site Structure
Site Development
Site Development using WordPress - Tempaltes
Atomic System
Styleguide, Atoms, Molecules, Organisms, Wireframes, Anotations
Accessibility Checking
Font Sizes, Color Contrasts, Alternative Texts
Site Map
Atomic System
We used an Atomic design system to build the SERL site.. Atomic design is atoms, molecules, organisms, and pages concurrently working together to create effective interface design systems. Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Also, this system helps to keep unity and consistency.
Atoms
The simplest building blocks call as atoms. This includes labels, buttons, backgrounds, images, headings, inputs, colors, icons. We cannot break down these atoms any further. They are abstract. The below image shows the atoms that we wanted to use on the SERL site.
Molecules
When a group of atoms bonds together, they create functional elements and they are known as molecules. This is the smallest fundamental unit of a compound and more concrete than atoms. This is a backbone for complex systems.
Organisms
When a group of molecules grouped together to form relatively complex, unique elements of an interface we call it organisms. This encourages creating standalone, portable, reusable components such as navigation and footer.
Templates/Pages
The next level is the templates. When we combine those organisms, we create a template that can be used on pages. Templates help to keep consistency and to save time. SERL has five main pages such as Home, About, Projects, Publications, and contact. On our site, we use the same template for current publications and past publications.
Wireframes - Mid-fidelity
Wireframes - High-fidelity
.jpg)
Site Development
After we finalized the wireframes and design system, we set up the domain name for SERL with the Web development team's help. The below examples show the WordPress structure of the above pages.
SERL site
We have made the SERL site very user-friendly. We have used the atomic design system to keep consistency throughout the site. As a result, the user understands content and functionality.
Accessibility Checking
We are using the Accessibility by UserWay widget on the SERL site. It allows users to change site contrast, highlight links, increase text sizes, increase text spacing, and pause animations. Also, this widget includes curser and tooltips.
Results
The SERL site helps CSUN students to learn about the SERL program.. Also, the site includes the project they are working on, with images, so students can get a better understanding. Also, the site gives contact information. As a result, if a student likes to contact and join we have embedded a google form to the site as well. Visit: csunserl.tech