Erin D. Lilly. research & design ~ writing. sample portfolio

Transcription

1 Erin D. Lilly research & design ~ writing sample portfolio

2 Erin D. Lilly research & design ~ writing Introduction I m a recent graduate of the human-computer interaction program at the University of Michigan with knowledge in user experience research and design. Education University of Michigan MS Information Technology December 2017 GPA: 3.7 Aquinas College BA English, Cum Laude May 2013 GPA: 3.5 Skills user interviews personas scenarios heuristic analysis wireframing digital and paper prototyping branding visual identity print design web design python html css photoshop illustrator indesign Experience Communication Specialist - User Experience Consultant Detroit Public Television, January - April 2018 Coordinated the content and production of member magazine across various departments, creating content, providing design feedback and performing edits as needed. Drafted updated designs for the station s main website and secondary brands and intiatives for both Wordpress and PBS content management systems. User Experience / Design Intern Detroit Public Television, September - December 2017 Conducted a heuristic analysis of the company s current website to identify weak points in preparation for a full redesign. Designed web and social media graphics to represent the station s various brands and events. Organized a visual identity package that would represent the company through on-air, digital and internal communications. Projects User Experience Consultant Edwards Brothers Malloy, August - December 2016 Analyzed the personal accounts of employees and identified weak points in company organization and information sharing between team members and clients. Composed a plan to improve production line with a heavy focus on education and cross-departmental communication. User Experience Consultant Michigan Legal Help, August - December 2016 Composed and conducted interviews with stakeholders and potential users. Organized, drafted and launched survey to measure the user behavior and satisfaction. Performed extensive usability tests with potential users to highlight issues in the organization's website.

3 Web & Mobile Design

4 Web Design Detroit Public Television s MiWeek /American Black Journal Main Pages Home Schedule Videos Programs About Support Education Kids Home Schedule Videos Programs About Support Education Kids As Detroit Public Television prepared for a large-scale website redesign, one of my first projects with them involved a potential overhaul of the blogs connected to their two main news and public affairs programs: MiWeek and American Black Journal. While the framework they were planning to upgrade to greatly simplifies the website building process, it presents an interesting challenge where indivdual components act as pieces to a puzzle that you create as you design. With the similarities between the two programs and the fact that these spaces had to fit into the overall Detroit Public Television site, I aimed to create pages that could present the same type of information, but still be tailored to the programs unique visual styles and requirements. Nicolai Vitti Loves a Challenge Vitti, who grew up in Dearborn Heights, has spent months discussing his vision in broad terms. But Detroiters say they want specifics. Episodes Latest News Read More >> SEP Michigan GOP / State Budget Report / Cass Tech Drama 20 Students Last Updated by MiWeek Editor on Sep 22, 2017 at 8:09 am Michigan Republicans are gathering for their leadership conference on Mackinac Island over the weekend. The MiWeek team debates the future of the state GOP party. Read More Web Exclusives SEP Michigan GOP / State Budget Report / Cass Tech Drama 20 Students Last Updated by MiWeek Editor on Sep 22, 2017 at 8:09 am Michigan Republicans are gathering for their leadership conference on Mackinac Island over the weekend. The MiWeek team debates the future of the state GOP party. Read More SEP Michigan GOP / State Budget Report / Cass Tech Drama 20 Students Last Updated by MiWeek Editor on Sep 22, 2017 at 8:09 am Michigan Republicans are gathering for their leadership conference on Mackinac Island over the weekend. The MiWeek team debates the future of the state GOP party. Read More Meet the Contributors older posts About the Show Watch Live Thursdays 7:30pm ET Connect with MiWeek Broadcast Information 56.1 DPTV-HD Thursdays 7:30pm ET Fridays 5:30am ET Sundays 9am ET 56.4 DPTV WORLD Channel Saturdays 6pm ET Sundays 5:30p ET MiWeek is sponsored by: One Detroit Education Roadshow Hosts Stephen Henderson and Christy McDonald explore the topic of education in Detroit during this special. Read More >> Episodes Watch Video Show History Latest News SEP Michigan GOP / State Budget Report / Cass Tech Drama 20 Students Last Updated by American Black Journal Editor on Sep 22, 2017 at 8:09 am Michigan Republicans are gathering for their leadership conference on Mackinac Island over the weekend. The MiWeek team debates the future of the state GOP party. Read More SEP Michigan GOP / State Budget Report / Cass Tech Drama 20 Students Last Updated by American Black Journal Editor on Sep 22, 2017 at 8:09 am Michigan Republicans are gathering for their leadership conference on Mackinac Island over the weekend. The MiWeek team debates the future of the state GOP party. Read More SEP Michigan GOP / State Budget Report / Cass Tech Drama 20 Students Last Updated by American Black Jounal Editor on Sep 22, 2017 at 8:09 am Michigan Republicans are gathering for their leadership conference on Mackinac Island over the weekend. The MiWeek team debates the future of the state GOP party. Read More About the Show older posts Connect with American Black Journal Sign up for the newsletter address Subscribe Broadcast Information 56.1 DPTV-HD Sundays 9:30 a.m. ET Wednesdays 7:30 p.m. ET 56.4 DPTV WORLD Channel Saturdays 5:30 p.m. ET Sundays 6:30 p.m. ET Funded by: American Black Journal is a window into American history. For more than 40 years, American Black Journal has been a vibrant and provocative forum for newsmakers, celebrities and everyday people. Currently hosted by Stephen Henderson, Editorial Page Editor of the Detroit Free Press. The show features topics about arts and culture, and community issues such as politics, race, and religion. Stephen Henderson Christy McDonald Nolan Finley Read more about the history of Detroit Public TV's American Black Journal.

5 Web Design Detroit Public Television s One Detroit Website Schedule Video Programs About Support Education Kids Donate LATEST NEWS After setting up potential designs for indivdual shows, I was asked to create a website that would display the content from Detroit Public Television s major programs and initatives all in one place. State of the City / A Different Take on Civility Read More > Home News Videos About ONE DETROIT Dr. Nikolai Vitti / Maria's Story February 1, by Example Detroit Mayoral Race / Washington Inaction, Lansing Action How Are Detroit s Senior Citizens Doing? Motown Mansion / Diversity & Venture Capital Dr. Nikolai Vitti / Maria's Story Motown Mansion / Diversity & Venture Capital How Are Detroit s Senior Citizens Doing? Motown Mansion / Diversity & Venture Capital Dr. Nikolai Vitti / Maria's Story More MiWeek > More American Black Journal > With so much content, information overload was an obvious concern. I wanted to be sure to include all of the major sections for promotion--top stories, recent videos, show specific blog rolls--while still keeping the design clean and managable for its audience. AMERICAN BLACK JOURNAL Motown Mansion / Diversity & Venture Capital February 1, by Example Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam. GREAT LAKES NOW The Man With the Key to the Line 5 Pipeline February 1, by Example One Detroit is brought to you by: Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam. AMERICAN BLACK JOURNAL Hatred in America February 1, by Example DETROIT PERFORMS Refugee Kids: One School Takes On the World February 1, by Example Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam. Green algae leads to water advisory for Maumee River How Are Detroit s Senior Citizens Doing? Motown Mansion / Diversity & Venture Capital Dr. Nikolai Vitti / Maria's Story More Great Lakes Now > Eisenhower Dance: On the Move How Are Detroit s Senior Citizens Doing? Motown Mansion / Diversity & Venture Capital Dr. Nikolai Vitti / Maria's Story More Detroit Performs > Related Links Local Programs Local Programs & Roadshows Pathways to Prison Immigration And viewers like you. Neighborhoods Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat Contact Detroit Historical Museum Detroit Journalism Cooperative Connect MiWeek American Black Journal Great Lakes Now Detroit Performs Privacy Policy Terms of Use LATEST VIDEOS 2017 Detroit Public TV Riley Broadcast Center 1 Clover Ct Wixom, MI (248) @dptv.org ate of Education / ss Tech Drama udents Dr. Nikolai Vitti / Maria s Story February 1, by Example Michigan GOP / State Budget Report February 1, by Example Diversity & Venture Capital February 1, by Example uary 1, by Example m ipsum dolor sit amet, ec adipiscing elit, sed m. Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam. Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam. Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam.

6 Web Design Detroit Public Television s Main Website Originally, Detroit Public Television s digital team planned to upgrade their website to the latest version of the PBS-provided content management system framework used to build partner station pages. However, after months of researching, finalizing a basic wireframe, and building a few pages, we discovered that the current version of the website builder would not work for all of the station s needs. Introducing Plan B: Reworking the updated design ideas into a more complete, older version of the framework. Because of the difference in usability, many of the features that could be implemented with a click in the newer system had to be coded from scratch here, including the image and text layout used for the Channels section, the poster layout for the Local Programs and the secondary navigation for the About pages.

7 Web Design Modernism vs Post-Modernism Web Design Study These mockups are the final result of a large scale project focusing on the differences between modernism and post-modernism in website design. Both examples use the same basic framework, while the principles of the two design theories are what inform the individual details. The first website on the left focuses on clean and open design, with no excess details. The simple color palette is mainly used as an accent and to divide site sections as necessary. Login Cart Checkout Create Account Shop Locations food a e S a n i r a M Sustainable Farming Marina Seafood Established 1984 Our Story Shop - Sustainable Farming - Our Story - Locations Oys ters Lore on t m ip Shop sum alf S dolo r sit ame hell t he H na s i r a M s k c i P h Fres Sustainable Farming The second example defies expectations with bold lines and more dynamic movement, yet still presents a layout that is easily understood and navigated. Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, cons ec adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea lobortis nisl ut aliquip ex ea commodo consequat. >>Read More Our Story Sustainable Farming Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla

8 App Design Dream:ON App Redesign Dream :ON 100% start dreaming 100% The main goal of this project was to update this dream diary / meditation app with a visual design that was accessible, streamlined, but most importantly, relaxing. Interactive areas are marked with clean buttons and sleek text to keep navigation simple and direct. The pink and purple tone carried through the assets and images represent a dream-like sunset that is designed to fade into night as the user works through the process of setting up the app before bedtime. start dreaming dream diary dream store settings information wake me up at 09 : 45 alarm big ben volume soundscape new york life 23 : hrs 00 mins left stop dreaming 100% 100% 100% dream store soundscapes dream diary categories feb 29 peaceful garden relaxation tagged friends Luigi Mario Lee M. Cardholder awake sleep adventure deep sleep fun nightmare peaceful garden add A trip to the beach right inside your dreams. Watch as the birds swoop past and ride the ocean. dream notes Hi, stranger. It s been a while. I ve missed you. I feel like I can really be vulnerable around you. Do you like this tree I made? Cool, right? I thought it was cool. It s so hard to make things sometimes, you know? It just takes so much mental energy. And I get so tired. I just want to sit here and relax with you. Wow! Check out the sunset. It s so nice to stop and take this all in. It really makes you enjoy being alive.

9 Visual Identity

10 Visual Identity ID Hat Shop Logo Guide For the logomark, the sun hat shape matches the client s primary product and the smooth curves of the image are meant to give off a light yet elegant, high fashion feel. I used a darker shade for the front curve of the brim in order to add depth and strengthen the connection between logotype and logomark. Next to the two-tone hat, I chose a thin typeface to give the pair a clean, minimalistic feel. And to complete the effect, the entire design is two shades of blue, a combination meant to be both cool and serene. Logo 3 X 1 ID Hat Shop Front ID Hat Shop Back Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. etsy.com/shop/idhatshop

11 Visual Identity Youth Study Promotional Material In this poster and sticker set, I brought together colorful images starring young kids and a professional structure to create a design that should appeal to both children and their parents. The imagery shows the child as both a patient and future doctor, supporting a long term partnership with the Health System through studies, visits and potential careers. We work with Future Doctors! Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam. Lorem ipsum dolor sit amet, consec adipiscing elit 100,000 Meaningful Statistic 50,000 Meaningful Statistic Lorem ipsum dolor sit amet, consec adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. I am a Ut wisi enim ad minim veniam. Lorem ipsum dolor sit amet, consec adipiscing elit 1 Impactful Statement Future Doctor!

12 Information Visualization

13 Information Visualization UofM Color Printer Map Inspired by the colors found on printer test print-outs, this map presents helpful information in a simplifed design. By keeping the layout limited to basic shapes and lines, the emphasis is placed on the most important information--printer location and type--rather than building shapes and more specific land details. The more specialized printers are marked with the brighter colors of the palette, making them more noticable, while avoiding oversaturation that might detract from the overall design. University of Michigan Central Campus COLOR COLOR MULTI POSTER Color Printer Map UNION B620 South State North University MH 444 AH 4182 TAP 260 South University RACK 3550 East Washington GLIBN 212 Fletcher CHEM 1720 DENT B344 DANA 2315 SHAPIRO 1000 SHAPIRO B000 SSWB B700 ROSS 00C1 ROSS 10C1 ROSS 10C4 Washtenaw Ct. CCL 1540 CCL 1570 East University Washtenaw Avenue STOCK 1015 Geddes

14 Contact Me phone: (313)