The Barbarian Group’s user experience team is going behind-the-scenes to show and discuss some of our kickass work. We’ll chat about our latest projects, and explain how we tackled them. Recently, we chatted about Tweet Wrap for Samsung. Now, we’re looking at the work that went in to designing the homepage for Kashi.com.

San Francisco-based interaction designer Sandhya Narayan chatted with us over the phone to discuss her mission for the new homepage.

Read on!

Basically, their main goal here was to increase engagement and purchase power directly from the home page because the old home page did not have that. It had a lot of content but it lacked messaging and action that emphasized the bigger brand value of Kashi.

Really, the overarching goal was to come up with a vision for what the homepage should be and make sure it embodies the Kashi brand. Kashi wanted to establish itself as an authority on natural lifestyle and really inspire the user to learn and engage with that type of content. Once we came up with a vision, we needed to map out what that would look like.

Right after we got briefed, my goal was pretty much to come up with a UX strategy. I worked with Frank Marquardt, who helped come up with the content strategy for the page and James DiStefano for the UX side of things.

The first step was to identify the weaknesses of the current home page – what was not working, what was working – and also to figure out how we can incentivize the user to create and engage with the current content. Kashi has a lot of content, so we also had to figure out how to reflect that on the page but also make it clear on the home page without overwhelming users.

We figured out ways to have specific calls to action and to take specific directions. We also wanted to try to integrate social media.

We didn’t really have a whole lot of time, so the creative and UX team got together, and we looked at a ton of sites for inspiration. Checking out other sites that do it really well helped inspire us. We worked in a parallel process. While I was working on my UX strategy, the design team and I also looked at a bunch of sites for inspiration, and we started drawing out what we thought looked good and could work well. It gave us a strong foundation.

The team was collaborating on an inspiration deck. Once we laid out a strategy, it was easy for us to pick and choose from the inspiration deck and match it to our objectives.

The UX strategy is sort of a nice breakdown used mostly for internal purposes and not presented. It really takes the project brief that they provide us and breaks it down into pieces – what is our vision, what is our theme, what are our opportunities, how can we strengthen those opportunities, and how we are going to execute. It’s pretty much writing those points down on paper and for an interaction designer, it provides a lot of strength for going into wireframing because you have all of that information with you in hand before you start designing. A project brief can be weak or pretty intense, but either way, it needs to be broken down into digestible pieces that show what’s meaningful to us so we can design that stuff out.

After I came up with the UX strategy and we all compiled an inspirational deck, we combined those two elements together. After that, we jumped into wireframing. Wireframing was focused on the three objectives we were working off of – further user engagement, increase direct path to purchase, and highlighting content. Every design decision came off of those objectives. It all had to be aligned to what we had in our strategy deck and whether it met the clients’ needs. It was pretty straightforward once we laid the groundwork on that.
It was also the first time we had annotated the wires based on objectives, and it worked really well, and the client really got what we were trying to sell them on.

Kashi is very interested in learning how we do things, and they are very focused on best and common practices. They want us to provide that information. Going into that meeting where every decision was defined by objectives worked really well.

The biggest challenge from a UX perspective was determining the types and kinds of information to prioritize on the home page. They just have a ton of content, so how do you prioritize that with everything else? How do we make sure what’s important is out there and being seen? That’s where content strategy helps. That’s the magic Frank helped with. He helped prioritize content based on business objectives, client metrics, and so on. This put our focus on where we had to get an editorial calendar going for the home page and figure out which of the modules would be seasonal, etc., so stuff like that was a challenge. Once we figured that out, it was pretty smooth, though.

The other issue we had was within Kashi. There are different teams within the brand, and everybody wanted to be on the home page. We had to balance out everybody’s needs that way. We put a person in charge of all the articles, and we tried to balance content so that it was not all articles, or not all product pages.

We fixed the old homepage Flash module, too.

To be honest, I think we did great. If you see the old site and you see the new Kashi.com, I think it’s much more inspiring in wanting to find out what Kashi has to offer. It took a lot of time to get things done, which can be a real challenge for updating content and keeping up with homepage maintenance. But Kashi has a lot of good content. Overall, I’m pretty happy.

They’re super happy. They were happy about the redesign and everything else.

I really like the Kashi Whole Wheat Biscuits Cinnamon Harvest cereal flavored with nuts and raisins. That’s pretty good.

[Laughs] We used to in the beginning of our work with Kashi and after awhile, we stopped getting as many. People would go to meetings and bring back stuff, and we would ask the client services person to bring us back more Kashi!