DMD Hub home page

DMD Hub was made over the course of the semester by a group of 6 Digital Media and Design students for the UConn Web Design Practicum class. The site utilizes HTML, CSS, Bootstrap, and Javascript and was made to help DMD students in course selection and overall awareness within the DMD program. The site includes offered courses, DMD events, an internship/job search, an available equipment page, and a resource page with forms such as applying for graduation and information on plans of study. We designed this site in multiple sprints, worked in an agile environment, and completed user testing and needfinding with DMD students and faculty.

DMD Hub courses page with filters

I worked in a team to design 30 motion graphics and mockups of the 2021-2022 UConn Men's and Women's Basketball Teams. These graphics were to be displayed on two-story tall LED boards in the Werth Family UConn Basketball Champions Center. The videos for each respective team have the same layout and format, but the photos and information, such as name and hometown, are adapted for each player. The examples above show the slight differences between the men's and women's videos.

For our final deliverables, we submitted two google drive folders for both teams. Within these folders included Photoshop templates, After Effects templates, project files, assets, and, most importantly, final motion graphics videos for each specific player.

My team and I communicated weekly with UConn clients on zoom or in person and presented mockups and received any feedback. Throughout this project, I embraced teamwork and gained excellent communication skills with my team members and clients. This experience was in collaboration with UConn senior DMD class Agency.

MBB Google Drive Folder

FRAME Lab home page

During my time at UConn, I was hired by professor Na Zhang to update her UConn Human Development and Family Sciences research lab website on Wordpress. Throughout the process I created many wireframes and high fidelity mockups and presented them to Zhang through Zoom. I took her feedback and applied them in my designs and once we were both content with the style, I created the home page and then applied the style to the remaining pages.

The website is hosted on Wordpress and I used both their templates and my own code to style the website. After completing the site, I presented it and also showed Zhang how to add any new studies she completes in the future. This was a wonderful experience, as I was able to advance my skills in Wordpress and work with Zhang who granted me creative freedom but also had insightful feedback for her website.

FRAME Lab contact page

FRAME Lab people page

Curtain Call screens

Curtain Call was created to provide a way for theater goers to easily buy last minute tickets at a discounted price online. The app would use your current location on your phone or device so the system can determine if you are eligible to buy a ticket. This project aimed to not only increase overall sales for shows, but the accessibility for local theatergoers will influence more customers to purchase more tickets in the future.

The app was designed in a process of three sprints, each sprint adding new functionality and features. I also conducted needfinding research through a 10 question google form and had over 30 responses.

The first sprint focused heavily on the design aspects such as logo, name, and color palette. I also worked on the login screens during this time. The second sprint included fixing the functionality and working a lot on the main part of the app, buying tickets. This included an about page for each show, seat views, and the availability of tickets. The third sprint was all about fine tuning what I had already created, while also finishing the profile and favorites screens. Within this sprint I built: favorites page, profile page, a separate ticketing screen just for rush tickets, search screen, and QR code screen for purchased tickets.

Interact with the prototype below to explore the app.

Curtain Call XD Prototype

CTDA Social Justice Collection home page

The Connecticut Digital Archive is part of the Digital Preservation Repository Program at the University of Connecticut. They serve the entire state and are dedicated to the maintenance, delivery, and preservation of a wide range of digital resources for educational and cultural institutions and State Agencies in Connecticut.

For this project, the CTDA wanted to create thematic collections to highlight important content that was sometimes hidden or more difficult to find within the repository. I was tasked with designing a logo for the project and then stylizing the thematic images in a compelling way.

When making the logo, the CTDA team and I talked about how we wanted to amplify certain collections, such as social justice and women's suffrage. I wanted this idea to translate in the logo, so I designed different variations primarily with a spotlight or sign. We then wanted the thematic collections to be called "featured topics" so that we could include more content, but decided that a spotlight was a good way to combine both ideas. Using colors from the CTDA style guide, I built out many versions, before deciding on the final layout. As a team, we then collaborated on the final details, including colors, layout, and font size. The final logo below will be used for each feature topic collection and the word(s) in the spotlight we coincide with each collection.

Logo with slight variations

Final logo

For the thumbnail images, I again used the colors from the CTDA style guide and overlaid them on certain parts of the images, for example, making the bus yellow in the image below. These edits made the images stand out more within the collection and allowed the page to match the CTDA branding.

Photo before edits

Photo after stylized edits

Levo International Home Page

In the Spring of 2022, I had the opportunity to work with Levo International, which creates food security solutions to build stronger communities in Connecticut and Haiti through partnership and innovation. A team of four other students and I were tasked with increasing their brand awareness through cohesive and professional content on both social media and their Squarespace website.

One other student and I completed updates on their website which primarily focused on cleaning up the site and making sure all content was easily legible and accessible. Throughout our analysis of the site, we noticed pages where content was overlapping or displayed in unfavorable ways and wanted to fix these issues.

Before and after of the header on the web version

Before and after of the header on the mobile version

On every page we fixed spacing issues, overlapping text, button size and color consistency, and link legibility. The header and footer were also primary issues because they were overlapping and not completely responsive. For the header, I added links to highlight on hover, a hamburger menu icon for the mobile version, and shopping bag because Levo wanted to focus on their products. For the footer I made it responsive by adding columns and again added links and social media logos to highlight on hover. Finally, we added and cleaned up their member interest forms to increase volunteering, added previews of updated instagram and twitter posts, and cleaned up the events page through spacing and content hierarchy.

Footer on the web version

Before and after of fixing spacing issues and consistency

Morning screen example 1

Morning screen example 2

This digital sign landing page was created with Javascript, HTML and CSS. The site includes accurate date and time, background images from Unsplash API which change based on time of day and refreshing the browser, greetings based on time of day, and the ability to change the name of the user through local storage. Additionally, the site has a progress bar to represent the 24 hours in a day and a place the user can add and check off daily goals.

Night screen example 1

Night screen example 2

DMD Hub home page

DMD Hub was made over the course of the semester by a group of 6 Digital Media and Design students for the UConn Web Design Practicum class. The site utilizes HTML, CSS, Bootstrap, and Javascript and was made to help DMD students in course selection and overall awareness within the DMD program. The site includes offered courses, DMD events, an internship/job search, an available equipment page, and a resource page with forms such as applying for graduation and information on plans of study. We designed this site in multiple sprints, worked in an agile environment, and completed user testing with DMD students and faculty.

DMD Hub courses page with filters

mySUBS screens

mySUBS is a subscription tracker app, which aims to make users more aware of their expenses, more organized, and help them potentially save money on their subscriptions. The app was designed in a process of needfinding research, creating UX personas, stories, and views, designing wireframes, and going through two rounds of prototypes.

Needfinding research was conducted through a 13 question google form and had 20 responses from participants who were currently using and/or paying for some kind of subscription. In this form, the majority of participants said that they sometimes forget they are paying for certain subscriptions and don’t have a method of tracking them. I then created two UX personas for tech savvy and non tech savvy users that want to track their subscriptions. From there I created user stories such as adding and viewing current subscriptions and viewing the monthly and yearly total for each subscription or all subscriptions. Wireframes were designed next with the home screen of the app showing how much the user is currently paying while also giving a rundown of their most recent subscriptions.

Google form question and responses

User stories examples

Wireframe mockup of mySUBS app showing the home screen, the format for each individual subscription, and how to edit the information

My first prototype focused on the color scheme and built on the layout I had created in my wireframes. I also made sure to clearly show how to add or edit a subscription and what information can be added into the app. Search bars were also added to make app navigation easier for any user. My primary focus with the first prototype was to show how a subscription can be tracked and how it would appear in the app.

After receiving feedback from prototype 1, I designed prototype 2 and made changes, for example, I added more pop ups for “connect you account” and “cancel Netflix subscription” to make the process clearer and to let the user know what they can accomplish through the app. I also added the subscription icons, which makes the home page look better and makes it even easier to understand. I also built out the profile page, made the yearly and monthly expenses screens show more data, created confirmation screens, and corrected all the prototype links.

Overall mySUBS would be a very beneficial app and help users to save money on their subscriptions. Seeing one’s subscription expenses per month all in one place is very eye opening, so maybe it would eventually save the user money!

Interact with the prototype below to explore the app.

mySUBS XD Prototype