Soaring high: Go Eastern Eagles’ new look

Posted by Zana Fauzi on October 12, 2011

“God is in the details.”

Zana had the chance to sit with her awesome team throughout the 30-hour deployment for the new look of Go Eastern Eagles & is now stoked to share the nitty-gritty details of what makes the site so special. Zana is the Project Manager at Stampede.

I probably quote people way too much in each of the blog posts I have written, but you could not deny the truth behind the German born American architect, Ludwig Mies van der Rohe’s quote. Let me elaborate it further in the post.

A little bit of background for Go Eastern Eagles and the project itself: Go Eastern Eagles is a an athletic division for Eastern University in Pennsylvania. The website facelift  is part of a rebranding effort for the university, done in collaboration between Stampede Design and our partner, Farotech. The deliverables for this second phase include web design, Joomla restructuring and XHTML/CSS styling.

Then:

… and NOW!

Having had the chance to sit throughout 30 hours with the team to deploy the new look, I decided to interview them to find out of the new features as well as challenges and the new things they learned and implemented along the way. I was even more delighted (the client loves it too!) to discover that the website is packed with minute details of UI and features – the little touches that made all the difference. Here I list them all according to the scope of work.

“Rebrand and realign.”- Shaza Hakim, lead designer.

I sat down with Shaza to chat on the new design features for the website. “The primary purpose of the redesign is to employ Eastern’s new branding while introducing improvements to the 4-year old UI.” she chirped as I was typing away her comments. “The new design amplifies the website’s core purpose, which is to deliver sport updates to Eastern fans, real time. We make better use of space above the fold, so when people first lands on the homepage, they are able to navigate quickly to a particular sport, pull latest game results, plan for the next game, and read most recent article and media highlights.”

“The bigass menu – as christened by the programmers – is actually something pretty challenging to design from a UI perspective. How do you maintain a information-laden panel accross 11 different sports, some further divisible into men/women categories? We went through quite a number of iteration with the client before finally decided on the tab-within-a-tab interface. It works because it follows a natural order of sports categorization – something fans are already familiar with.”

“My favourite part of the bigass menu is how it quickly defines a sport. As you move from one sport menu to the other, you’ll see that your eyes become trained at the near-center piece – article image unique to each sport. This is the identifier user subconsciously seek for when rapidly switching between the tabs. And because all Eastern news come with at least one image, empty thumbnail will not be an issue that breaks the rhythm.”

“Weight distribution is also important here, cause you don’t want everything to end up feeling awfully heavy on the left, especially when schedules are not posted for seasonal sports. Having schedule framed in an Eastern maroon tint gives a the entire menu an ideal visual balance.”

I had to tell her to slow down as she pointed me out to this – a much better UI for switching between sports. “All it takes is a glide of your finger on your trackpad or just to move your mouse around.”

Shaza added, “A new section called news and highlights is introduced for each sport – as you can see here.”

“.. also the media section – video and latest photo gallery for each sport – is now more accessible.”

“Another exciting part of my job is to extend Eastern’s branding as identifiers to both women and men’s sports.” Shaza said. “There are now a number of visual distinctions between the two. We maintain the same layout for each sport’s homepage with two visible difference – the logo now reflects the sports you’re viewing – so you’ll always retain a sense of structure throughout your entire visit (and Eastern has thousands of pages worth of game details)…”

“…and the second is we also introduced two color scheme by sampling the two extremes of Eastern’s original maroon. Men’s sports now dons a muted, almost grey maroon and Women’s sports a flash of hot pink. Just so befitting to each gender’s personality, don’t you think?”

E.g. Men’s soccer:

Women’s soccer:

“As a designer, I know I can count on Shaiful and Syazwan to carry through the smallest design details and decisions. It’s a tall order but they did a really excellent job with the build.”

“Ain’t no magic trick.”- Shaiful Borhan, lead programmer.

“No biggie,” Shaiful said when I asked him to elaborate on his deets in the development of Go Eastern Eagles website.

“The new section – as mentioned by Shaza – will also mention articles which are non sports-related. Things like new coach for a team as well as alumni updates.”

“Since we have made media section more widely accessible, I have set up a system on how the photos in the photo gallery are pulled. It will scan the latest articles in each sports for 8 images, which will then check for duplicate images so they will not appear twice in the series and render the thumbnails from there. These photos will be cached so in the future if they are to be read again, it will compare with this cache and will load a lot faster.”

“The scroller on top of the site itself is packed with delicious little big details,” Shaiful added in his usual casual manner.

1. The team logos in the scroller are linked to the relevant teams – hence while cooking up my programming brew, I must make sure that the spelling of the teams’ names must be accurate.

2. The scoreboard not only lists the results, but also the dates of the future games in home and away format. The team who is on top of the list or whose logo appeared first represents the home team.

3. If you could see from the scoreboard, for the results for the past games – the team who won has an arrow to the left of team name.

4. Another thing to highlight is that certain sports like Golf and Cross Country use a different score and schedule format. Basically there is no opponent involved so the scores that appear is only for the Eastern team for that particular tournament. Case in point is for Golf over here.

Shaiful made programming sounds cool all over again when he said, “You see the top headlines here? They are all searchable by sports – brought to you by the power of Ajax pull, homie.”

“And you don’t want to live without social media nowadays, so we pull Twitter feed very nicely on top, as well as some social bookmark buttons from AddThis.com in every sports page.”

“Let me show you a little magic trick, Zana,” Shaiful said, snatching my laptop away from me. He opened the baseball roster page and placed the laptop in front of me. “As you hover over a player’s name, his photo will appear on the right.”

“As you scroll down to the bottom the list (and the site) and hover on their names, you will see that the picture follows you too.”

Shaiful added, “Actually this is not that hard to do, but it improves user experience a lot. Imagine having sports like baseball that keeps a big roster. There’s no practical way to view a player’s image as you move down the list. Having the pictures displayed at the same level where user’s attention is currently focused IS the way to go. This particular quirk was not apparent during build phase, but we keep open channels with our end user after deployment, both on the website and Facebook, to solicit feedback and one user pointed this to us. We rolled out the updated code quickly and was surprised that people notice the improved interaction.” Shaza finally butted in, “And as a designer, it makes me happy to hear back from user who pays just as much attention to details.”

“Another gem,” Shaiful says, grinning, “is the editor now have the option to link a highlighted article to player’s profile or any other information relevant to the article like sport stats or player’s past game. This makes a far richer audience engagement to the website. Like this case of lovely Kelby Bolton here.”

Shaiful put on his serious face back again. “In RSS Newsfeed section, you can get the links to add to your RSS reader so you will be updated without having to visit the website.”

“But anyway, these are no magic tricks. It takes a whole loads of focus, hard work, attention to details and of course team camaraderie to make all this happen.” Shaiful concluded.

“Pixel perfect.”- Syazwan Hakim, front end developer.

Syazwan took a long time to figure out his most significant tasks for Go Eastern Eagles project, although he spent many hours hunching over his desk coding it. It is a common practice to glorify designers and programmers in a project, but truthfully, the front end guy should be given credits as well for being able to bring web design to life in sync with the programming codes. That isn’t any easy task.

“If you may know,” Syazwan began, “the entire page is run on Google Web Fonts. Arial for body tag (which means the default text for the entire site is in Arial), Play for main navigation and headings and Droid for sports navigation.”

“The entire site needs to be able to run on every browser there is out there except Internet Explorer 6 and below. This is where I need to pull out everything I have learned out of my pocket over all these years to make it cross-browsing without having to modify some HTML structures. These includes the sliders, the bigass menu, tabbing hover effect according to shapes and stuffs like that.”

“Because the HTML element is not consistent, the hardest part in my task would be to apply styling as per PSD to article page. What I did was to find the most reliable CSS selector across the article pages for styling and I found this to work quite well.”

“Needless to say teamwork plays a huge role in this project. Shaiful and I spent countless hours discussing the classes declaration over Skype to get this done. There is a hefty amount of back and forth work just to make sure the cross-browsing is executed very well. It was not easy to archive for the updated HTML version, but we have worked on this with the previous project before and we were determined to get this done.”

Syazwan tapped the end of his pencil against his laptop screen and continued, “As far as details go, I must make sure this site is as pixel perfect as possible to the PSD designed by Shaza, down to the tiniest details. I have to thank her for designing something so packed, so detailed yet very nicely organized – this makes the styling task a whole lot easier.”

Any other challenges? “On top of it all, the most important thing is the race against time as well as making sure my tasks are done within the estimation time. I don’t know if I have ever poured it all into a single project like this.”

“On a lighter note, my favorite detail implemented would be the transition of hover effect on thumbnail on homepage slider. I enjoy the little arrows in the thumbnails indicating that this is the picture on display. Aren’t they cute?”

“Other than that, everything else is pretty much a breeze.” Syazwan said, fixing his shirt collar.

What do you think?

We would always love to hear your feedback of the brand spanking new Go Eastern Eagles, as well as things you would like us to feature on Stampede blog. Do drop your suggestions in the comments section or send them over to zana@stampede-design.com.

Posted in Made Us Excited!, Work 3 Comments »

On-Campus Interview

Posted by Shaza Hakim on April 20, 2010

“Suddenly you feel like an underdog. Ain’t life grand.”

Shaza Hakim fulfills her duty (so requested by Shaiful Borhan) as the chronicler of Stampede Design’s annual on-campus interview at Universiti Teknologi Petronas. Shaza is the Creative Lead at Stampede.

Consider An On-Campus Interview

You are an IT student, black circles under your eyes from that last attempt at submitting your Final Year Project in one coherent piece. You have an interview with a web company and you’ve heard all sort of cautionary tales and advise about your future career.

The university indulges you but being in IT, you can’t help but feeling marginalized over your fellow soon-to-be engineer friends. This is after all, an engineering university, where engineering future is made.

You are under-motivated, overworked and just barely made it to your 8.30 am interview. You heard you are one of six students selected from a pool of forty. You’re confident that your well-ironed shirt will leave a good impression, until you see another student arrived in a black suit with a sleek briefcase in tow, looking all polished and caffeinated. Suddenly you feel like an underdog. Ain’t life grand.

You walked into the interview room and exchanged greetings with the interviewers. They looked young and somewhat casual, probably mid-20s. They screened your resume and you started to sweat. You began to wonder if you spelled “proficient” correctly. Acting nonchalant, you flashed your biggest smile. Then one of them shot the first question,

“How good are you with PHP?”

I dare say the students we interviewed that Friday morning were in for a surprise.

Why We Interview?

To most companies, this is a blasphemy. “Of course you interview to hire more people in order to grow your business and generate more income.” I disagree.

Stampede’s hiring rate is one person a year, but we work hard and interview far and wide to get that one person. I believe that you do not have to hire many to achieve whatever goals you choose for your company. In most cases, you’re only adding unnecessary overhead to your otherwise agile and flexible team.

The number of employees you have is not a prerequisite to a successful business. You can be successful by staying small if staying small means keeping your people happy and giving your client work quality no bigger company can. By hiring at the rate of one person a year, Stampede is able to focus on training and introduction to our work culture, not by how quickly the person can start hacking codes. Most importantly, we are able to grow sustainably, without compromising our values.

Why Fresh Graduates?

Amazingly, this is the least-tapped pool of young talents in Malaysia. Most companies either look for candidates with significant industry experience or fresh grads with outstanding academic qualifications. Passion is often not in the equation.

Here’s what I think. People with experience tend to have one very big disadvantage: they bring with them culture from their previous work place. When they join Stampede, they tend to be highly individualized, not ready to share knowledge or responsibility. They sometimes conflict sense of teamwork with personal gain. Stampede is an office-politic-free environment. We keep communication flat so we can avoid elaborate hierarchical structure. This is not the case with other working environment where hierarchy is a way to manage and control.

In my years of interviewing and hiring, I personally find that fresh graduates should truly be the darlings of the industry. They are young and idealistic, eager to be an active part of the team. They are not (yet) affected by bad life choices. Most importantly, they bring a different level of energy to a company.

Some managers balk at the training cost. It does take more effort and patience to guide these high-octane powerhouses towards the right direction, but at the end of the day, we are in the business of nurturing talent and giving them work they are passionate about.

When you have a team of people truly invested in their work, you are doing it right.

“How Good Are You With PHP?”

Because we have a web developer vacancy, Dov did the preliminary filtering this time around. He easily trimmed a stack of resumes into six short-listed faces – a feat I never quite managed to do. A resume can be very misleading, with happy internship pictures and big company name-dropping. The most essential element we looked for was promising web programming skill. You may have interned at Intel but if you’re not good in PHP, then we’d rather not be wasting your time.

Dov as usual, was very direct about his requirements. He’s very involved with the hiring process of any new programmer and can be brutal with questions. There were times when I wished I weren’t in the student’s shoe. I am sure Shaiful and Guo Lin know this well. When he’s interested with a student’s PHP work, Dov would reach across the table, grabbed the laptop and dissected the code himself. It wasn’t a pretty sight when he ever-so-gloriously did an SQL injection vulnerability test via the login prompt. The student went pale. He only got his colors back when Dov said “That’s okay, you’re new.”

My questions, on the other hand, were centered more on the soft skills – what aspect of web development that really interests the student, what he aspires to, what an ideal workplace is like to him. These are important because we are, at the most basic, a team. We spend a great deal of time working together so the next person to join the team should be just as fun. Besides, I was due for a Stampede dinner that weekend to relay the summary of our interview to the rest of the team.

Some of the students however, were interested in other fields. One was into computer networking and the other quite a decent ASP programmer. They were honest enough to let us know the type of work they’re interested in. You could easily see that these are good students, though perhaps misguided by their seniors to simply settle for any job opportunities.

My advise in return, don’t compromise your interest. There’s only so much opportunity in life to do what you love, so start steering your way towards that now.

Was It Worth It?

For sure. The students left the interview room happier than when they came in. That alone makes it a good interview day for me.

(wonderful photography by Antontang)

Posted in Team, Work 7 Comments »

The Arizona Trip: Part II

Posted by Shaiful Borhan on February 15, 2010

“The bird’s eye view overlooking the vast canyon was an incredible sight to behold.”

Shaiful Borhan continues with the second part of his recent trip to Phoenix, Arizona. The lucky guy went to Grand Canyon too. Shaiful is the Web Analyst and Developer at Stampede.

A.J. and Laura arrived the next day around afternoon. While I was relaxing in my room, the phone rang and the instant I heard the voice at the end of the line, I knew it was A.J. Awesome! We have been working together for over a year remotely, with each one of us in different part of the world. Getting the opportunity to finally meet in person is really refreshing, and not to mention, feels real too.

A.J. is the founder of the Trading Trainer company, which essentially provides training and advice to members in the field of stock options trading. He flew in from Fort Collins, CO. Laura is from Atlanta about 4 hours away, she’s the bubbly main admin person of Trading Trainer that really kept the group lively. We were also expecting Kevin, project manager and programmer of Trading Trainer – he would only arrive Wednesday.

The collaboration between Trading Trainer and Stampede started sometime in 2008 when Trading Trainer needed to revamp their existing member portal. It was a huge endeavor in design, usability and functionality. The project involved integrating a handful of tools into one another with Joomla handling content management and acting as the main access point for members. It was one of my first Joomla 1.5 projects and it is the biggest project for me to date. Since then, the site has undergone multiple phases of enhancements and it was the reason that brought me to the Grand Canyon state.

We were here to attend the on-site training session at Infusionsoft. As mentioned in my first post, Infusionsoft is a hosted web-based solution that specializes in email marketing, CRM as well as having support for e-Commerce and affiliate program. A.J. has been planning to incorporate this tool into the Trading Trainer workflow, making it the central member and order manager, automate follow-up email marketing and to take advantage of the affiliate module. By doing this, we will be phasing out other third-party tools to only handle product permissions.

On-Site, Web 2.0 Style

At Infusion, we were introduced to Marty Woodward, the guy in charge of our on-site session. The Infusion office has the vibe of a cool web 2.0 start-up, with mini basketball court in the main hall, casual-looking folks and a fully stocked-up snack room. Fridge-load of cereals and milk, energy bars on the counter, sodas and coffee with French vanilla and hazelnut creamer, not being a coffee person I still could drink two cups a day. And to top all of that, employee of the month gets to drive the company’s smoking hot 370Z.

All levity aside, the first two and a half days were pure training and configuration, with the first day being the most challenging in terms of staying awake in the afternoon for all of us. The Infusionsoft application is a very powerful beast but it requires guidance to master. Good thing Marty provided us with some preparation guidelines on what to expect a few weeks before our trip.

It started to get interesting for me towards the second half of Wednesday when I finally started work on the API and codes. My first task was to activate the Infusionsoft affiliate module. Every once in a while, I had to go back and forth to assist Laura and the team perform data migration, churning out CSVs and rapid database queries. The rest of my tasks were to upgrade the Trading Trainer Blackbox order form to support shipping, creating an order summary page, adding a profile page in Joomla where members can edit their credit card details and migrating the Trading Trainer Blackbox tool into Joomla.

We were totally on full steam from Thursday to Friday as Marty kindly gave us the privilege to use his office while he was away on vacation. Thanks to Marty’s whiteboard and multi-colored markers we were able to keep our to-do list central and organized, and not to forget the 42” LCD allowing us to conveniently share screen with everyone. On our final day at Infusion, we took photos of the place and with some of the folks that helped us while we were there. Laura was also leaving today.

Back at the hotel, A.J. and I were very excited talking about our Grand Canyon helicopter ride happening the next day. We decided to get some decent winter clothing for the trip as the canyon was covered with three feet of snow at this time of the year. A quick shopping at Goodwill did the job. We have our coats and called it a day.

The Part When I Hovered Over Grand Canyon

Saturday was a really long day. The tour van picked us up at 6am in the very cold morning. We reached the helipad at around 11am and went airborne a few minutes later. Being a first timer, the wobbly take-off was a little discomforting to say the least. I tried not to let emotion took over and told myself that everything should be just fine. The bird’s eye view overlooking the vast canyon was an incredible sight to behold. Hovering over a gigantic hole with unique rock formations and snow-covered summits really makes you feel tiny.

According to the pilot, the rocky point in front of us although it seemed close was actually 15 miles away. And it still looked huge! The ride ended 25 minutes later. The rest of the day we spent visiting numerous Grand Canyon vantage points as our tour guide, Todd entertained us with his fascinating stories unique to each vantage point. We headed home around 4pm as the fog started to come down and made our final stop at a native Indian gift shop in Cameron. We reached the hotel at 9pm, exhausted as hell. Even so, I must pack for tomorrow flight home.

Heading Home

The flight home was not nearly as legendary as the flight coming here. It was smooth sailing. The layovers were just nice for me to window-shop in the airport terminals. Instead of Tokyo, I stopped at Shanghai this time. Finally, touched down in KLIA at odd hours on Feb 2nd, losing a day. No bros could pick me up this late. Thankfully, I have my parents to the rescue.

Altogether, the whole week was a great learning experience. I gained valuable exposure working on-site at Infusion alongside our client. As a team, we were very pleased with what we achieved during the five days. Like all great software, we will keep on discovering new ways to make full use of it and I am sure A.J. is coming up with more cool ideas as we speak. TTP4, wait for it.

Posted in Travel, Work Add Comment »