GoooOOo Girl! Go go GO GIRL!! So you can probably tell we’re really excited to share this latest addition with you. GO-GIRL which stands for Gaining Options-Girls Investigating Real Life, is an engaging program for middle school girls to help increase their confidence in their academic endeavors. With such energetic target audience, we couldn’t help tap in our playful side during the redesign.

Some of the criteria given to us before the redesign were the use of their colors (purple, fuchsia, and teal), their logo, and with specific request – the use of their yellow stars as much as possible. With such vivid colors, bold logo and embellishment, our main concerns were overcrowding and clashing styles. So how do you design for middle school girls with much flair while still keeping the university’s web standards? Very carefully use their elements and only use them where it counts. Take a look around. We’d love to hear your feedback.

View the site at: http://gogirls.wayne.edu/

Designing for a Sustainable World

Designing for a Sustainable World focuses on how our products and services impact our world. The ‘Cradle to Cradle’ approach is to start the design with the premise of using materials that can fully enter a new life cycle by either going back to nature or going back into the design process as a new product. This holistic approach to sustainable design shows how usability can apply to all of what we do and build.

Please “Save the Date” for this program that will be relevant to researchers, professionals, and students alike. Explore advanced and timely topics of usability, accessibility and human-technology interface design in the sustainable global knowledge economy.

Tours of the MSU Usability & Accessibility Center are included in the day’s agenda.

For information on how to get involved, please visit http://www.usability.msu.edu/conf/2009/.

Before and After

Turn your everyday photos into something that looks like it was taken by a semi-pro. This four-step tutorial is fun because it doesn’t require hard work and the final outcome never disappoint! Lets start!

STEP 1

Once you’ve picked your photo, Duplicate the layer.

STEP 2

With the duplicated layer selected, go to Image > Adjustments > Desaturate. This will turn your photo black and white.

STEP 3

With the duplicated layer still selected, apply Gaussian Blur. Filter > Blur > Gaussian Blur (about 3.5 Radius). Play around with the amount after you’ve finish the tutorial completely. The higher radius will add more diffuse glow to the image.

STEP 4

After the layer has been desaturated and blurred, using your Layers Palette, in the blend mode, select Overlay. Ta-dddaaa! Ooh soo DRAMATIC and fun!

RECAP

Before and After

OTHER SAMPLE

The University Pharmacy is a tenant of The Towers Residential Suites. They are a full pharmacy and open to the public. They came to us because their web presence was lacking, it was hard to find what they offered, promotions and basic information.

We took the needs of the pharmacy and its users and designed the site from the ground up. Every piece has the end user in mind and migrating it into our content management system allowed the pharmacy staff to update content and promotions in a timely manner.

The old site was primarily blue and oddly enough had a “EPIC” logo in the top left corner of the site. It is interesting because you would think at first glance this was for EPIC Pharmacy, it was very deceiving.

The other thing about the old homepage was the large amount of text. At first glance it did not engage the user so they were forced to look to the left hand menu to get information. Promotions and other “sticky” information were buried on child pages just waiting to be stumbled upon. For example, the pharmacy will deliver prescriptions anywhere on campus when they are ready. Something students, faculty and staff would find as a great convenience.

We changed all that with the new site having the University Pharmacy logo in the top left, using orange to make an impact and reducing the amount of text on the homepage to make way for promotions and things to catch the user’s eye.

Overall the new site and structure allows for a user experience that matches the convenience and capabilities that the University Pharmacy has to offer.

View the new University Pharmacy site at: http://universityrx.wayne.edu/

Within the last year we have seen a dramatic increase for the demand of HTML emails.  To keep up with the demand we have created some default templates for schools and colleges, as well as a very basic template to keep the Wayne State University brand uniform across campus.

There are two basic methods on sending email to your clients: HTML version and text only version.  There are various advantages to each and it seems the HTML version is more popular based on demand.

HTML Email

Advantages:
Allows you to brand you emails, with the use of colors, logos and stucture
Visually appealing and you can get your point across with images
You can track your your email campaigns and see their effectiveness
Better readability and people can skim over the content to get to the point fast

Disadvantages:
Each email client renders HTML coding differently, making it more challenging to design uniform looking campaigns, across all email software and applications
Can be more complicated to design and write for to avoid anti-spam filters
Increased chance someone won’t open the HTML email, because they are scared of getting a virus

Text Email

Advantages:
Concise and simple to produce
Looks more personal and will render correctly across all email clients increasing readability
Less problems with spam-filters and delivery

Disadvantages:
No Creativity present creating a flat “brandless” email
People more apt to delete or not read the whole message if in text format
Unable to track the campaign and analyze the open rates

There is alot of parameters to examine when choosing what format to create your email messages in. Wayne State University’s email client, Wayne Connect sends out an alternative text version of the HTML email as well, increasing the probability the client will get the message in their preferred format.

We intend on tracking some of these HTML email messages in the future to see how effective these campaigns have been. In the meantime, we will deliver what seems to be in high demand these days, which is  creating the emails in HTML format to appease our visual nature.

This morning I was presented with their default login page to bring into the Wayne State look and feel. I have included the before (left) and after (right) screenshots below.

Key Changes

• WSU header and footer were added to maintain consistency with the rest of the sites.
• Colors were changed to match WSU colors
• Layout completely changed to emphasize the login form
• Expanded instructions were all moved to the right with image indicators
• Page now validates and is ADA compliant

Overall the goal of the page is to get the student logged in and on their way as quickly as possible. Having clear visual cues and help instructions are key to making the page successful. I also added the phone number so they could talk to someone right away if they have questions.

Checkout the live login page at: http://appstatus.wayne.edu/

Why this made sense then

It made sense when we first launched because it had to portray a “new outlook” of Wayne State. After being stuck promoting events the last 5 years the main focus of the homepage was to show how vibrant and enjoyable campus is.

Why it was time to make a change

It is time to make the change now that the site has been up for a few months, students have come back to campus and are now accustom to the new homepage. We did a few tests and we found that the stories behind the More Information area were not getting as many views/clicks as we wanted. These were the real success stories that change minds and hearts and we needed to bring these to the forefront.

We tested different options

The best way to get these stories in front of users eyes is to remove a layer of the branding images so we started by just removing the branding images all together and put the most recent three stories up front. This got us the clicks we wanted but came at the cost of less people going to the More Information area and completely threw out our impacting images.

Our second test was to keep the first layer of impacting images but when someone clicks on a category within More Information it would go directly to the most recent story and not to another branding image. This would allow the user to not only get right to the most recent story but it also allowed them to easily click through the five categories to see if there was anything by image and not rely on the title.

What we decided on

We decided to keep the second test running. This offered the best results, it still allowed us to bring the impacting images front and center and allowed users to get to the success stories with fewer barriers. It has yielded a +10% increase in views of the newest stories.

Final Thoughts

Keep your users at the forefront of all design and information decisions. Although we did not get any complaints about the success stories being difficult to find we knew we could get more pertinent information to users instead of them just looking at pretty pictures all day. A users time is their most valuable asset and for them to spend any time on yoru site at all you should be flattered, don’t make them waste that time with barriers to information.

We just launched the redesigned and realigned TechTown Web site. Although it is not a department of the university TechTown is closely tied to us and provides high-technology startups with the resources they need to be successful. They approached our department to raise the stature of their site to match what is deserves.

New Site Features

Compacted header with primary branding. One central navigation menu with drop down’s. A central spot to promote one of the many TechTown companies. A center News and Events area with RSS feeds, this is the main point of the new homepage, to show how active the community is.

In the middle is the actual explaination of TechTown with a loop through promotions to the right and below that an actual map of where TechTown is located. Since there is no location tied to the name TechTown we added a visual map to show it is located in Detroit, MI.

Compare to the Old

Comparing the old TechTown site to the new is night and day. Before the header was a large image which really had nothing to do with TechTown as an incubator for new technology. The news in the upper left was useless, it almost never changed and was competing with the TechTown logo.

In addition to the header there were TWO menus on the page competing for eye balls. Most of the links on the left are to external sites which launch in an iframe in the center of the TechTown site. This is a horrible idea on many levels and yet there are legitimate links peppered throughout the left menu. The top menu is pretty solid although the items have no particular order to them.

The main content has been static for a while and it takes up a ton of realestate, in addition the right column with the tenant roster just lists a bunch of logos and names but does not give any insight into what these companies do, it is just like a post it board so all the companies can have “homepage presence”.

Overall

The launch was a great success in both rebranding TechTown and getting information to the users in a more friendly and organized manner.

Checkout the site at: http://techtownwsu.org/

We just launched the redesigned Government and Community Affairs Web site. The redesign was prompted by a need to expand functionality and their site outgrew the old navigation.

The design was inspired by a drive to simplify the navigation, the old site had 3 areas where a user could find links. Centralizing the links to the top and using the bottom section for the main action items visually equalized the page. The rotating main image on the homepage has a main goal of giving the user a nice feeling that a lot is happening and they can easily get involved and when they do it will be worth while.

The main goal of the site is to get the community affairs section more traffic, leading to more volunteers. So we added reference images and promotions to the sides of those pages to show how easy it is to volunteer and how rewarding it can be.

Check out the site. If you like it vote for it on eduStyle.

Information for the parents section of the admissions site has been expanded to separate the information into Just Started parents and Already Admitted groups. Both groups have different needs and could not be served equally on the same page.

In addition to information expansion the campus is expanding too. An update to the Campus Map includes the South University Village and its parking structure. Both currently under construction but will be open soon. We also added a more detailed map for the Macomb extension center to help with directions and details about getting around the large Macomb campus.