Portfolio

Ideaction Corps Website

2013-05-15T18:04:53Z

Ideaction Corps Website

Website

Ideaction Corps is the brainchild of Kelly O’Brien, who has lead numerous strategic social change campaigns for organizations, companies and government agencies, raising money and awareness, building coalitions, and increasing the impact of programs. But Kelly still dreamed about making a bigger impact. She established Ideaction Corps to serve as a hub that would connect people and companies with great ideas that will make the world a better place, with a network of individuals and agencies who share a passion for creating change. Kelly called Mightybytes to design and develop a website that could facilitate these connections.

OUR APPROACH:

Through our initial research, Mightybytes worked with Kelly to identify the website's primary users. What types of organizations reach out to Ideaction? What types of kinds of questions would they have that the site could answer?
After an initial research, Mightybytes recommended that the site be built with ExpressionEngine, a community-supported content management system (CMS), because it provides allows for lightweight, user-friendly content management.
Ideaction pairs organizations looking to make a positive social impact with a like-minded corps of talented agencies, creatives, freelancers of all shapes and sizes. Mightybytes created an intuitive interface that makes it easy to find members with certain skills based on the needs of their project.
Mightybytes also created attractive profile pages for each corps member that incorporates that company or individual's branding, while maintaining the look and feel of the rest of the site.
Ideaction Corp's website incorporates responsive design. Mightybytes designs for mobile devices first, then expands that design so that it looks great across a variety of devices from tablets to high resolution desktop screens.

IMPLEMENTATION:

The Ideaction logo already has strong typography, so Mightybytes built a site to match featuring an interplay of bold and muted colors inspired by WPA posters.
The site employs a combination of the LESS, a front-end development framework, and our own custom framework to achieve a responsive, mobile optimized web experience.
In addition to mobile optimization, the site follows Sustainable Web Design principles and is hosted by a company that uses renewable solar and wind energy. The website loads quickly, and uses CSS instead of more bandwidth-heavy images wherever possible. The site achieves a score of 92 on Google PageSpeed, a tool which measures website speed and performance, and a 91 on Mightybytes’ own web sustainability measurement tool, EcoGrader.

BlazePortfolio Website

2013-05-15T18:04:51Z

BlazePortfolio Website

Website Design/Development

BlazePortfolio Systems LLC develops software and business solutions that help investors execute their investment strategies. Their flagship product, ATOM ALIGN, is a leading web-based modeling and trade order management solution for a variety of custodians including investment advisors, wealth management professionals, trusts, broker-dealers, and multi-family offices (MFO).BlazePortfolio called Mightybytes to design and develop a new marketing website that will help take their SaaS solution to the next level. The company's old site did not clearly communicate the ATOM ALIGN's benefits. It featured Flash animations that didn't work across all mobile devices and tables. It also had an unclear navigation.The purpose of the new site is to educate investment professionals on ATOM ALIGN’s powerful feature set, and to follow best practices for search engine optimization to bring new potential clients to the site. The new website also acts as a powerful lead generation tool for sales, by showcasing high-profile clients and partners through prominent logo placement and testimonials.

OUR APPROACH

Mightybytes shifted the focus of the website away from company information to ATOM ALIGN, BlazePortfolio's capstone product, and its four most notable product features. By refocusing the content on the product itself, customers learn more up front and headings can be optimized to promote the product and its features through SEO.
The new site also leverages the success stories of existing clients through a new testimonials content feature.
A streamlined visual design showcases the product's features and benefits more clearly. Our design team riffed on the company's existing color palette, incorporating background textures and gradients, which were implemented with CSS.

IMPLEMENTATION

Mightybytes selected and implemented the Drupal content management system (CMS), making it easy for BlazePortfolio to add new user roles (such as additional sales team members or customer advocates) to the website as company's team grows.
Drupal also was the perfect choice for seamless integration with customer support tool Zen Desk, a job listings tool JobScore, Salesforce and other mission-critical third-party tools.
The site's design was implemented with HTML5 and CSS3. This allowed for sophisticated design elements that don't compromise the site's speed and performance.

The Gift Theatre

2013-03-01T19:33:01Z

The Gift Theatre

Website Design/Development

APPROACH

The Gift Theatre is an ensemble with a permanent home in Chicago's Jefferson Park neighborhood, which has the mission to "tell great stories onstage with honesty and simplicity". The company partnered with Mightybytes on the creation of a new theatre website design that better reflects their mission, a new logo with a hand-illustrated look, and an improved, mobile-friendly ticket buying experience for their customers.After an initial meeting with The Gift Theatre staff, we decided the best way to understand an audience member's experience was to try it first-hand. We set out for a night of food and theatre in Chicago's Jefferson Park neighborhood, stopping first at Gale Street Inn, the restaurant of Gift Theatre Board Chairman and restaurantuer George Karzas. From there, we went down the street to the company's theater space to see Dirty, a tale of philanthropy and pornography written by Chicago playwright Andrew Hinderaker. Inspired by our night out, we set out to reenvision both The Gift Theatre's brand and their website, capturing the warmth and intimacy of the ensemble's 50-seat storefront stage and making it easy for audiences to get show info or purchase tickets whether they're at home or on the go.

LOGO DESIGN PROCESS

Here is the approach that we took to redesigning The Gift logo:

We talked at great length with founder Michael Patrick Thornton about The Gift Theatre's hand-crafted productions.
For the logotype we focused on the idea of something hand-written, drawing inspiration from Thomas Jefferson’s Declaration of Independence.
We researched the meanings and symbolism behind a variety of hand-based gestures and sign language and presented alternative ways of expressing the idea of giving a gift, then illustrated the final logo.

Web Design Process

Here is the approach that we took to designing The Gift Theatre's website:

In our initial meetings with staff, we talked about creating the feel of watching a show from a friend or family member's living room couch through the website's new design. One technique that we used to achieve this is through our use of subtle textures in the background of the site. These textures help bring a more tangible feeling to the site, which creates more of a personal and human (and less computer/ techy) vibe. This approach resonates with the redesigned logo.
We also talked about the importance of incorporating, even if subtly, The Gift Theatre's color palette of black and yellow. Because these two colors are themselves so strong and bold, we knew we needed to soften them up a bit to achieve the warm and friendly feeling we were shooting for.
Various shades of black and cooler gray tones are used throughout the site to help focus attention on the various pieces of content and to create a structure for that hierarchy.
The typography stack, or set of fonts, that we used includes a blend of handwritten, modern, and web-safe fonts. We used Google Web Fonts, a collection of high-quality, open source fonts that are optimized for implementation in web development projects.

IMPLEMENTATION

When devising a web development approach for The Gift Theatre, Mightybytes focused on making the ticket buying experience a breeze for customers, including those who access the company's website via mobile devices.Here are a few of the methods we employed during the development of The Gift Theatre's website:

Mightybytes built the site using the ExpressionEngine 2.0 content management system (CMS), which makes it easy for The Gift's staffers to create and update content.
Our web development team partnered with Brown Paper Tickets to facilitate a user-friendly ticket buying experience.
Mightybytes employed responsive design for The Gift Theatre's website, so that audiences can easily get information on shows, purchase tickets or subscribe to the company's season, whether they're browsing the site on a desktop, laptop, tablet or smart phone device.

YMCA Website

2013-02-28T16:57:16Z

YMCA Website

Website

THE APPROACH

YMCA of the USA, the national organization behind your local Y, approached Mightybytes about taking their newly rebranded website and putting it into a staff-friendly and search engine optimized content management system for the first time. By moving the static site into a CMS, Mightybytes has made it easy for Y-USA staff to launch new content campaigns, update content, and to facilitate the review of content by internal and external stakeholders all while promoting the consistent implementation of the organization’s new branding standards.

IMPLEMENTATION OF THE YMCA WEBSITE

Here is the approach that we took to implement the YMCA of the USA’s project:

After an initial discussion with Y-USA staff, Mightybytes recommended and implemented Drupal, an open source content management system (CMS), because it provides an approach to the challenges associated with moving the static site into a CMS and accommodates plans for future site growth.
One of the unique aspects of Y-USA’s online branding is a rotating color palette, complete with rotating favicons: the tiny logo that appears in your browser bar when you visit the site. So to the website visitor, the site may appear a cheery shade of teal, orange, red or blue on different visits to the site. Mightybytes implemented this with a combination of cookies and CSS, not requiring the use of server side programming.
Mightybytes created custom content types within Drupal, making it easy for staff to create or update pages that use a variety of pre-designed layouts.
Mightybytes gave Y-USA staff the ability to schedule content publication and expiration, making it easier to plan the launch and maintenance of new content campaigns.
Because we implemented page headings and marketing copy with web fonts, staff can quickly update the copy on the heading of a page or within a slideshow carousel without opening photoshop. This approach improves accessibility compliance, promotes multi-device compatibility, and makes pages load faster which in turn reduces the organization’s online carbon footprint.
Mightybytes configured user roles within Drupal to facilitate the publication and review of content by internal and external stakeholders.
Mightybytes partnered with YMCA’s IT staff to devise the best approaches to a range of technical challenges from web hosting that would accommodate site growth to the integration of content from legacy databases.

THE RETURN

By moving Y-USA’s static website into a content management system, Mightybytes improved staff workflows and facilitated the review of content by internal and external stakeholders. Our technical approach plans for short term success and for future phases of growth and development of the website. Mightybytes implemented unique aspects of Y-USA’s visual branding while promoting brand consistency through the creation of page templates and implementation of branded fonts and CSS styles.

Climate Ride Online Store

2013-01-15T21:49:08Z

Climate Ride Online Store

Online Store

Climate Ride is a not-for-profit organization that produces two annual 300+ mile-long bike rides for hundreds of cyclists, raising donations for nearly 50 environmental and cycling advocacy organizations. Mightybytes created an online store that enables them to sell t-shirts, cycling jerseys, and other cool gear directly through their website for the first time. Previously, charity ride participants and donors were only able to purchase merchandise offline, by contacting Climate Ride through email or over the phone.

OUR APPROACH

Mightybytes created an online store that Climate Ride staff are able to update quickly and easily through Expression Engine, a content management system that our team implemented when we redesigned Climate Ride's website. That means that Climate Ride's busy non-profit staffers are able to use a single, seamless system, whether they're publishing a new blog post or adding a new environmentally-themed t-shirt to their online store.

ONLINE STORE IMPLEMENTATION

Mightybytes used an ecommerce solution for ExpressionEngine called exp:resso to implement Climate Ride's online store. Web Developer & Designer Tai created custom Javascript on product detail pages that shows when the inventory of a particular t-shirt or jersey is running low. This helps create a sense of urgency, encouraging the customer to buy a product while supplies last. Tai also configured the product detail pages so that when you click on a product photo, a larger image comes up in Lightbox, enabling a customer to zoom in on a t-shirt's design, or to flip through a series of images without ever leaving a product page.

THE RETURN

Climate Ride's new online store makes it possible for the organization to sell products online year round, and not just at their two annual charity ride events. This has also allowed them to sell merchandise to non-riders for the first time, and to cyclists who want to buy merchandise before an event. The new online store makes it easy for staff to add new products and product categories, set prices and manage coupon codes using the content management system they are already familiar with.The new online store has made the process of managing inventory much more efficient. Previously, Climate Ride staff managed their inventory through a series of Google Docs, which were hard to keep up to date, especially because each item comes in a wide variety of colors and sizes. They also sometimes had to go and check to see what was on their shelves, which took a lot of time. Before the launch of the online store, customers would email them about whether a particular item was in stock. Now customers can see at a glance whether an item is in stock, or almost out of stock. Eliminating email correspondence and improving inventory management has greatly reduced staff time.Because Climate Ride can upload multiple images for each item, its allowed staff to include photos of real people wearing the merch and not just a graphic that shows the shirt or cap's design. All of the improvements that Mightybytes made to the site has helped Climate Ride make more sales and clear out their inventory, saving on the cost of shipping inventory to and from events, and clearing their shelves for new items.

UIC College of Business Website Upgrade

2012-10-30T19:11:24Z

UIC College of Business Website Upgrade

Website Development

Founded in 1966, the UIC College of Business Administration is a Chicago-based research institution with a diverse student body that promotes entrepreneurship through real-world experience. Their MBA program is regularly recognized as one of the top 25 programs in the country. Mightybytes jumped at the chance to work with UIC again on a website upgrade project, having previously partnered with the College of Medicine at UIC on the award-winning Chicago Diabetes Project website.The UIC College of Business Administration's primary goal in overhauling their website was to implement content management through the Sitefinity content management system (CMS), a content management system that a number of UIC divisions use.

APPROACH TO WEBSITE UPGRADE

A few years ago, UIC contacted a vendor to create a website for the College of Business Administration, but they didn't deliver. Having worked previously with Mightybytes on the Chicago Diabetes Project, Heather Hoffman, Director of Marketing and Communications at the UIC College of Business Administration knew Mightybytes was a valuable resource and she turned to us to complete the project. Mightybytes' project management team listened to UIC's concerns and successfully implemented the project as they had originally envisioned it.

IMPLEMENTATION

While Mightybytes normally favors open-source content management systems, we have the flexibility to meet our clients' needs. Because UIC already had a license for the Sitefinity CMS, Mightybytes implemented the project using that content management solution. Mightybytes skinned the site with a previously completed design, and customized the content management system to include a robust drop down menu, specific sidebar functionality and news and events content features.

Indiewire Email Newsletter Template

2012-10-11T15:09:43Z

Indiewire Email Newsletter Template

Email Newsletter

A two-time Webby Award winner for best film website, Indiewire contacted MIghtybytes because they needed a new email newsletter template. Indiewire operates over 15 microsites and entertainment industry blogs on a variety of topics including film history, movies reviews, movie industry news and film festivals. Indiewire also showcases original content created by well-known independent filmmakers. They were looking for a way to promote all of their microsites and blogs through email newsletter campaigns targeted to different segments of their audience. At the same time, all of their email newsletters need to maintain consistent Indiewire branding.

OUR APPROACH

Our challenge was to create an email newsletter template that could be adapted to promote each microsite, while maintaining Indiewire's brand guidelines. The template we crafted for Indiewire features a customizable banner image, and a layout, colors and images that are compatible with a wide variety of email systems, as well as with web and mobile web browsers.

IMPLEMENTATION OF THE EMAIL NEWSLETTER TEMPLATE

Web Developer & Designer Tai created Indiewire's email newsletter template that mirrored the look and feel of the site. The features of the email newsletter template include cross-browser compatibility and a customizable banner image area. The template presents a seamless brand experience for all of Indiewire's audiences.

THE RETURN

Mightybytes provided Indiewire with a versatile, standards-compliant email newsletter template. Indiewire has gained the ability to customize their new email newsletter template with microsite-specific header images, and to draft emails to their subscribers quickly, using a template that promotes brand and design consistency across all of their content channels.

Climate Ride Content and Social Media Campaign

2012-08-17T08:07:07Z

Climate Ride Content and Social Media Campaign

Content and Social Media Campaign

Climate Ride is a not-for-profit organization that produces two annual 300+ mile-long bike rides for hundreds of cyclists, raising donations for nearly 50 environmental and cycling advocacy organizations.After building a new website for Climate Ride, Mightybytes wanted to put the site to the test by running an aggressive content and social media campaign that would extend Climate Ride’s outreach to new audiences and support the sponsors, riders and donors who make each event possible. We used the 2012 New York City to Washington, DC Climate Ride as the foundation for this campaign.

OUR APPROACH

Our approach for the content and social media campaign surrounding the event focused on providing engaging content for the following user groups:

Donors, friends and family of riders
Riders (past and present)
Sponsors and in-kind donors
Media
Beneficiaries

Beyond engaging key audiences, Mightybytes also created a plan to drive traffic to the website, increase donations, maximize the reach of user generated content, and to enhance the experience of cyclists on the ride. A team of five people—three on the ride and two working remotely—helped our efforts to build content for the five-day event. We were also supported by dozens of volunteer riders, who told their stories through blog posts, photographs and video interviews, as well as via shared content on their personal social networks.

IMPLEMENTATION

Mightybytes created a content and social media strategy for Climate Ride that spanned across many channels, including Climate Ride’s blog, YouTube, Twitter, Facebook, Foursquare, Pinterest and Instagram. Highlights of the plan included:

Setting up the functionality to enable riders and Mightybytes staff to blog and post photos from their mobile phones during the ride.
Writing over 80 tips for Foursquare, creating custom locations, and establishing five lists (one for each day of the ride) to enhance cyclists’ experience.
Enabling simple video workflows for field-based shooting, editing and publishing.
Establishing a hashtag to be used across all social media channels, and creating fliers and an oral presentation to communicate that hashtag to riders the first day of the ride.
Expanding Climate Ride’s social media channels to include Foursquare, Pinterest and Instagram to leverage user-generated photos and check-ins.
Creating a flexible messaging plan targeting key audiences for Facebook and Twitter, which could be adapted in the field.
Setting up listening tools to capture messages about Climate Ride to increase engagement, meaningful interactions, and shareability of content.
Mapping Climate Ride activity using geotagged information so that audiences could see the ride as it unfolded.
Establishing key performance metrics before the ride started so that results could be measured and acted upon quickly.

THE RETURN

Our content campaign for Climate Ride’s NYC-DC event saw dramatic increases in target metrics across the board during the time leading up to, during, and shortly after the ride. Here are just a few examples:

73.23% conversion funnel rate on donations via the website, making this one of Climate Ride’s most successful events.
16% increase in Facebook friends.
262 mentions and retweets on Twitter during the ride’s five days.
Hundreds of videos and photos shot and shared across multiple networks with a potential audience in the hundreds of thoursands.

If you would like to review our full report on this campaign or discuss how we might be able to help you with similar ambitions, feel free to contact us and we can discuss details.

Motor City Brewing Works

2012-07-11T08:27:18Z

Motor City Brewing Works

Website

Motor City Brewing Works (MCBW) is the second oldest craft brewery in Michigan. MCBW’s new site remains true to the brand while making it easier for customers to see what’s currently brewing, download seasonal menus and learn about upcoming events, like art shows, bike rides and tastings.

OUR APPROACH

As avid craft beer brewers, Mightybytes was excited to take on a brewery project. From a design standpoint, we wanted the website experience to mirror the actual experience of visiting the brewery in Detroit, complete with gleaming wood floors, urban greenery and gears that are reminiscent of Detroit’s roots as an industrial city.

Here is the approach that we took to designing the MCBW website:

We started out with a site visit, where we sampled MCBW’s hand crafted beers and put ourselves in the perspective of a new customer, to begin to understand the flavor of their brand.
We read all guest reviews to gain a better understanding of MCBW’s customer experience.
Photographs of MCBW’s neighborhood and the bar itself helped inspire our visual design.
We created a mood board to define the overall look and feel of the site.
We devised a new visual approach that made the MCBW brand more approachable and memorable while subtly incorporating MCBW’s original branding, which was difficult to read, into the site design.

All of these elements give the new design of the site an authentic and hand-crafted look and feel, showcasing MCBW’s latest products and telling the brewery’s story simply and effectively.

IMPLEMENTATION

When devising a development approach for the Motor City Brewing Works site, Mightybytes considered ease of use, both for brewery staff who need to quickly update their product information to include seasonal brews, and for MCBW’s customers who might be checking out the brewery’s website on a mobile phone from the comfort of MCBW’s Taproom, or looking for a convenient place to buy an MCBW brew near their home.

Here are some of the tools that we used and the features that we built during the development of the MCBW website:

The site is built using the ExpressionEngine 2.0 content management system, which makes it a easy for MCBW staff members to get the word out about new brews, highlight upcoming events, showcase new vendors and blog for the first time.
Our web development team seamlessly integrated Google Maps into the site with an Expression Engine add-on, helping customers discover Motor City Brewing Works beer at local retailers and bars by typing in their zip.
Our design team created custom icons for Google Maps, integrating MCBW into the new, convenient Find Our Beer feature.
Mightybytes employed responsive design for MCBW’s site ensuring that one of the brewery’s primary audiences—patrons sitting in their taproom trying to access the site from mobile devices—will have a great user experience.

By using customized open source solutions, Mightybytes ensured that MCBW staff will be able to communicate with their customers efficiently and effectively while telling their brand’s story.

Financial Information Forum

2012-06-05T13:02:03Z

Financial Information Forum

Website

The Financial Information Forum (FIF) has been collecting information, news, and documents on various issues related to financial technology since 1996. FIF provides content—gathered and curated from various sources—on the latest initiatives relevant to front office regulatory issues, market data capacity, and back office challenges within this industry. FIF also provides events and opportunities for members to discuss and collaborate on these initiatives.

With an unwieldy site design that hadn’t been updated since 2005, FIF turned to Mightybytes for help improving user experience and organizing site content.

APPROACH

FIF recently migrated their content management system to Joomla but a design overhaul wasn’t part of the original scope. To bring their interface and user experience in line with the robust content management tools they already had in place, we worked within their business model and site structure to define users on both front and back ends and analyzed tasks each group needed to accomplish when using the site.

IMPLEMENTATION

By creating effective user stories, we were able to rework the site’s structure and layout, aligning it to match criteria set forth in our documentation. Resulting tasks included:

Reorganized content to support clearer navigation.
Designed template layouts to provide the site with a more consistent visual hierarchy from page-to-page.
Implemented updates to the logo and color palette.

THE RETURN

Tools included in the new site help Financial Information Forum organize all of their data for better site performance. We helped them improve site structure and information architecture with the data already collected. This new information structure helps them stay organized as they continue to gather data and helps users easily find the information they need.