🚧 Site Under Construction

A web application that connects content creators with similar niches and audience size together for collaborations.

---

---

USER FLOW DIAGRAM

As a web application that is used to host unique user profiles, there needs to be an authentication system to allow users to create new accounts, log into their existing accounts, and ways to recover their accounts. This user flow diagram documents that, and helped to identify necessary html components that were needed for logging into accounts.

LANDING PAGE

Landing page flow cut up into three images

The landing page is essential for users who are new to the platform. This page acts as many users first impressions of the social media service, therefore it’s important to lay out the features and persuade the user why they should join the service. Additionally, a good landing page adds authenticity to the brand, letting users know this is a legitimate platform.

USER AUTHENTICATION

USER PROFILES

Each user is able to create an individualized profile page for displaying their content. Including links to their various social media accounts, along with follower counts. Allowing their Creator Connect account to act like a central landing page for their online presence. The main profile card remains the same for all users, displaying their content type, time zone, channel size, intended audience age range, monetization, and content durations. However, for the remaining profile cards users are able to choose between different content display boxes to highlight on their profile. Letting the profile act dynamically for different types of content creators. A YouTuber for instance, might want to include a highlight of recent videos, while an artist might want to display their most recent works.

Addtional profile cards that can be displayed on a user's profile for different types of media displays

DISCOVERY PAGES

Discovery page used for finding different types of content creation

Example sub-discovery page for gaming content

The discovery page is broken down into three sections: content categories and sub-categories, items for each sub-category, and user or group profiles following each sub-category. This means that a user can better identify users and group profiles that are relevant to their content niche. For example, a gaming content creator might look at the gaming types, select the horror genre, then any relevant games they make content for, and then would be presented with a selection of users and groups that are tagged with it.

DISCOVER USERS

When clicking on a user in the discovery page, a mini profile section will popup

HOMESCREEN

USER AUTHENTICATION

USER PROFILE

DISCOVER USERS

A mobile parking application for Western Washington University, giving WWU commuters a better understanding of parking avilability on campus.

---

---

MOCKUP WIREFRAMES

The design was created initially using a wireframe to develop a low-fidelity mockup of the necessary features, pages, navigation, and components for the next design iteration. In this wireframe, the homepage, parking, and map pages were planned out, creating a flow between the main homepage and to the subpages of the system. The notice page was created later, after the inital wireframes.

BRAND RESEARCH

As the application is tied to the existing brand entity of Western Washington University, I needed to ensure that the design looked and felt like it belonged to WWU's trademark by following in cohesive design. After some research of their websites and designs, I identified specific colors (light green, blues, white) and fonts (montserrat, Fira Sans) for use in the application. 

HOME SCREEN

The home screen promptly greets users with the number of available spots and lots. Immediately providing them with relevant data, if a user only wants to take a quick glance at the application. For users wanting to look further, they have three simple navigation options. The home screen functions as a hub to store the crux of the app's information and routes all navigation to the various subpages. 

PARKING SCREEN

The first option for navigation is to look at parking availability across lots on WWU's campus. These parking lots are sorted into student, faculty, and guest parking, the three user groups for the application. By default, student parking is shown first. Each relevant parking lot for the current user group is shown as a "card" with information on the current lot, including live camera feeds. Users have the ability to star lots, which will then show up first in the list of parking lots, allowing users to easily access their preferred lots faster. Furthermore, users can select "park now" which will pull up the relevant lot information in Park Mobile. The university currently uses Park Mobile as their pay-to-park application. So, our application allows users to seamlessly check availability, and then park on demand. This reduces the overhead work that WWU would need to put forth in order to develop the application. 

PARKING MAP

The parking map allows for users to search all parking lots on campus through a bird's eye view. Giving users a better sense of where unfamiliar lots are located, especially for those who are new to campus or visitors.  Users can use their fingers to pinch and scroll through the map. Parking lots are sorted by student, guest, and faculty parking. Lots not available for the current user group are grayed out, while those that are available, can be clicked on to show more information, such as name, lot size, and designation. Selecting a lot also allows a user to elect to "park now" which pulls up the relevant parking information in Park Mobile (further discussed in the above section).

PARKING NOTICES

The parking notices page is used to deliver university issued notices related to parking. Notices are sorted by month and year, from most recent notices to oldest. Additionally, notices marked in red are ongoing, while green marked notices have been completed, allowing for users to see past notices while keeping updated with current ones. Clicking the 'read more' button will link users to the university webpage with the official notice.

FINAL DESIGNS

The design of the mobile application emphasizes sleek simplistic design, easy navigation, color cohesion, brand identity, and readability. Additionally, the application design responds to the problem of finding parking availability on WWU's campus, with the most minimally invasive and easy to implement design.

Covid memories is an audio library that was created to share the stories of people who experienced the COVID-19 pandemic.

---

---

FIRST DESIGN

SECOND DESIGN

THIRD DESIGN

During our project development I took on the role of designing our front-end design and adding website functionality. As our project spanned a full year of development, each new academic quarter brought an opportunity to reiterate the design. Our team worked using Agile flow, allowing for iterative development of our application across quarters. Each quarter, I would receive feedback on my design from my project teammates and our client and then use this feedback to fuel a new and improved version of the design. The full functionality of our final project is demonstrated in the video below.

DEMO VIDEO

Android mobile application aimed at college students, allowing them to track drinking related data to get a better understanding of the impact of their drinking choices.

---

---

Our application addresses the issue of alcohol overconsumption in American college students, where binge drinking rates consistently range between 30% to 40% for student populations, as reported by the National Library of Medicine. Binge drinking is a harmful practice, and our application seeks to visualize the harmful effects of overdrinking practices.

Taking into account these issues, we designed an application that allows for students to log their alcohol consumption on a daily, weekly, or monthly basis. Logging their drink details and time of consumption. The system uses this input to provide blood alcohol content (BAC), calories intake, units consumed, and money spent displayed across daily, weekly, and monthly intervals. Allowing for users to track drinking related data to get a better understanding of the impact of their drinking choices and develop healither habits.

INITIAL DESIGN MOCKUPS

For the purposes of our application design, the group split our responsibilities between the different scenes. I was responsible for creating the initial design mockups for the home screen and the logging screens. My initial designs were created using Canva and placed an emphasis on proving the user with their data and pushing them to improve their habits by supplying them with tips and goals. Furthermore, I tried to achieve this without overwhelming the user with too many choices or UI elements.

LOGGING SCREEN

The logging screens provide users with the option to view their data in daily, weekly, or monthly view for the current time period. For daily and weekly views, see their logged data for the day displayed on a line chart. For monthly view, it is displayed in a color coded chart. Each of these charts display four different metrics of data– units consumed, calories consumed, BAC levels, and money spent. For each of these metrics, a total is displayed at the top, which shows the sum of entries for a particular metric for the selected time period. 

NAVIGATION SCREENS

In the daily summary users are greeted with the date and time, reminding them of the information that will be used when logging drinks. Additionally, they are given the option to add or update their personal information and to track their current goals or make new ones. In the reporting screen, users are given an option to decide which view they would like to see. This simplified the original prototype design by eliminating too many buttons on the graph pages themselves.

DEMO VIDEO

Customizable passphrase generator and manager, which allows users to design passphrases according to their personal preferences and security needs.

---

---

Creating a strong and memorable password is a crucial challenge for many people. Highly secure passwords are often difficult to remember, which can lead individuals to use less secure but more easily remembered options. This compromise increases the risk of unauthorized access to personal and sensitive information. Our project addresses this issue by developing a passphrase generator designed to balance security and memorability.

The findings from our survey of students at Western Washington University show that a majority of the participants, have difficulty remembering their passwords or have trouble logging in to their accounts. The majority of users also prefer the memorablity of their passphrases, even at the expense of its security. Which is why they also favor memorable passphrases over highly secure random strings. This highlights the need for a tool that can help people create, remember, and store secure passwords easily.

INITIAL MOCKUPS

The design of our application is focused on providing users with broad customization options for creating secure and memorable passwords and phrases. Before developing our desktop application, I created our teams initial design prototype using Canva, an online graphic design tool. This allowed our team to foster a better understanding of the layout of the application, and which features we wanted to implement in our project.

INITIAL FORM DESIGN

FINAL DESIGN

In the implementation of our project and final design, our team decided to develop our application using Windows Forms, a UI framework for building desktop applications. To make the design more visually appealing and polished, we imported a Guna UI/UX Framework for creating our controls and components. A demo with the full features of our application is demonstrated below.

DEMO VIDEO