Gender Bending Fashion Animation & Interactive

Role: UX & UI Designer, Animator, Technical Production

The Museum of Fine Arts, Boston


Placeholder copy. One of the first projects I was introduced to at the MFA was the ongoing redesign of the Mfa’s homepage. Phase one went live in Spring 2017. UX Work consisted of research, wireframes, responsive design with mobile first thinking, rounds of type design, CSS Animation, and brainstorming for content production. Phase one did not include the header or footer of the page.

Photography by: Ally Schmaling. Branding by: Jill Bendonis. Technical Manager: George Scheron. Producer: Sarah Cowen.






An Interactive Narrative  

Phase one consisted of research, wireframes, responsive design with mobile first thinking, rounds of typographic design and design, CSS Animation, and brainstorming content production.

By line Phase one does not include the header or footer of the page.

Gender Bending Fashion Triptych Animation






Process

Lorem Description. In 2015 bently university ran a usability study on mfa.org’s homepage that concluded three areas of improvement.



1. Only call to action is a scrolling carousel of images, however, hovering over image does not indicate content in clickable.

2. Layout does not allow for changeable content other than the carousel, which overwhelms the information on the page.

3. Users of mfa.org and visitors to the museum had little to no knowledge of the MFA’s programming or what gallery spaces looked.

I added museum homepage research and current web trend research into the process of redesigning the homepage.



Image Caption




Header

Lorem Description. I created wireframes that followed the Bently Usability Study and added new content sections below the fold. The content sections broke up the page into 3 tiers

 



Tier 1 Exhibitions and Large announcements



Tier 2 Programs with links to program areas




Interative Solution Synoposis


Sentence. The new design gave mfa.org a range of options in displaying MFA’s offerings with captivating imagery and distinct messaging.


The new design added new content-tiers to the page, below the fold. These new tires included visit information, event programming, objects from the collection, and a featured gallery space block, which also stood as a wild-card block.

It also gave mfa.org a way to measure audience engagement with analytics built behind each section tier. 

Marker






Auddie 2020 ©  //// Auddie 2020 ©