Lessons in web design and development from The Starter League

The Starter League teaches people from all backgrounds how to code and design web apps, allowing them to do powerful things with their lives via the web. During the 11-week course, students learn to work as a team and begin to embody the company motto of build more, do less.

Formally known as Code Academy, the educational startup went through a rebranding after announcing their partnership with 37signals last week. Founders Mike McGee and Neal Sales-Griffin said they decided to partner with Jason Fried, co-founder of 37Signals, after reading Rework. Sales-Griffin said it was this modern business manual written by Fried that spurred their passion for company culture.

Alongside their name change, The Starter League also announced the offering of two new classes: a Ruby on Rails course for designers who want to understand the back-end of creating web applications and an advanced Ruby course for aspiring software developers.

On Friday night the students took the stage at 1871 to present what they built. Each team explained the real-world problems they were solving by using technology in a five-minute presentation that resembled a pitch. The graduates explained how the school helped them to bring their ideas to life by thinking about their problems from a different approach and confidently facing new technologies while learning them on the fly.

“I build stuff for a living. Coming to the Starter League they gave me different tools but I continued to build stuff using HTML and CSS,” said Greg Maza, a student who refers to himself as a construction worker by trade and an entrepreneur by choice.

“It’s really not the end result we are looking at. What we are trying to put on display is what they learned and what they built,” said Jeff Cohen, a web development instructor at The Starter League.

Here are the tips we gathered about successful web design while listening to their presentations:

Simplify Navigation
For the redesign of the Give Forward blog the team incorporated multiple highly visible call-to-action buttons and the integration of their social media channels. They cut down on the overwhelming list of categories in the sidebar, choosing to focus on three that are directly in line with the blog. Then they added photos and multimedia in a content carousel on the top of the site. By looking at brand stories and user preferences they were able to recognize the benefit of a simple navigation with strong visuals.

Project Hush Hush also had success keeping it simple. They kept the focus on colors, typography and imagery using prominent headings and titles to give the site a layout and feel similar to print magazine.

Focus on Testing
An off-line dating event, Me So Far fosters connections over shared experiences. Lakshmi Rengarajan, the founder of Me So Far, experienced success offline following a simple philosophy: the experience should be as enjoyable as the outcome. To build their site the Me So Far team expanded this philosophy to focus on user experience. This meant crafting their ideal site through trial and error and constantly testing to fix holes and solve problems.

“You can do all the research and be the best designer in the world but until you really get out there and test it on users you are only operating on assumptions,” said Kaite Lauffenburger, a member of the Give Forward team who also advocated a focus on testing.

Integrate seamlessly with users everyday life
Because all of the teams were focused on solving pain points, making life easier was a major goal of the graduate’s websites. Propdi is a simple, one-step tool that allows users to automatically add events to their Google calendar. Keeping everything in one place, Propdi then alerts them so they do not miss any important milestones.

Improve user experience and create a community feel
Slushfund is an easy way to invite friends, collect money and shop for a party on-the-go. Focusing on user experience, Slushfund said they avoided using PayPal because it provided a negative user experience. Instead, they used a provider called Balance that was simple, secure and inline with PCI compliance. In addition to integrating with mobile and email, Slushfund created a status page to help foster community.

The founders of Dragginup also strived to create a community within their project. They found a successful online community is built by keeping it simple, focusing on users and creating a unique culture.

Go paperless
Fast, simple and secure, Happy Health provides users with a paperless experience allowing them to save all their medical-related personal information in one location, electronically syncing it with their doctor all from the comfort of their home.

Using a map-based format and eliminating paperwork, the From My Farmer team is disrupting the traditional sales channels that exist between a farmer and a chef. This innovation leads to a higher profit relationship.

YourDoor, another paperless platform, was built to improve the painful process of rental applications and credit checks by eliminating fax machines. Allowing users to fill out applications online and handling all fees, YourDoor is making this outdated process happen instantaneously.

Create high engagement with social media
In addition to aggregating, indexing and categorizing top crowdfunding sites, Seedvisor allows users to find, follow, fund, track and share their favorite crowdfunding sites on their social networks.

JTO.io, also known as Just In Time, provides a positive user experience by replacing comments with questions. The simple site is built around two buttons: an “a-ha” button and a “huh” button. This format encourages real-time, social, interactive engagement.

Clarity is important
Emphasizing their focus as safety and enjoying experiences, Simplefieds also streamlines the process of searching for classifieds. They have personalized the online shopping format by fixing the lack of clarity and communication and introducing member accounts (a feature Craigslist lacks) to boost credibility and accountability. The team at Simplefieds explained that even though their page looks very simple it has a complicated backend, a true testament to their focus on clarity.

Learning Signal, an aggregator for instructor feedback, used clarity to help them customize the pace of learning. By using a traffic light as a simple, easily recognizable scale (red signals slow down, yellow is perfect and green means the students are bored and the teacher is moving too slow), Learning Signal was able to optimize its format on a mobile platform and provide immediate feedback to teachers.