IntuitSolutionsIntuitSolutions

close project
Static Image of Mobile Live Site Mockup UsedSurf Static Image of Desktop Live Site Mockup UsedSurf

At IntuitSolutions, I worked my first job after graduating from college: a full-time front-end developer, designer, and UX advisor. IntuitSolutions functions as a software and web development agency providing e-Commerce solutions for sites utilizing the BigCommerce platform. They are based out of Old City, Philadelphia, PA. However, after a year of my employment in the office, the company transitioned to remote work during the 2020 pandemic. I left with solid experience working at a digital agency and confidence in imparting my knowledge and expertise.

Static Image of Desktop Live Site Mockup SnakeEyes Static Image of Desktop Live Site Mockup CarolinaTackSupply

Fully launched sites with live links. I was full-site solo lead developer on development projects, coding the entire website ground-up from our base theme. I was also a team lead developer on full-site website projects with other team members and a developer under other leads. Garnering more design responbilities (as I was hired as a front-end developer) also lead to me taking on some full-site design builds. These are all outlined adjacent for some of the projects I completed while there.

Lash Stuff - Solo Lead Dev, Full-Site (Chronology - First) FlagsUSA - Solo Lead Dev, Full-Site (C. - Mid) SheVibe (18+) - Solo Dev, Heavy Theme Fixes (C. - Mid) UsedSurf - Team Lead Dev, Full-Site (C. - Mid) Carolina Tack Supply - Solo Lead Designer, Full-Site Design (C. - Last) Lexar Industrial - Solo Lead Designer + Team Lead Dev, Full-Site (C. - Last)
Static Image of Interaction Flow Frequently Bought Together ITS Add-On Image Static Image of Interaction Flow MAP Pricing ITS Add-On Image

Some of my daily work at the company would involve performing a wide range of digital tasks for clients. Certain tasks could range between taking a few hours or days, but often projects could last for weeks to months (such as full-site development for clients). I utilized my front-end development skills employing knowledge of HTML, CSS, and JavaScript. My workload at the company consisted of full-site development projects, development work orders, recurring client updates, SEO audits, Accessibility audits, UX audits, UX work, design discoveries, client interaction, and full-site designs (wireframe e-Commerce pages with low to high fidelity).

Static Image of CarolinaTackSupply Live Site Mobile Mockup 1 Static Image of CarolinaTackSupply Live Site Mobile Mockup 2 Static Image of CarolinaTackSupply Live Site Mobile Mockup 3 Static Image of SnakeEyes Live Site Mobile Mockup 1 Static Image of SnakeEyes Live Site Mobile Mockup 2
Static Image of ITS User Experience Awareness Presenation 1 Static Image of ITS User Experience Awareness Presenation 2
Static Image of ITS User Experience Awareness Presenation 3

Context & ChallengeContext & Challenge

Since working at IntuitSolutions, I introduced three new workload tasks to the team. UX audits, wireframing, and design discoveries are key tools to expanding and learning about the users as well as gathering strategic design/pre-dev information. Most importantly, I felt comfortable using these tools and advocating for them. I know how important these tasks can be to the company, especially the marketing and development teams, and anyone dealing with the frustrations of digital interactions each day.

One of the toughest challenges here was being a more design-minded individual and not being able to express it. There was a different set of values in place for design thinking and practices present. The consideration for UX design (my preferred field) was not at the level I needed to create a positive digital impact. Thus, the big challenge here was attempting to bolster my responsibilities and the company’s to be more involved and set a standard for their design and UX.

Static Image of SnakeEyes Live Site Desktop Mockup 1 Static Image of SnakeEyes Live Site Desktop Mockup 2 Static Image of SnakeEyes Live Site Desktop Mockup 3 Static Image of SnakeEyes Live Site Desktop Mockup 4
Static Image of ITS Internal User Experience Documnetation 1 Static Image of ITS Internal User Experience Documnetation 2
Static Image of ITS Internal User Experience Documentation 3

Process & InsightProcess & Insight

I was one of the only employees to have a skillset in UX, UI design, and front-end development. Therefore, I had the possibility and potential to work on UX tasks, but the company was not yet ready to implement that discipline. While I am grateful for the in-person office experience they provided me, going remote during the pandemic caused obstacles that I am sure many companies faced as well.

My day-to-day duties included managing priority work and completing service that came in the form of design, UX tasks, and development tasks (work orders, add-on installs, full-site builds, documentation, SEO/accessibility fixes). I use quality assurance methods to test site-specific functionality/overall site design and functionality viability across responsive sites (mobile, tablet, and desktop). I communicated with team leads, project managers, and co-workers to ensure everyone was informed about current projects, allowing for efficient planning of initiatives, tasks, and projects. Lastly, I utilized UX, design, and development knowledge to determine feasibility and what is possible when visualizing designs for development and what is viable on the BigCommerce platform.

Static Image of ITS User Experience Mass Guide Presentation To Company Banner
Static Image of CarolinaTackSupply Live Site Desktop Mockup 1 Static Image of CarolinaTackSupply Live Site Desktop Mockup 2 Static Image of CarolinaTackSupply Live Site Desktop Mockup 3 Static Image of CarolinaTackSupply Live Site Desktop Mockup 4

Outcome & SolutionOutcome & Solution

IntuitSolutions was a versatile experience. I was often asked to step out of my comfort zone with certain tasks, using technologies, frameworks, or CMS (content management system) functions I was not acquainted with. However, it was a better learning environment due to that. Contributing to a variety of internal design, UX, development, and client-facing documentation was also a part of my duties. These were insightful, team-based, and analytical exercises. Going into the intricacies of a particular system, technology, or methods/principles was a way for myself and the team to understand, as well as co-workers to come. I am excited to go on future opportunities with the knowledge and skills I have learned working at the company and am appreciative of my exposure there.

Static Image of ITS Design Process Flow Chart Diagram Idea To Change Process Static Image of ITS Introduction To Style Tiles To Company To Change Process Static Image of ITS Introduction Presentation To User Testing Awareness To Change Process Static Image of ITS Introduction Presentation For Wireframing Importance/Content To Change Process

SouvinearSouvinear

close project
Static Image of Souvinear Hero Image Functionality and Overview Poster
Static Image of Souvinear Logo Graphic

Souvinear was a proof of concept iOS app aimed to provide music fans a dedicated platform to save their memories and experiences. Souvinear encourages users to create memories of their own. Our app functioned to facilitate stronger and more frequent connections within music communities that are both physical and digital environments. With Souvinear you could swap your favorite music with other users and discover curated music recommendations or “Souvinears.” The journaling feature allowed you to reflect on those memorable nights.

Static Image of Souvinear Logo Graphic

As a front-end designer and developer, I focused on solely front-end systems; which entailed styling (low to high fidelity wireframes, interaction flows, icon work, etc.), basic Xcode development prototyping, and most importantly, micro-interaction animations. I included examples of some of my work during my time with Souvinear. I created multiple documents outlining exactly what micro-interactions needed to be created for the future, functionality analysis/descriptions, and the animation language to be used for micro-interaction elements. The purpose of these documents was to streamline concepts related to functionality, animation, and design guidelines to the rest of the team, so they could keep this in mind when developing or designing. Throughout my senior year at Drexel, we were required to make weekly posts about what we did for the week, what we were planning to do for the next, and any challenges we were having. These posts mainly showed my rudimentary ideas, sketches, and work-in-progresses rather than completed designs and interactions. Most of my posts included links, live demos or examples, and GIFs/design samples.

Souvinear Mobile Screenshot of Xcode Connections Section Work or Following/Follower Functionality Souvinear Mobile Screenshot of Beginning Navigation Prototype Animation Iterations in Figma

The Team ❮ ❮ ❮The Team ❮ ❮ ❮

  • Kristen R. (Project manager/Design)
  • Victoria S. (Front-end Dev/Design)
  • Kameron Kutz (Front-end Dev/Design)
  • Kaitlyn N. (Design/Marketing)
  • Anisa S. (Back-end Dev)
  • Shai B. (Design)
  • Aaron I. (Back-end Dev)
  • Jaime JB. (Back-end Dev)
Static Image of Interaction Flow Souvinear Sketch Drawing
Static Image of Interaction Flow Souvinear Digital Asset for Connections Functionality of iOS App for Developers

Context & ChallengeContext & Challenge

At project conception, we noted that the market for music apps and social media combined was limited. Souvinear aimed to bridge this gap by promoting social sharing features such as swapping songs with another person or sharing a journal post. All time spent on Souvinear could be either discovering new music and experiences or connecting with individuals who have diverse tastes in music.

Objectives: My role for the Winter term was to handle the UX, design, and overall base development of the “connections” section (or followers/following functionality) for Souvinear. This included deliverables like an interaction (IX) flow for the connection’s interaction in-app. An IX flow was a detailed tactical look at an interaction, which outlines the flow (steps) of that interaction using arrows, icons, and wireframes in a diagram-like manner. Additional deliverables included an IX flow, I conveyed icons, wireframes, and micro-interaction prototypes to the team. These deliverables were then used as stepping stones to achieve functionality goals or design problems.

The challenge for me definitely resided with the overall large scope of the project, and mastering the techniques of Xcode, considering I had not interacted with it before the Winter term. However, I was able to learn valuable lessons including Xcode strategies (using constraint layouts, segue way performance, basic Swift programming etc.) and scoping projects to the simplest level of functionality and workability.

Process & InsightProcess & Insight

My work required me to make many iterations of any design challenge I was tackling so that I could validly explore all options. The following are just a few examples of some of the work I have completed for Souvinear (high and low fidelity). These examples include progress screenshots, various iterations on designs/micro-interactions, or standalone designs/animation ideas.

Souvinear Project Example - Screenshot of Live Text Results and Search Funciontality - Grid Item 1 Souvinear Project Example - Screenshot of Map Traversal and Location Funciontality - Grid Item 2 Souvinear Project Example - Screenshot of Initial Brainstorm Ideas on Visual Interaction/Animation of Connections Functionality - Grid Item 3
Souvinear Project Example - Screenshot of Home App Dashboard Functionality Overview - Grid Item 4 Souvinear Project Example - Screenshot of Initial Brainstorm Ideas on Visual Interaction/Animation of Navigation within App - Grid Item 5 Souvinear Project Example - Screenshot of App Map Hotspot and Hotspot Creation for Music Swapping Funciontality - Grid Item 6
Souvinear Project Example - Screenshot of Initial Brainstorm Ideas on Visual Interaction/Animation of Connections Functionality - Grid Item 3
Souvinear Project Example - Animated GIF/Video of One of the Variations of Animations Tested for the Connections Section Shows Transition Timing and Characteristics - Grid Item 8 Souvinear Project Example - Animated GIF/Video of One of the Variations of Animations Tested for the Microinteraction of the Navigation Shows Transition Timing and Characteristics - Grid Item 9 Souvinear Project Example - Animated GIF/Video of Working Out the Souvinear iOS App Intro/Landing Screen Animation - Grid Item 10 Souvinear Project Example - Animated GIF/Video of User Journey of Hotspot Creation and Map Functionality - Grid Item 11

Outcome & SolutionOutcome & Solution

The solution to most of my design endeavors involved collaboration, inspiration, and a versatile toolset. I used software such as Photoshop, Illustrator, Sketch, After Effects, and Principle to bring my wireframes, icons, and animated prototypes to life. When I ran into an Xcode or Swift-related problem, I set appointments with my professor for further assistance or spent hours of online research to aid me in development issues I came across. The layout I made during my Xcode course adheres to the constraint- based layout system and works across all iPhone sizes. For the purposes of the course, core data could be pushed and pulled using entity objects, the entity itself, persistent containers, and managing the relationships between them. A helpful lesson I learned throughout the course of this project is to always scale down and get the most simple and important base functionality (or design) completed as early as possible. This will ensure that I always have a good base (design or code-wise) to move forward and build more layers of complexity into whatever the project or task at hand is.

Promo Video & Event PosterPromo Video & Event Poster

Souvinear Official Event Poster Marketing Graphic

Drexel InteractiveDrexel Interactive

close project
Static Hero Image of Three Drexel Isometric Digitization Sketches

Drexel Interactive was a project I completed during my junior year. The project’s aim was to be a new resource for incoming and current Drexel students. The idea for this project spawned from a brainstorming session during a class at Drexel, where we were asked to come up with three ideas that we would like to work on, figuratively. The idea was to start with an “idea draft,” each student would choose one of the three ideas they came up with to put on the whiteboard. Students would then vote tournament style to determine which projects continued to the next round and who wanted to work on each surviving project.

My idea that was chosen was pitched as an SVG Interactive Playground about Drexel, which would take the form of a webpage. The first draft for my idea included a web page that explored various animations and Easter eggs about Drexel. Students would be able to hover their mouse over tons of little animations relative to Drexel to interact with. When users refresh the website the SVG animations would relocate to a different spot on the page, always creating a fresh experience. The idea for the project quickly morphed as other group members added their input and creativity into the mix. As the project became more defined, the idea transformed into an interactive guide for Drexel. Research on Drexel students showed that they would’ve loved a guide to the campus and city as freshmen. Drexel’s Interactive Guide aimed to help students by giving them easy access to all the best spots in Drexel and Philadelphia. The project was focused on learning and discovering the history of landmark locations, but also to relate to other students or exploring the city with a friend.

Static Image of South Street Isometric Digitization of Sketch

The Team ❮ ❮ ❮The Team ❮ ❮ ❮

  • Kaitlyn N. (Front-end Dev)
  • Su HP. (Front-end Dev)
  • Kameron Kutz (Design | UX)
  • Tighe (Photographer)
Isometric Pencil and Paper Sketches - Pre-digitization Drexel Interactive Sitemap for Information Architecture

Context & ChallengeContext & Challenge

One of the challenges to this project as a designer was to properly portray each landmark/location with a stylized isometric graphic; which aimed at eliciting a unique mood and identity of the landmark. Another challenge we had was the number of team members procured for the project planned. I chose to take the design role for this conceptual project in order to better hone and practice my skills. Two of our team members did not come from a web development/design or UI / UX background so our team was pretty limited in what we could complete for the end of the term. The project was created as if we were actually building it even if we did not have a working product. The main goal of this project was to show we could effectively conceptualize a graphics-based interactive narrative utilizing storytelling methods and digital design strategies.

Process & InsightProcess & Insight

Most of my work here required an iterative design process, which was open to changes as research came in. I also developed multiple landmark locations around Philadelphia. I created multiple deliverables such as a sitemap, 27 unique stylistic art assets, and several mid to high-fidelity wireframes of the UI. Examples of my work for this project can be found below.

Drexel Student Location - Maroon Background Isometric Digital Rendering of Kelly Hall - Grid Item 1 Drexel Student Location - Salmon Background Isometric Digital Rendering of Towers Hall - Grid Item 2 Drexel Student Location - Pink Background Isometric Digital Rendering of Caneris Hall - Grid Item 3 Drexel Student Location - Gray Background Isometric Digital Rendering of Eastern State Penitentiary - Grid Item 4 Drexel Student Location - Shaded Blue Background Isometric Digital Rendering of Millenium Hall - Grid Item 5 Drexel Student Location - Blue Background Isometric Digital Rendering of North Hall - Grid Item 6 Drexel Student Location - Light Blue Background Isometric Digital Rendering of Plaza Art Store - Grid Item 7 Drexel Student Location - Electric Blue Background Isometric Digital Rendering of Baby Blues BBQ Restaraunt - Grid Item 8 Drexel Student Location - Pale Yellow Background Isometric Digital Rendering of Happy Sunshine Food Truck - Grid Item 9 Drexel Student Location - Sage Background Isometric Digital Rendering of Wahoos Taqueria Restaraunt - Grid Item 10 Drexel Student Location - Green Background Isometric Digital Rendering of Greek Week - Grid Item 11 Drexel Interactive - Static Image of User Interface - Grid Item 12 Drexel Interactive - Static Mobile Landing Page/Homepage Screen - Grid Item 13 Drexel Interactive - Static Mobile Screen of User Interface to Showcase Drexel Locations - Grid Item 14 Drexel Student Location - Shaded Red Background Isometric Digital Rendering of Old Nelson's - Grid Item 15 Drexel Student Location - Beige Background Isometric Digital Rendering of Drexel University Main Building - Grid Item 16 Drexel Student Location - Light Gray Background Isometric Digital Rendering of South Street - Grid Item 17 Drexel Student Location - Pale Yellow Background Isometric Digital Rendering of Chinatown Archway/Gate - Grid Item 18 Drexel Student Location - Salmon Pink Background Isometric Digital Rendering of Fraternity Row - Grid Item 19

Outcome & SolutionOutcome & Solution

The solution was a clean, simple interface, which encourages student engagement. Unfortunately, most of it was conceptual as we did not have the development power or time to complete a fully fleshed out and working web-app for Drexel. However, our team was able to accomplish a fully documented conceptual project, with design deliverables, research documents, and minor development complete. Something I learned that I will carry to future projects is to always expect and prepare for changes and pivots in a project. Our mid-point checkin resulted in us adding more functionality and designs to the project, yet, if I would have better prepared and anticipated those changes the resulting deliverables would have been implemented more logically and cleanly.

Static Desktop Screen of Drexel Interactive Guide User Interface - Grid Item 7 Static Desktop Screen of Drexel Interactive User Interface for Showcasing Drexel Locations - Drexel Grid Item 8 Static Desktop Screen of Drexel Interactive User Interface Group Hangout and Communication - Grid Item 9 Static Desktop Screen of Drexel Interactive More Details/Information Button - Modal Display of Selected Location - Grid Item 10

UX, UI, and Interaction Designer with Front-End Development skills. Building beautiful iotas.

The world has become increasingly disconnected, artificial, and unreliable. I aspire to bridge the gap between technology, all living things, and our natural environment, and empower everyone through accessibility, community, and sustainable progress for the planet.

Recently worked at IntuitSolutions, studied at Drexel University, and interned at CSL Behring

Under Construction

Witness real-time development and dive into the iterative process of the latest updates to my new website.

My Work

Arrows Icon Pointing Downward

IntuitSolutionsIntuitSolutions

UX & UI Design, Front-End Dev

Static Used Surf Project Card Image

SouvinearSouvinear

UX & UI Design, Front-End Dev

Static Sovuinear Project Card Image
Second Arrows Pointing Left

Drexel InteractiveDrexel Interactive

Project Manager, UX & UI Design

Static Drexel University Project Card Image
See More Work