Tacle The Design

SHPE FAU is an organization dedicated to empowering Hispanic students in their pursuit of professional careers, particularly in STEM fields. The main campus website provides valuable resources, including event details, professional attire guidelines, resume-building tips, and information on leadership programs that equip students with essential career skills. Year-round events support students in their growth, helping them become leaders and build networks. The executive board comprises 15 members, each with supporting committee members. The site is fully designed and developed for seamless browsing on both web and mobile platforms using Webflow and React.

Problem Statement

SHPE has been a longstanding organization at Florida Atlantic University, but issues arose when the board aimed to create a dedicated website for the chapter in preparation for the annual SHPE Convention. This year, the chapter faced a deadline to complete the website before the national convention in Anaheim.

‍

Upon reviewing the existing website, several critical issues were identified:

Domain and Branding: The site was hosted on a shared university domain, lacking the unique branding that would distinguish the chapter within the SHPE organization‍
Outdated Layout: The layout and structure were not only visually outdated but also broken in several places, detracting from usability.
Lack of Mobile Optimization: The site was not optimized for mobile, failing to meet modern accessibility and usability standards essential for today’s students.
Missing Key Information: Important resources were absent, such as clear information on SHPE FAU's mission, values, goals, and resources aimed at preparing students for career fairs and professional development.

‍

Understanding Problem

The executive board appointed a development team to identify key issues and implement a solution to deliver a functional website in time for the national convention. Their objectives were as follows:

Website Development: Design and build a fully operational website, ready for launch before the convention.
Automated Form Management System: Develop a system that automates the upload and organization of forms and databases to improve efficiency and organization.
- File Standards: Enforce correct naming conventions, limit file formats to PNG, and apply size restrictions to ensure quality and uniformity.
- Workflow Integration: Seamlessly integrate the banner management system into existing workflows, supporting both marketing uploads and technical integration needs.
- Form Management: Design form integration using a backend database for students interested in joining the organization.

Drafting Solution

‍The solution involved the following steps:

‍

I collaborated with the marketing team to define a clear naming convention for banners (e.g., b-in-store-c.png for an in-store carousel banner).

‍

User Interface

To improve usability, I developed a user interface (UI) for the page.
‍

This UI allowed users to:

Browse and select the webpage containing the resources required of the user.
Create a friendly environment for the user experience
Allowed easy access to different resources in a matter of seconds, less than 3 taps to reach the required resource.
Created a page for users to engage in events/activities that occur frequently in the club, allows the user/student to easily see when/where events take place without having to lose time asking around.

Overall Impact

This UI solution successfully fixed the original issues from the old website. The UI was not only visually overhauled and improved but significantly reduced the time and effort required by both the marketing and technical teams and the average user.

‍

Final Result

User-Centered Design:
This project highlighted the importance of user-centered design principles even when creating solutions for internal workflows. The UI's development ensured a smooth user experience for the product team interacting with the script.

Product Designer Contribution:
This case study emphasizes the potential for product designers to contribute beyond UI/UX design. Skills in scripting and automation can enhance process efficiency and streamline workflows.
‍

Beyond the immediate benefits, this project yielded valuable insights for future endeavors:

Embedded calendar card system, instead of a basic calendar UI, the card allows users to click on the event and add it to their calendar.
Cleaner form integration for the user.

‍

Reception & Feedback

Before implementing the framework in React, the executive board conducted a final review of the designs to ensure all required features outlined in the initial criteria were included. The board was impressed by the design's simplicity, elegance, and clarity, noting the smooth responsiveness of the mobile layout. They especially appreciated the easy access to resources and the user-friendly forms developed for students, which enhanced overall usability.