| Internship Projects

Sustainable Living Guide

Sustainable Information Cards & Website Design.

| Overview

This project series covers my time as a UX design intern & UX team lead.

I developed a sustainable information card series related to gardening and plants. In addition, I led a team of UX interns toward the development of a website.

Role

UX/UI Design Intern, UX Team Lead

Affiliation

Sustainable Living guide

Areas

Design, Sustainability

Information Cards

To encourage sustainable life practices and life long learning, I was tasked to develop a sustainable information card series. Sustainable production best practices were encouraged.

| To accomplish this task I decided the information cards should be developed with 100% post-consumer waste (PWC) card stock with natural texture, water-based digital ink, and use a minimalistic design to further limit resource use.

Dimensions:

4.74 inch height by 2.75 inch width.

1422px height by 825 px width.

300 DPI - High Resolution Printing (Can be downscaled).

Information Cards - Prototype 1

Blank research card with sections for pollinator type, plant type, uses description, and a large central checkered area.
A guide on sustainable living with sections on climate, water, history, soil, harvesting, cooking, and companion plants, featuring icons for sunlight, water, and heat.

Information Cards - Prototype 2

Illustration of a basil plant with green leaves, labeled as 'Basil' with species name 'Ocimum basilicum' and a note that it is a beneficial herb that repels mosquitoes and flies.
Information about basil, including its scientific name (Ocimum basilicum), sunlight, watering, temperature needs, cultural significance, soil preferences, harvesting tips, culinary uses, and companion plants, with a small illustration of basil leaves.
Illustration of a bunch of lavender flowers with green stems and leaves.

Website Redesign

| The following website redesign sought to modernize, increase accessibility, and fulfill changes in company capabilities.

I followed a double diamond design thinking methodology.

Discover

  • Market & user research previously conducted was utilized for this project.

  • We conducted stakeholder and industry subject matter expert interviews and a contextual inquiry to further understand the goals of the website.

Define

  • We developed personas, and user flows to understand website goals and content structure.

  • We developed iterative sitemaps and content strategies to establish information architecture.

Design

  • We developed a design system.

  • We developed wireframes & prototypes (low-fidelity to high-fidelity).

Deliver

  • My team and I delivered approved website prototypes and started the development of an Elementor based website based on our prototypes.

Personas & User Flows

| Developing personas and user flows based on previously conducted research, stakeholder & industry subject matter expert interviews.

Presentation slide titled 'EMA User Personas' with a group of diverse people photos on a purple background.
Slide from a presentation titled 'Introduction of User Personas' showing three women gathered around a laptop, with one seated and two standing, inside a room with large windows.
A digital presentation slide about Jackson, a 27-year-old music teacher and volunteer from Chicago, Illinois. The slide includes a photo of Jackson smiling with arms crossed, alongside details about his community project interests, tasks, goals, and frustrations.
Profile photo of Emma, a woman wearing yellow glasses and a green shirt, posing against a white background.
A professional profile slide featuring a woman with long brown hair in a striped shirt; text boxes describing her as Julia, 45 years old, a music industry professional in Houston, TX, with a detailed description of her business focus on eco-conscious music events and associated tasks, goals, and frustrations.
User profile and project overview for a sustainable music event initiative. Includes a photo of a young man dancing at a festival, with sections detailing his name, age, occupation, location, a description of his interest in environmental sciences and music, and goals related to organizing eco-conscious music events.
A digital presentation slide about musician Ankit, showing a photo of him playing guitar, with sections detailing his description, goals, frustrations, and tasks.
A presentation slide about David, a business owner and sponsor, who specializes in manufacturing eco-friendly music speakers. The slide includes his photo, a description of his goals and frustrations, and lists his tasks, goals, and frustrations related to sustainability and promoting his products.

Information Architecture & Site Map

| Developing information architecture with an associative content strategy in mind.

Website layout for Eco-conscious Music Alliance with sections for header, homepage content, about us, music, sustainability, events, directory, get involved, and footer, color-coded by category.
Website sitemap diagram for Eco-conscious Music Alliance, featuring main categories like About Us, Music, Sustainability, Events, Directory, and Get Involved, with subpages including Discover Music, For Artists, Membership, Volunteer, and Partner with EMA.

Transforming the Design System

| A professional, scalable, and accessible design system.

A color chart displaying primary, secondary, tertiary, accent, and grey colors with their respective shades and hex codes.
A titled chart explaining the typographical scale, showing various headings and paragraphs.
Website header of Eco-conscious Music Alliance with navigation links for individuals, businesses, log in, sign up, donate, and menu options for home, about, music, sustainability, events, get involved, and directory.
Eco-conscious Music Alliance website header with login and sign-up options, and a donate button.
Screenshot of Eco-conscious Music Alliance website header with 'Log In', 'Sign Up', and 'Donate' buttons.
Green website footer with navigation links, social media icons, and a newsletter sign-up form.
Green website footer with white and blue text, including navigation links for sign in, sign up, and donate; social media icons for YouTube, Instagram, and Facebook; subscription email input; sections labeled Services, Opportunities, Partnerships, Education, and Help with related links.
A website menu with green background and white text, featuring sections for Sign In, Sign Up, and Donate at the top. The menu lists categories: Services, Opportunities, Partnerships, Education, and Help, each with respective links. Services include Events, Music, Sustainability, Directory; Opportunities include Project Spotlight, Artist Spotlight, Sponsorship; Partnerships include Membership, Ambassadors; Education includes Internship, Sustainable Living Guide; Help includes FAQs, Privacy Policy, Terms of Service, Contact Us.

Wireframing & Prototyping

| From developing basic wireframes to prototypes ready for development. See examples below.

Wireframes of a website layout with sections titled Sustainability, Internships, Add Text Here, and Music From EMA Artists with various placeholders for images, text, and interactive elements.

| Modernized UI Examples

A webpage titled 'What We Do' with placeholder text, a green 'Learn More' button, and three sections with icons and headings 'Lorem Ipsum', each with a description and green link.
A webpage carousel with three cards showing placeholder images, headings titled 'Lorem Ipsum Dolor,' descriptions, and green 'Learn More' buttons, with navigation arrows on the sides and pagination dots below.
A webpage layout with a square graphic on the left with a black top layer and a blue bottom layer behind it, and bold black text on the right that reads 'Lorem Ipsum Dolor Sit Amet.' Below the title, there is smaller text with placeholder content, and a blue button labeled 'Learn More.'
A webpage layout with a large heading 'Lorem Ipsum Dolor Sit Amet', mobile and desktop viewports shown, with green buttons labeled 'Learn More', and three sections featuring green square icons, headings 'Lorem Ipsum', and placeholder text.
Webpage with a blue background, white header text, and an image of a mobile app interface showing a green "Learn More" button and slider indicators.
A collection of website wireframes displayed on a dark gray background, showing different page layouts in blue, green, black, and white theme colors.
Web page with green background, placeholder for image or video on the left, and text titled 'Lorem Ipsum Dolor Sit Amet' with a paragraph of dummy text and a 'Learn More' button.
Comparison of three membership plans titled 'Plans & Pricing' with options for monthly or yearly billing. The plans are 'Professional Membership' in blue, 'Community Membership' in green, and a highlighted 'Professional Membership' in dark blue labeled 'Most Popular.' Each plan details a $1 per month rate and lists benefits like event finder access, artist and music spotlights, and action hub features, with a 'Learn More' button at the bottom.
Logos of Walmart, Cisco, Volvo, Deloitte, and Okta displayed under a blue header titled "Our Sponsors," with a subtitle "Trusted by 1M+ Users".
Website homepage section with heading 'Our Mission', placeholder text, a bold subheading 'Join The Movement,' a blue 'Learn More' button, and a graphic of overlapping black and blue squares on a white background with blue wave at the bottom.