UX/UI
For the Empowerment Factory website, I designed the user experience and user interface for both desktop and mobile versions. The I utilized for this project included PowerPoint, Word, and Figma. The primary objective of this project was to evaluate and test my skills in UX/UI design.
Project Overview
The Product: Website for mobile/desktop
The Empowerment Factory needed to overhaul their website for better navigation so that more people will discover and sign up for programs/projects.
Project duration:
June 2021 to February 2022
The problem:
The website is having difficult with navigation
The goal:
To make a quick, easy, and safe way to navigate the website and make it easy to sign up for programs.
My role:
UX designer designing the website and phone site/editing photos.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on design
Understanding the User
Our objective was to assist in the creation of a website with updated content. To achieve this, we designed wireframes to ensure user-friendliness. However, we encountered some issues that arose from assumptions.
Pain Points
1
Outdated
Content was outdated and no longer relevant (some events were no longer done).
2
Accessibility
Users should be able to easily take the navigate through content and sign up for events.
3
Input
Users sure be able to easily see upcoming events and sign up.
Original Website
This is the original website the color and content needs to be revamped and changed.
Starting the Design
Site Map
We already knew that the site was being revamped so there there weren't many paper prototypes. We instead forced on how the content should flow.
Logo was placed in all of the protypes
First Steps
We tried many different shapes/backgrounds, however we decided to use the logo's colors orange, yellow, and blue.
Decided to use a pop art background as the colors are reminisce of the style
Bottom bar for social media links
Yellow was decided to be a bad idea
Next Steps
Once the desktop theme was agreed upon, work began on the mobile prototypes. We took different parts from the desktops for the mobile version.
Frame can be move to locate bird smart software can be use to confirm
The gears from a previous desktop versions was added to the bar.
A Spanish button was placed to help our users
Next Steps
Once prototype was agreed upon
Donate was moved to the top corner as a button
Findings
I conducted multiple revisions of the website to play/ensure readability and usability. Here are some of the findings from the drafts that helped guide the process to the current design.
Round 1 Findings
-
shouldn't use neon yellow with white
-
Shouldn't animate anything
Round 2 Findings
-
Navbar woes
-
Should change background from stars to gears
Refining the Design
Mockups
Make the camera open when the icon is clicked
We really wanted to focus on displaying the information in an easy format that would allow the user to navigate easily.
Before Usability Study
After Usability Study
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flow for getting to the profile tab
Link to mobile prototype
Accessibility Considerations
1
We considered readability by ensuring font sizes and text placement. We also have had tested.
2
We are planning to change the tab names and add drop down tabs.
3
We wanted users to be able to quick and easily navigate the site
Going Forward
Impact:
Inconclusion, Website has passed the research phase and will go on to the next stage of programming.
What I Learned:
We have learned that you can not always guess where the pain points are/will be and that it is important to be flexible.
Next Steps
Asset List
Here are the assets I created for the website. Unfortunately, some of them were not utilized.
