Wisconsin School of Business Website
html css sass javascript php code architecture site architecture ux/ui design system component library figma branding project management content strategy wordpress
Summary
I developed from the ground up the new Wisconsin School of Business website as lead front-end developer, lead UX strategist, and project manager.
- Audited old site for usability and content
- Identified primary audiences, identified user goals & painpoints, created user personas
- Performed user testing/interviews with prospective students
- Performed competitive analyses
- Created new site information architecture and navigation
- Created prototype of new navigation and ran through user testing
- Reduced 800+ pages across two domains down to ~300 pages on one domain (not incl. blog/news articles)
- Interviewed and collaborated with stakeholders throughout the school to identify requirements
- Created a design system through collaboration with marketing team to ensure consistent styling, accessibility, and adherence to school branding
- Created wireframes/mockups of varying fidelity in Figma
- Used GitHub, dev environments, & CI/CD practices for development of new features, collaboration, code reviews, and testing
- Developed and styled front-end component system with HTML, CSS/SASS, and PHP
- Created CSS/SASS architecture based on defined variables, components, and reusable patterns/styles
- Developed component fields/inputs in CMS
- Edited copy and coached copywriters on writing for the web
CALS Global Website
html css sass javascript react php ux/ui figma branding project management content strategy code architecture site architecture wordpress gutenberg
Summary
The client was a director of global agricultural research, and all she gave me was a sad PDF newsletter, a logo, and some very loose ideas for a website, but after many interviews and iterations with content wireframes, I was able to elucidate the client’s key needs: highlight stories of researchers doing global work, report news and other announcements, and create a search-able repository of faculty doing global research. Prioritzing content strategy and site architecture from the beginning made design and development easier later in the project.
I mapped out the project tasks and created a digital KANBAN-style board in our project management software to manage and communicate the work for this project, sought feedback throughout the process, and communicated with all parties. I scoped and prioritized work to meet our holiday deadline, and solicited and implemented feedback along the way.
In addition to managing the project, I was also the primary UX designer and developer, creating custom React components for Wordpress's Gutenberg editor. I also provided CMS and Google Analytics training to the client. This project was a huge success, and I particularly enjoyed it because I was the master orchestrator, and we built up something amazing from basically nothing.
CALS Academics Content Strategy, UX, & Re-Design
digital marketing content strategy ux site architecture competive analysis user stories project management
Summary
The College of Agricultural & Life Sciences has a new priority: get more students to major in a CALS major, resulting in more $$ from the university (the ultimate goal). The college has no marketing department and a precendent of focusing on research instead of undergrads, so they drastically need help. Hence I took charge of the Academics Website Re-Design project to make an engaging user experience that would attract more undergrads.
Here's what I've been up to:
- Identify target audiences
- Audit the current site
- Review Google Analytics data
- Perform competitive analyses
- Work with Dean to come up with new site architecture
- Create content template for initial content acquisition from content experts (Associate Deans and their teams)
- Template provides structure for folks who have never thought about web content strategy before or how to market themselves/their work
- Template ensures consistency across the many content areas
- Use content templates to create content strategy and perform further content research/aquisition
- Create content wireframes
- Refine and iterate on wireframes with content experts
TDS Digital Operations
responsive design digital marketing content strategy html css bootstrap ux seo accessibility google analytics adobe creative cloud wordpress jira
Summary
I worked in Digital Operations in the Marketing Department at TDS, a Fortune 1000 national telecommunications company. My main duties were Front End Development, User Experience Design, Content Strategy, Information Architecture, SEO, and Web Analytics. Every day I worked on our main customer-facing websites: tdstelecom.com, hellotds.com, and bendbroadband.com. I regularly collaborated with cross-functional teams involving members from Consumer & Business Marketing, Product Management, and IT to improve upon and develop new products and experiences.
Selected Projects
- Careers Section: User Testing, Content Strategy, Site Architecture, UX/UI, and Re-Design
- Support Section: Site Architecture, Content Strategy, and Re-Design
- Marketing Landing Pages: Development and SEO
- Web Performance KPI Analysis and Reporting: Producing data-driven insights into how to improve conversion rates and user experience
- Site Migration into new CMS: Site Architecture and Development
- Led a SEO workshop for non-technical audience (Marketing, PR, Creative, Copywriting)
SailFast
ux/ui design sketch competitive analysis user interviews user personas wireframes user flows prototypes color typography
Summary
SailFast helps competitive sailing programs and teams get organized, communicate logistics, create lineups, and ultimately improve their performance on the race course.
The development process involved user research, user interviews, competitive analysis, empathy maps, user personas, and low-fidelity and hi-fidelity wireframes. I also designed the color scheme, typography, and imagery.
After initial user testing on the wireframe, I made a styled prototype in Sketch. Users can navigate around the product as if it were fully developed software. I ran two iterations of user testing on the prototype, using the results to improve its usability.
Test the prototype! Click anywhere to highlight hotspots.
CrewFinder
php mysql html css ux/ui design full-stack development database design
Summary
CrewFinder helps sailors find crew so that they can spend less time on logistics and more time out on the water. This app is for any organization to help its members plan group events, but this example was applied to the Hoofer Sailing Club in Madison, WI. Hoofers has over 1,000 members and many different types of boats that all have different crew requirements. I designed and develpped this entire app, from database design to front-end styles.
How it works
It's difficult to organize a group of people to go sailing, so this program has users create events that other users can sign up for as crew. A user fills out certain information about the event they are creating and then the event is displayed chronologically on the events page.
Cool features
Each boat at Hoofers has a maximum number of crew allowed. This number is displayed as “open spots” for each event. When a user signs up, the number of “open spots” decreases by one. Once “open spots” hits zero, no more users can sign up for the event.
A list of crew is displayed for each event, and users can easily remove themselves from the list with the Remove button. However the user can back-out out of the Remove action before it is finalized.
A user can easily edit or remove their event. Again, there is a back-out option for the user.
Check out Crew Finder. (Haven't migrated Cloud9 files to AWS yet, so live demo isn't running at the moment. Tsk tsk.)
Quiz Editor App
angular typescript javascript git/github json http web services apis mvvm
Summary
I developed a Quiz Editor application using Angular, TypeScript, two-way binding, JSON, MVVM, RESTful web servies, and Git/GitHub. The app loads in previously saved quizzes. You can pick one of those to edit or create a new quiz. (This project was made for a Modern JavaScript + Frameworks class I took in 2018. In this class, I also made a mini Star Wars app using the Ionic framework and SWAPI, the Star Wars API. Too much fun.)
Check out Quiz Editor. You can edit existing quizzes or make your own.