IEEE Event Managament System at CSUDH

Problem

The IEEE department is a computer science club at California State University, Dominguez Hills, whose sole purpose is to unite students with IEEE department and learn new things. When it comes to the events, it reaches out to the students through flyers and notice boards. Unfortunately, due to covid-19, we have many online classes, and we have fewer students on our university campus to check our events and news on notice boards. Therefore, this project will help us reach out to the students for more engaging activities within our IEEE department.

Competitive analysis

I conducted competitive analysis with some of Event management platform, direct competitors by comparing the key features in each platform. I then displayed a general summary of my findings in a structured tabular format.

Design requirements

After reviewing the business needs and user research insights, I collaborated with my committee chair(From CSU Dominguez Hills) to define the design requirements for my project. This helped guide my ideation to ensure I was always mapping my design decisions back to these requirements:

• Impactful main/ landing page - Promot the IEEE department through the hero image.
• Managing all users through the dashboard - Every user can manage their online profile.
  • Roles: Admin, President, Members, and Students
• The latest announcements should be made available to everyone.

Information architecture

Based on the design requirement above, I created an initial information architecture for the project, which includes two major modules: an admin panel and a student-facing web app.

Solution

I designed and developed the website, which gives information about the IEEE department and updates with the latest announcements and upcoming events.

LO-FI and MID-FI wireframes

I first started creating Lo-Fi design and Mid- fi wireframes to brainstorm ideas for potential solutions. I crafted several options for each user flow while listing all idea. This helped me communicate my design considerations and thought process for each option when I presented my ideas in critique sessions and design reviews with the IEEE department president.

Usability evaluation

With a medium fidelity prototype, I conducted moderated usability tests with participants from the committee members, Website using teams and students. My goal was to evaluate the usability and ease of use for the designed workflows. Each participant completed Simple tasks:

• RSVP to an upcoming event
• Add a new role through the dashboard
• Look for a winner through past event
• Modify an individual role duty from the dashboard
• Identify all announcement information from student facing web app

Findings & Design changes

01: Participants initially thought the website was only for event management.

Solution: The IEEE department's goal is to save time and effort for reaching out to students with announcements and events via an online platform. Hence, right-side announcements make our users more engaging with the latest announcement within the website.

02: Participants were initially confused on what "ADD" button can do?

Solution: A vague and generic button label causes uncertainty in users. Which I then changed into the task-specific language for button.

Design test

After analyzing findings from usability tests, I started creating high-fidelity UI designs in Figma. At the same time, I was collaborating with IEEE members to develop a technical stack and finalize the design. After, I applied that style guide to this project(Tailwind CSS). I also addressed feedback brought up during usability tests in the final designs. For e.g. Right-side announcements menu were added, and I changed the CTA name with meaningful Phrases. Designs were documented on Miro and Figma.

Final solution

After analyzing findings from usability tests, I started creating high-fidelity UI designs in Figma. At the same time, I was collaborating with IEEE members to develop a technical stack and finalize the design. After, I applied that style guide to this project(Tailwind CSS). I also addressed feedback brought up during usability tests in the final designs. For e.g. Right-side announcements menu were added, and I changed the CTA name with meaningful Phrases. Designs were documented on Miro and Figma.

Reflection

What I learned...

Keeping the design files organized is key

In a large project such as this where things are moving quickly, it’s important to keep track of all design decisions and changes. While it is more tedious to be organized throughout the project, it would have saved me time when I needed to refer back to the mockups and design decisions. This also would have helped me when I had to revisit the project and make changes to previous mockups.

Define the scope early, and be realistic

This was the project as a UX designer as well as developer, and I was definitely a little eager to do everything in a short amount of time. Obviously, this is not feasible, and I struggled to live up to my expectations. Setting the scope early and planning design efforts in phases would have helped me address problems in a bite-size approach and saved my time while I can coding for screens.