top of page

The Big Bend Filipino-American Association

Context
​

For a class project in the Spring of 2020 (January-May), I worked with a group to redesign the Big Bend Filipino-American Association's website. 

​

​

The Challenge

The BBFAA is a cultural organization based in Florida dedicated to preserving and celebrating Filipino heritage. 
The Goal
​

To create a wireframe of the redesign

Scope

End-to-end

Tools

Balsamiq

Role

UX Designer

Team

Team of four members, with feedback from instructor

Responsibilities

​

My role in the group was to ensure communication and update teammates who missed a group meeting. I also focused on one part of the website, the scholarships page and its main users. The redesign process highlighted the different methods of information architecture, such as heuristics, personas, and the thinking aloud method.

 

In order to redesign the website, I:

 

  • Completed a heuristics evaluation

  • Benchmarked the BBFAA site in comparison to other similar websites

  • Created a persona for users of the scholarship page

  • Performed user testing with the thinking aloud method 

  • Designed the scholarships pages

  • Edited other webpages

  • Edited the presentation

  • Gave final approval of the project with group

​

The process was an incredibly enriching experience. I gained experience with different information architecture methods and with different software, such as Balsamiq.

bbfaa_home_new.PNG

The wireframe redesign of the home page

Key Steps

 

  • Conducting heuristic evaluation

  • Benchmarking

  • Analyzing task flows

  • Creating a persona

  • Performing user testing with the thinking aloud method 

  • Created wireframes using Balsalmiq

​

Heuristics

​

In order to gain an idea of the usability of the site, I conducted a brief heuristics evaluation. The site had a clearly labelled navigation menu and categorization scheme, but it needed improvement when it came to its content and the layout of some of its main pages, such as the home and scholarship pages. 

Benchmarking

​

In order to generate ideas for the site's new design, I looked at other websites for similar cultural associations. Each member of the team looked at another website, and then we compiled our results and observations to gain more input. 

Task Flow

​

In order to improve the usability of the site, I analyzed the task flow and the obstacles that a student might face when trying to apply for a scholarship on the BBFAA website. 

Original Task Flow

bbfaa_task_flow.PNG

Revised Task Flow

bbfaa_task_flow_2.PNG

Persona

​

The persona I focused on was the student user, who would have used the BBFAA's scholarship pages.

bbfaa_persona.PNG

User Test: Thinking Aloud Method

​

​

I performed a user test with the thinking aloud method in order to gain immediate feedback on the usability of the site. I asked a friend to pretend to be a student and gave her two tasks to find information on Scholarship page and to find information about the offered scholarships. 

​

Findings

​

  • The user navigated the BBFAA’s site mainly through the menu on the left side of the page

  • The user seemed to pass over the smaller menu at the top of the page

  • The user was confused why there are two options to donate to two different scholarship funds but only one scholarship to apply to

  • The user easily found the information for the scholarship

  • The user found it odd that the only way to apply to the scholarship was through mail

​

User Test Summary

​

The results showed that only one navigation menu was needed - the user primarily used the one on the left - and that updated content would greatly help visitors to the site. 

The BBFAA Site Wireframes

​

The ultimate goal was to create a series of wireframes that would demonstrate the improved design of the site. Some of the aspects the team improved included:

​

  • Home page is cleaner, simpler, more informative, such as upcoming event notifications

  • Static Header with navigation and call to action buttons

  • Static Footer easier to see

  • Updated content

  • Hyperlinks were added

  • Breadcrumbs added

  • Images are bigger

bbfaa_scholarship_new.PNG

My wireframe of the main scholarship page

bbfaa_scholarship_new_02.PNG

My wireframe of the application for the scholarship page

Conclusion

​

The class was extremely valuable in introducing me to the variety of methods to design a website. I worked with different software, such as Balsamiq. The final designs for the home and scholarship pages are simpler and straightforward in their content. 

​

​

Next Steps

​

If time allowed it, I would have worked to make the wireframes more high fidelity and worked towards a prototype. 

​

bottom of page