Analyzing client & customer needs
A well orchestrated shopping experience starts with understanding what the site’s primary function is and how to take advantage of the online medium. We evaluated the purchasing process through the old site and looked for ways in which it could be enhanced. We pinpointed several weaknesses including order tracking, personalization, inventory control, and shipping optimization. Remedying these pain points became the cornerstone for proceeding with the redesign.
Planning out the design
Being the original designer of the first site, the client immediately understood the vision and helped us stay true to the mood of the work. I knew that it was important for us to establish a hierarchy for the main page based on product popularity. In addition, spotlighting new artwork would allow us to keep the site fresh while giving people a reason to explore other categories. By setting up a structure that showcased the client’s most popular work and allowing some of the newer work to percolate to the top, we were able to capture current interests. Along with that, a listing of upcoming shows was displayed which enabled us to create a dashboard summary of the gallery right on the main page. Navigation was kept simple and straightforward, providing concise options that the audience would easily understand/comprehend.
I created wireframes based on several of the discussions we had on structure. I then moved to mocking up the design, using a rich, black background pattern as a way to make the artwork pop off the screen. Collaborating at this point provided an opportunity for the client to be fully invested in the project while maintaining final veto power should the site deviate from her goals. Once the main page mockup was finalized, we moved to refining the shopping experience based on our subpage wireframes. Because there is such a wide range of products, sizes, and frame options for each piece (well over 200), it was crucial for us to consider the easiest and best way for customers to make selections. Shopping cart abandonment had been something we were looking to prevent this time around. We determined that drop-downs with sizes at the point in which the client was putting the item in their cart made the most sense. Testing revealed this to be true and we finalized how the secondary templates would look before we moved on to production.
Custom backend
Not only did we need a sophisticated product grid to help identify variations in orders, we also wanted to provide a way for customers to save and reclaim orders at a later date using their shopping cart. We created a login mechanism for customers that identified them based on their username. When they arrived to the site, they would be greeted and given the opportunity to review their cart. This allowed us to develop a personal rapport with the customers.
Further extending the experience, we allowed them to sign up for the company newsletter. This provided direct marketing opportunities – something that hadn’t previously existed beyond print postcards and fliers.
Our custom shipping and handling administration tools gave the power of optimizing costs when smaller items were shipped with larger ones. The overall experience with the admin panel provided a level of detail over interactions that empowered the client to truly focus on individual customer’s needs.
Success on both fronts
The admin panel became a central hub for the client’s online product management. They could now provide flexibility in terms of tracking orders and having a live status of what was available. This alone saved several hours of inventorying by hand. Shipping, which had historically been a huge burden, was now streamlined into an online process which automatically calculates weight and runs a formula to generate the best price, enhancing fulfillment and saving money.
The website now accounts for a larger number of ongoing sales and is growing. The success of the site has been followed up with supplemental projects for the client including discount code integration. This allows the gallery to offer seasonal sales to its regular customers and promotions when new stock arrives. While the client has taken over maintenance of the site, the initial work changed the game for the gallery and laid the foundation for years to come.
As a small start-up, WiseHires needed a look for their application that embodied who they were as a company. Additionally, they needed a visual representation of their hiring application that would help persuade investors that their application was credible, reliable, and compelling.
Identity development and process
The project began by coming up with a mark that best represented the company. Working directly with the two founders (often via conference call to California), we fleshed out the details of what would later become their mark. I created 12 logo variations for which we soon narrowed down to the green light bulb with the WiseHires text to the right.
The success of the branding led to the UI design for their online application. Using the style we set forth in the identity, I quickly generated a series of mockups that reflected the new brand’s sensibilities. Working closely with the client, I began to flesh out the HTML and building the structure that would support the pages.
Workflow
The process reflected a traditional Agile or waterfall model, specifically having us work on iteration after iteration until both were happy with the results. The WiseHires founders leveraged their experience in building solid, functional applications while letting me work on the visual aesthetics, usability, and front end development. This freedom provided gave me an opportunity to really do something unique and fun while providing a proven framework to build upon.
Many of our ideas occurred on napkins at local eateries, through conference calls, and online, but for the most part it was a quick, paced, get it done type of thing.
Results
Deadlines we’re critical for these two entrepreneurs, and I was able to provide an efficient and responsive turnaround that met their needs. In fact, the visual look was completed well in advance of the client entering their app into a national competition. After receiving quite a bit of notoriety from peers, each used the project as a springboard to better their careers working for successful web companies.
Humble Beginnings
The Cranium website started as 5 static HTML pages to support the fledgling comic publishing company. It was determined early on that to successfully showcase the content and the recently created identity, it would be necessary to redesign the site.
Laying the Foundation
We identified key features that lead us down the path of choosing a blog platform for the redesign. We decided WordPress would be the best choice since many contributors were already familiar with it and the time/maintenance in getting it up and running would be negligible. The scope of the project included:
• Adding search functionality
• Creating an repository of hand-crafted articles
• Building a basic storefront in which merchandise could be purchased online
• Developing an RSS news feed to help keep people informed with the site
• Creating opportunities for Cross-promotion
Using a blog platform not only made maintenance easier, it provided a built-in search engine optimization options and helped the content be seen by more people.
The Design
Focused around its new identity, we created a site that used the halftone screen pattern that appears in the logo and comics to add texture. Colors were pulled directly from the logo, keeping the saturated red and orange prevalent throughout the site. We started with a basic template and customized it to suit the client’s needs.
Keeping the Ball Rolling
From a maintenance perspective, it was important to create an environment that could be updated from anywhere as the contributors live in different cities across the country. Multimedia was also an important consideration as Cranium wanted to broaden its reach beyond the standard search engines. What better way to do that than to create content for text, video, audio, and still image.
A company newsletter (Grey Matter) was created to reach out the hundred or so people who shared their email address with the company. Vertical Response was chosen for its ease of use, pay-as-you go options, and robust reporting capabilities. Articles are written and distributed via email to subscribers.
Success
Coupled with newsletter announcements, appearances at local conventions, and other marketing efforts, there’s been a steady increase in people visiting the site. While Cranium still boasts a modest subscriber base, the membership has steadily increased since the launch of the site and since then new titles have been appearing. Stats for the month of the launch revealed a 300% increase in traffic. Traffic spikes to over three times that amount upon release of each newsletter. Additional improvements scheduled for later this year include adding a way for visitors to subscribe to the site from the main page, links to social media, and more.
Give your content personality
Many are surprised at just how easy it is to get a custom illustration based on your specific ideas or concept. The beauty is that even if you don’t have a firm grasp of what you want, we can provide creative guidance that often exceeds your expectations. Illustration brings a sense of wonder and, if done well, can enhance a story’s content by creating a memorable style. Just as character design forms the foundation of storytelling, a custom designed illustration for an article or web piece can really enhance your efforts.
It starts with an idea
Our process starts with both client and designer formulating ideas and getting them down on paper. We then quickly brainstorm concepts and sketch possible directions. For example, a project like Launching Vinnie, in which the client gave me complete creative freedom, I created a dozen pencil sketches of possible options.
You, as the client, would be heavily involved in determining what specific aspects of the piece need to be emphasized. By the final phase, you have a clear direction as to how the piece will look.
Layer upon layer of detail
The project can take many forms depending on its style and complexity. For this particular robot piece, I created a quick thumbnail sketch and then scanned it in. Afterwards, I started rendering the various elements, relying heavily on the gradation and burn/dodge tools in Photoshop. All metallic accoutrements, including the lights, gauges, and vents were rendered using a Wacom tablet and various Photoshop brushes. Texture was eventually applied, adding a sense of realism and depth to the final piece. Efficiencies were gained by only rendering half the face, then mirroring it to produce the right side. Special attention was paid to make sure the piece didn’t look completely symmetrical.
Accessible and affordable
Illustration is a valuable, unique, and eye-catching way to get people’s attention. Rezendes Design has a unique process by which we can quantify our illustration. We are committed to make your illustrations a success.
Feel free to take a look at some of our illustration samples, then contact us to see how we can enhance what you are already producing.
What keeps you up at night?
For us, it’s the desire to create something truly unique and memorable. A great mark starts with understanding your company’s guiding principles and finishes with a true visual manifestation of what you stand for. The split second it takes for a customer to form an opinion about your collateral could be the only opportunity you get to impress.
We work side-by-side with you to generate designs that truly match your unique story and how that story relates to your customers. Our process begins with defining who you are, analyzing your competition, and deciphering how you are uniquely positioned in the market place. We help you put your best foot forward.
A unique solution for a unique company
On the design side, it all starts with sketches. Taking the research we’ve gleaned and applying our creative expertise, we build a synergistic embodiment of what makes you “YOU”. We produce anywhere from 20 to 100 sketches of potential designs – enough to convey core ideas. We explore every avenue to make sure we’re hitting the mark using our custom-built Success Criteria Matrix. This process-driven workflow enables you to solidify your company goals to help articulate your vision clearly without wasting time refining something that doesn’t meet your needs. Once a direction is chosen, we quickly move to flesh out the design.
Where we hang our hat
We are passionate about providing logos that not only meet your objectives, but provide a lasting benefit to you and your customers. For us, this combines creative ideas with quality execution. By taking a holistic approach to identity creation, we bolster your brand potential and help build a strong brand that has lasting value.
We’re proud of the identities we’ve created. Come take a look at what our customers are saying or view our logo samples
Our benefits include:
- Enhancing your business by building unique, concept-driven identity systems
- Strengthening your brand by understanding your company through the customers’ eyes
- Leveraging what makes your company attractive to customers and building on its successes
- Meshing our passion for great design with a fully articulated vision for your company
Old vs. New
The previous version of this internal newsletter was nothing more than a static series of HTML pages. For a newsletter serving the needs of the organization, there was no personality or attention to detail given to specific types of content. In essence, it was a long list of stories organized by their perceived importance. One of the first things I did was define areas for specific content through quick succession of wireframes. Since the content varied from week to week, the layout needed to be flexible to accommodate a little content (8 stories) to a lot (17 or more).
Because there was some sensitivity to which department received top billing on the page, careful consideration was given to the hierarchy of information. In addition to creating a more dynamic and engaging experience for our audience, we had customer feedback dating back to the beginning of the original design. Comments were aggregated historically and over a series of months before the redesign then organized into feature improvements, nice to have items, and personal preference. In order to keep the focus on the index page itself, we decided to go with a lightbox presentation for the stories. About half the people requested that a full page version, similar to the old one be maintained as well. Not wanting to disappoint, we created a “Print” version that applied a basic style sheet to display all of the content on one page.
Details + Quality = Credibility
An interesting thing happened when we started implementing the chosen design. People began to have a sense of pride and ownership in the content. We made sure special attention was given to the type of content and how it was displayed . For instance we had areas that highlighted individual accomplishments as well as Association news . This improved content strategy meant removing extraneous local news articles for a more focused piece.
Success
The animated coffee cup gave us a vehicle that would keep people’s interest. I was able to delegate the creation of future animations to our production team and several creative ideas were spawned from this initial concept including a fishing pole for father’s day, 4th of July fireworks, Snowflakes for the winter holidays, etc. Benefits of the new design include:
Flexibility. Gives people the option to view it the old way (one long page) and the new way with lightboxes.
Simplified authoring. Aggregation of multiple assets means that one page is no longer being edited and numerous articles can be fed into the on index page, simplifying the authoring process.
Improved hierarchy & presentation. Making sure the most important information looked like it was prominent gave users a sense of “must read” content. Having regular areas where features appear provided consistency from week to week.
Visual interest. Taking a layered, textural approach with the design elements gave the newsletter a lot of character. Items such as the coffee cup, torn paper edges, post-it style features, and tape elements provided a level of detail that leant to the credibility of the content.
Getting what you want
Whether your pitching your next great idea or need an animated ad produced, we can help you use interactive media to persuade and impress. We’ve worked on large-scale demos that have helped our clients land Fortune 500 accounts, to smaller animated ads produced on a limited budget. We make sure your concept is rock solid by showing a passionate commitment to your vision.
Creating excitement
Generating buzz around your product involves quickly showing its benefits. Our finely tuned process of script, storyboard, and use case development captures your essence while commanding attention. We provide numerous creative options, then give you a choice of how to proceed. As your partner, we provide guidance on the best choice and look strategically at how you can get the most bang for your buck.
Not just for design sake
While important, what we offer isn’t just about the visuals. Making sure your message is conveyed successfully is the driving force behind everything we do. You can rely on us to give honest feedback when we feel a direction isn’t in your best interests. We will never compromise our integrity by taking on projects that aren’t a good fit. We want what is best for you and are willing to recommend a more suitable alternatives should our needs not match.
Our clients have grown to rely on this honesty and appreciate our no-nonsense approach. Come take a look at what our customers are saying or view our Flash samples.
We offer:
- Variety in the form of interactive demos, Flash interfaces, Ads, and custom presentations
- Flexibility in finding the most cost effective solution for any budget
- A results-oriented focus that commands attention and meets the needs of your company
Knowing your users
The challenges faced in creating an interface that is easy to use, flexible, and familiar to existing users can be formidable. The primary concern for the client on this project was addressing work-flow issues that had stymied many users, forcing them to call for help. Our research confirmed that in addition to a non-intuitive interface, customers were having a problem determining what to click on at certain points in the grant application process. A secondary concern for the client was reliance on old technology to submit application forms. The office had previously been inundated with hard-copy fax documents and realized that in order to modernize they needed to guide users into using the online forms. After studying the audience and understanding their needs, we formulated a plan that would combine a 4-step process, visual hierarchy, and consistency on all pages.
Our research didn’t stop there. We also focused on establishing conventions and leveraging best practices to accomplish our goals. We also found models that worked for other industries and brainstormed how we could learn from their successes.
Common Sense design
While it may seem obvious, reducing the PDF form on the main page was where we started with this redesign. Creating a visual hierarchy with the content on the page made it much easier to clearly and effectively navigate the site. Add to that the 4-step process links along the right side combined with consistent treatment of buttons and headings on all pages, and you’ve taken a huge leap in making the application uncomplicated and efficient.
Increasing response rates/decreasing calls
A sampling of calls to our call center from before and after the redesign demonstrated a substantial reduction in volume of calls. Making the online form the most prominent element on the main page decreased the number of faxes received and encouraged the use of the online form. A testament to the success of the project, this was used as a model for other applications around the Association, including Loss Prevention Grant Application and others.
The program
For over 20 years,Texas Center for Educational Research (TCER) has stood for excellence in education research and reporting. Their goal has been, “to design and produce original research and provide high-quality information resources for those who make, influence, and implement education policy in Texas.” With that in mind, I set out to create a site that would showcase the breadth of content they offer.
The redesign started with re-envisioning the look and feel to reflect the forward-thinking, technology-oriented nature of the organization. Upon discussions with the client, we realized that in order to make the project a success, we needed to design the entire site, branding, collateral, and marketing from the ground up. Each needed to reflect the common sensibilities and concepts which our research revealed. In addition, the TCER Board wanted to market the group nationally and felt very strongly that the current Web site did not present them in a good light due to its dated design and static nature.
We evaluated the old site then determined which key research projects and findings should jump out at the visitors in a way that inspires them to seek out additional information. We needed the audience to immediately understand that TCER is unique and on the forefront of educational research. The information on the site is original, field-based research and not the repackaged content found on other sites.
From identity development to research
The look and feel would carry over from the identity design and was heavily influenced by the types of sites the client responded positively to. Aesthetics aside, the focus remained on education and technological sophistication while providing a comfortable environment for reading/understanding the research findings and case studies. The importance of applied research needed to be at the forefront and imbue prospective investors/visitors with confidence in the content. The design chosen would be the platform for future marketing efforts and thus needed to present a cohesive, consistent message with the identity and print collateral. That message of a dynamic, leading edge research firm still remains relevant to current social issues in schools.
Design and Production
Transitioning to a more dynamic site, meant constructing a standards-based site that was platform agnostic. A liquid design interface was employed that would adjust to the viewer’s browser width. Also employed was a mechanism by with main page feature images would resize according to the content width., providing the optimal reading experience for all visitors. A cache of images was provided for general topic stories and more specific images were selected as the need arose. One of the more critical pieces was being able to sort Word docs, PDFs, and other materials by kind. This “sort by” feature would become a major way in which visitors would navigate the site.
Results
Due to the new “Sort by” feature, better information architecture, and organization, members could find information faster. Many commented that it was better organized and met the needs far better than the previous site. Unanimous acceptance of the site helped increase TCER’s positive reputation and helped lead to more funding initiatives.