iStrategyBlabs

Behind The Scenes: Natural Markets Food Group Web and Social Strategy

NMFG - NAtural Markets Food Group - iStrategyLabs blog post

In 2013, Natural Markets Food Group (NMFG) expanded their flagship restaurant and market concepts — Richtree Natural Market Restaurants and Mrs. Green’s Natural Market — across the US and Canada, and tapped iStrategyLabs to lead comprehensive website redesign and development, and social media strategy.

Before we started, Richtree and Mrs. Green’s had been operating independently, and NMFG was in the process of integrating them into a cohesive brand family. We were challenged to work within creative concepts that both maintained the companies’ unique identities and character, and refreshed them to reintroduce to new customers.

To meet the core needs of the project, we focused on three central objectives that would serve as a foundation to our approach.

1) Re-introduce a new, cohesive and unique brand identity. We needed to stay true to the companies’ history and core attributes, illuminate the best aspects of the brands’ character, and present a new identity that resonated with both long-time customers and new shoppers alike.

To accomplish the task, we knew we needed to make good food the star of the show. Beautiful photography of organic and all-natural foods are used front-and-center in our foundational design approach, complimented by supporting design elements of fresh colors and artisanal textures to provide a cohesive design concept.

From there, we were able to use the design framework to create a flexible, unique approach that tailors the core visual concepts to the individual brands. The result is a complimentary design approach that overlaps visually while maintaining a unique and independent visual character.

NMFG Website Design - iStrategyLabs - 4

Mrs Greens Website Design - iStrategyLabs - 1

Richtree Natural Market Restaurants - iStrategyLabs Website Design - 2

2) Create a customer-centered web experience. The heart of this project required us to reflect, compliment, and translate the in-store customer experience to the web. To do that effectively, what customers need to do first and foremost is experience the store in person — which means finding store locations and information, food options, and even complete online ordering in a simple, easy process.

To tailor the web experience for what customers need most, we focused on a few key elements. First, store information and locations are super-easy to find, making it as easy as possible to take the first step in experiencing these unique food markets yourself.

Mrs Greens Website Design - iStrategyLabs - 4 Mrs Greens Website Design - iStrategyLabs - 5

Second, an independent online ordering system was a top priority feature that informed our central design approach. While the integrations between platforms are simple, we designed them to result in a seamless experience from the customer’s perspective.

Richtree Natural Market Restaurants - Order Now Image - iStrategyLabs blog

Third, the websites prominently feature the essential aspects of a good customer experience — like in-store events, promotions and specials, recipes, and more. These aspects of the customer experience are important to customers who care deeply about the foods they eat, while driving in-store visits.

Mrs Greens Website Design - iStrategyLabs - 13  Mrs Greens Website Design - iStrategyLabs - 14

Fully responsive website designs help to ensure that customers can find what they’re looking for easily from any device, from the comfort of home or on the go at one of the many store locations.

NMFG_inside-crop

RT_inside-crop

MRSG_inside-crop

3) Bring it all to life with character.  Our design approach needed  to make Natural Markets Food Group  stand out from the crowd among other organic and natural food markets.

To do that, we used the latest, most innovative interaction design concepts, grounded by a foundation of arresting, bold imagery. The result is a flexible design framework that puts core visual elements in the spotlight — with just the right touch of motion and interactivity.

On the Richtree Natural Market Restaurants website, we use a fun set of animation designs that highlight individual dishes from each of their unique eateries, and reflect the personality of the store.

Richtree Natural Market Restaurants - iStrategyLabs Website Design - 3

For Mrs. Green’s Natural Market, bold imagery is complimented with full-screen parallax animation that highlights their core values around good health and good food.

Mrs Greens Website Design - iStrategyLabs - 7

And on the Natural Markets Food Group website, we used a unique slideshow format that combines bold use of color, imagery, and messaging to communicate the core values of the company and reveal what those values mean in practice.

NMFG Website Design - iStrategyLabs - 3 NMFG Website Design - iStrategyLabs - 4

Finally, we made it all social. In the design process, we accounted for how each of the concepts would translate into social media — and how social would integrate back into the websites.

Mrs Greens Social Media Website Feed - iStrategyLabs Blog

The ultimate result is a visually consistent network of digital marketing channels, customized to the personality of each market, with social media content that feeds back to the websites in a meaningful way.

On completion of our initial project phase, iStrategyLabs has remained on board as an NMFG partner, for ongoing website design and development, and as their social media agency of record. It’s been our pleasure to work with a company so committed to an innovative customer experience that promises good food as part of a healthy lifestyle.

Behind the Scenes: GE Trade Data Visualization

GE Trade Data Visualization - iStrategyLabs - 10 - 960x360

The Task: We partnered with GE to create a bold, intellectually engaging, and visually striking data visualization that shows relationships between variables around global trade. Executing the concept involved an agile design and development process to incorporate our data, and then creatively match the design and interactivity.

We needed to create a design to educate and entertain a broad audience, while also keeping experts and high-level decision makers in mind.

The Concept: Business and trade are complex issues that impact, and are impacted by many variables. This visualization allows you to explore relationships between trade, economic, and quality of life variables across the globe. In order to visualize those relationships, we analyzed and combined several publicly available global data sets from trusted sources.

The Process:

1) Data Analysis: We started by analyzing a number of global data sets to identify trends and relationships between variables and start to articulate how they would be visualized.

17 - GE Trade Data Visualization - General Electric - iStrategyLabs - ge-dataviz-final-plots 1

To compare data across multiple variables and scales (ex.: days, steps, financial values), we standardized the data to identify the relationships within and between values.

We then normalized, centered, and scaled the data so that each variable has a mean of zero (0) and standard deviation of one (1). No data is changed or altered in this process; it is simply standardized on a common scale, to isolate the relationships between variables.

The final visualization pulls from five global source-data sets from 2011, including: Global Imports & Exports (UN Commodity Trade Statistics DB), Global GDP (World Bank), Ease of Doing Business Index (World Bank), Global Competitiveness Index (World Economic Forum), and the Human Development Index (United Nations).

2) Comparing Relationships: After the data was normalized, centered, and scaled, we were able to identify and compare relationships between variables.

4 - GE Trade Data Visualization - General Electric - iStrategyLabs - GE-TradeDataViz-Wireframes-v1 - iStrategyLabs - 11-14-12

3 - GE Trade Data Visualization - General Electric - iStrategyLabs -ge_visualization_wireframe_inContext - v2

11 - GE Trade Data Visualization - General Electric - iStrategyLabs -ge_viz_design_map_country

To simplify and more clearly show comparisons between countries, we grouped countries into quartiles based on performance level per variable. Each country falls into the first, second, third, or fourth quartile (bottom 25% to top 25%) for each variable, which can then be compared to all other countries on a simple and common performance basis.

14 - GE Trade Data Visualization - General Electric - iStrategyLabs - GE Trade Data Viz - Designs v3 - 3-19-13 3

3) Visualizing Outcomes: Based on the data values and level of performance per country for each variable by quartile, we visualized the outcomes for each country and how it compares to other countries around the world. The visualization is a tool that allows you to explore and identify those relationships, for different countries, groups, and variables.

GE Trade Data Visualization - General Electric - iStrategyLabs -ge_dataViz_design_colorOption_03

The Product: The final product is an interactive storytelling device that illustrates the essential roll that trade and vibrant competition has on improving the world’s economy.

Complex global data sets are consolidated into a simple interface that allows for exploration and identification of relationships between trade, economy, and quality of life across a number of variables.

GE Trade Data Visualization - iStrategyLabs - 1

GE Trade Data Visualization - iStrategyLabs - 2

GE Trade Data Visualization - iStrategyLabs - 3

 

GE Trade Data Visualization - iStrategyLabs - 9

 

GE Trade Data Visualization - iStrategyLabs - 10

GE Trade Data Visualization - iStrategyLabs - 11

GE Trade Data Visualization - iStrategyLabs - 12

We were thrilled to work with GE to bring their vision to life, and always enjoy the challenge of making big data easy to see and simple to understand.

Rackspace Startups Website Redesign

Rackspace Startups Website Redesign - iStrategyLabs - ISL - Blog 1

We love working with Rackspace for their unique combination of racker savvy and scrappy start-up style. When we had the opportunity to work on the Rackspace Startups website redesign together, we knew we’d crush it.

The Rackspace Startups program provides startups with special access and pricing on tech tools, development platforms, cloud hosting, and professional development resources.

We redesigned a fully responsive website with a simple user experience that puts all of Rackspace Startups’ tools and resources at the fingertips of eager entrepreneurs everywhere.

We followed an  in-browser production process from wireframes to design and development, testing and refining the design at every step along the way. The product is an elegant, single-page website that’s fully scalable by adding new WordPress pages and blog content.

A few highlights:

A simplified sign-up and application process makes it easier for startups and incubators to find information and join the Rackspace Startups program.

YouTube API video integration dynamically pulls YouTube videos into the site, making new content available right from Rackspace Startups.

Easy content management. The Rackspace team includes a cadre of development rockstar rackers, we wanted to make content management so simple that anyone at the company could easily update the website anytime. We build the WordPress management dashboards to offer the easiest solutions for managing website content from custom pages to creating new forms.

We were stoked to work with Rackspace Startups on such a cool project and excited to see the future of the program.

Rackspace Startups Website Redesign - iStrategyLabs - ISL - 1Rackspace Startups Website Redesign - iStrategyLabs - ISL - 3

Rackspace Startups Website Redesign - iStrategyLabs - ISL - 2 Rackspace Startups Website Redesign - iStrategyLabs - ISL - 4 Rackspace Startups Website Redesign - iStrategyLabs - ISL - 5 Rackspace Startups Website Redesign - iStrategyLabs - ISL - 6 Rackspace Startups Website Redesign - iStrategyLabs - ISL - 8  Rackspace Startups Website Redesign - iStrategyLabs - ISL - 11

Service Alley Website Redesign for The Washington Post

Service Alley Website Redesign - iStrategyLabs blog post feature iamge

Service Alley is a startup by The Washington Post that helps you easily find the right home service contractor for your job, based on recommendations from your friends. When Service Alley wanted to upgrade their website and feature design, we worked with them to complete a full rebranding and website redesign.

In our discovery process, we found that customers simply want to find trusted, friendly contractors recommended by their real friends. With that context, we set out to redesign Service Alley from the ground up, with beautiful results.

Service Alley Logo - full

The new user experience is designed around trust and simplicity. Our top priorities were to increase service bookings, generate social recommendations and customer reviews, and update the look and feel of the website — all to more closely align with Service Alley’s core audiences. Our secondary goals included improving the search experience, boosting new-member sign-up, and improving navigation flow across the website.

Creatively, we focused on showing a friendly and simple concept that inspires trust and confidence. The new color pallet and logo are cool and approachable, and more clearly communicate the idea of a happy home.

Functionally, we re-aligned Service Alley’s content and website structure around social recommendations and search, in order to center and simplify the process of finding a home service contractor based on qualifications and recommendations from friends.

Early-stage wireframes show how we planned to design the new homepage around the most important core features:

Service Alley IA-UX Deliverables - Approved - iStrategyLabs - 3-8-13 (dragged) - CROP

And, the new search experience is designed for incredible ease of use:

Service Alley IA-UX Deliverables - Approved - iStrategyLabs - 3-8-13 (dragged) 2 - CROP

Two new features we upgraded on the site to accomplish Service Alley’s goals are “Friendorsements” and “Available Now!”.

With Friendorsements you can both ask a question on the ServiceAlley website and post it to your social networks to get recommendations about providers from friends.  Now you can stop guessing, and just ask your friends who they recommend.

Available Now! is a tool that allows you to search for home service providers  who are nearby and available immediately to come to your home and fix your problem right away.  You’ll never have to wait again.

The new homepage and interior designs show how we brought these concepts to life.

Homepage:

Service Alley Homepage Design - iStrategyLabs

 

Search:

11

 

Friendorsements:

12

 

Service Provide Profile:

10

The new website designs bring together the visual branding and updated IA/UX to create a simple and beautiful experience to find a recommended home service contractor who’s perfect for your job.

We were thrilled to work with Service Alley on the project and excited to see the great results to come, from happy homeowners and contractors alike.

Behind the Scenes – Simply Gifted Marketplace and Merchant Widget

1 - Simply-Gifted-iStrategyLabs-960x360-958x360

When we worked with Simply Gifted to build a new online gift card platform, we knew we needed to create an incredibly easy product for small businesses to create and sell online gift cards, and for customers to purchase and send them to friends.

Leveraging existing APIs, we followed our process of IA/UX, design, and development to create a beautiful, intuitive service to buy and sell gift cards, with full analytics and tracking for Simply Gifted to continue to monitor and optimize the platform.

What we produced is quite possibly the easiest way for small businesses to create and sell gift cards — and the best way for customers to find and purchase them on the web. Here’s a quick look at the finished product, and the process of how we produced it, below:

2 - Simply-Gifted-Marketplace-iStrategyLabs-ISL-1-2


IA/UX

Widget:

We started by creating wireframes and user flows of the entire set-up and purchase process for business and customers.

We worked hard to make the platform as easy to use as possible, simplifying the user experience and removing every obstacle possible.

IMG_0331

Scott, our design-lead on the project (above), works on early wireframe concepts.

The merchant website widget was designed for simplicity and ease of use for both businesses and customers:

simply_gifted_wireframe_v3_print (dragged) 4

 

simply_gifted_wireframe_v3_print (dragged) 6

 

simply_gifted_wireframe_v3_print (dragged) 7
Marketplace:

The gift card marketplace was designed to be equally simple, and easy to browse. Website visitors can search, customize, and purchase gift cards for local businesses across the country:

 

simply_gifted_wireframe_marketplace_v2_print

 

simply_gifted_wireframe_marketplace_v1_print (dragged) 1

 

simply_gifted_wireframe_marketplace_v1_print (dragged) 2

simply_gifted_wireframe_marketplace_v1_print (dragged) 4

 

simply_gifted_wireframe_marketplace_v1_print (dragged) 5

Revisions:

We went through a robust feedback process during IA / UX to ensure that all functionality was accounted for up front. It all turned out great:

 

Feedback  - Marketplace Wireframe (dragged)

 

Feedback  - Marketplace Wireframe (dragged) 2

 

 

Design:

After wireframes were complete, we took to adding a beautiful design to compliment the functionality.

IMG_0325

IMG_0335

16 - Simply-Gifted-Widget-iStrategyLabs-ISL-4 17 - Simply-Gifted-Modal-iStrategyLabs-ISL-4 18 - Simply-Gifted-Modal-iStrategyLabs-ISL-6

 

Development:

After designs were polished, we dove in to code the fully functional Simply Gifted platform. We meticulously tested our code to make it flawless for the Simply Gifted launch.

IMG_0328

What emerged is quite possibly the easiest way for businesses and customers to create and buy gift cards online.

20 - Simply-Gifted-Marketplace-iStrategyLabs-ISL-1-1

For businesses, creating and selling gift cards is painless – and the typical hassles with merchant set-up and payment processing are removed. For customers, it couldn’t be easier to browse and find gift cards for great local businesses and buy gift cards for friends.

It was a pleasure to work with Simply Gifted, and we’re excited to see how the future of online gifting develops as we continue to be a part of its evolution.