My Web Design Experience
|
I've created websites in:
|
My first experience in web design was in 2009.
|
I was working for The Green Well. They were a new company and so, were trying to get their website built.
They hired a freelancer to code everything and the owners of The Green Well had decided on how they wanted the website to look and its structure. They still wanted me to meet with their web designer to be sure he had all the assets he needed for the build. When I did, I learned he only needed a png of the logo from me. But, he was worried. He said he didn't think he could place a round logo on the website. This really confused me. I had seen countless websites with round logos. Pngs themselves are always square or rectangle no matter what shape the logo is. When I tried to ask more details about that, he wasn't forthcoming and ended the meeting soon after to get to his next engagement. The whole experience was extremely strange to me. I knew if I were to work on web design projects going forward in my career, I needed to know how to code, even if it's just a little bit. That way I could hopefully sus out any BS. I looked into HTML and CSS a bit and learned what I could. But online learning was not what it is today. Two years later, Code Academy launched and two years after that I discovered it and signed up. I took their HTML and CSS courses as well as a bit of Java Script and Ruby. Later when Harvard and MIT launched EdX, I learned a bit of Python through one of their courses hosted by MIT. See my Code Academy profile here. |
Original Maps.com on the left and the Magento Template on the right.
|
Where web design was a non-start at The Green Well, at Maps.com, it was in full demand.
We began with a shift from the old website that had been in place since the company's inception in the mid 90s to a template site for Magento Enterprise. We spent months crating graphics for the new site as well as months of QA work using JIRA to document incidents for our dev team in Indonesia. The Magento template facelift did bring Maps into the 21st century. But, as the months ticked by it was obvious it was not meeting customer needs. I found navigating the Magento backend to be challenging and not remotely intuitive. And, the rigid structure of the template to be limiting. Less than a year after its launch, a contractor was hired to rework the site structure and other functionality issues. During that time was when it hit me. I was at work one morning and saw the entire site laid out before me in my mind's eye. I wired framed it out roughly with a sharpie on some printer paper and took it to the contractor. Thankfully, he loved it. And, pushed for its creation. I also created our tagline that morning. If we want to be THE place where people go to get maps, then we need to be the place Where the Maps Are. |
The original Maps.com on the left, The Magento template in the middle, and my design on the right.
|
Something I learned from Lynne, our Customer Service Rep, was that the majority of people wanted to buy COUNTY maps.And, with the previous two designs, it was still hard to find them. And, she was still receiving a lot of calls from frustrated customers for help locating them.
I wanted to solve that problem. I knew we had a variety of types of maps. And, I knew they needed to be displayed in a way that would help people find them. So why not a grid? |
The grid just below the fold allowing customers to quickly get to their map category of choice.
Lower section of the website featuring our custom maps
service,customer service info, and freebie. |
People tend to land on a website and start to scroll. So, I knew I didn't want the grid at the very top. I placed the grid just under the fold. The perfect spot for a customer to land on the website, scroll down, and see their county maps option with ease.
I left Maps.com before they launched my design. But, I would swing by every now and then to say hi and see how everyone was doing. On one of my visits, Lynne told me she was now receiving calls about how much people loved the website. And, how easy it was now to find the county maps.Project was organized using JIRA.
|
Left is the original Classified Concepts. Right is my redesign.
|
Classified Concepts was a line of business under the Maps.com parent company. It was a strong line of revenue for the company but the website functioned more as a time capsule than anything else. It was busy, distracting, confusing, and most importantly, not mobile friendly.
Before redesigning the site, I rebranded Classified Concepts. I wanted to take Classified Concepts fully into the present with a cleaner logo and consistent color palette. After the rebrand, I sketched, mocked, and eventually built the new website. Not only was it easier to read and understand, but now mobile users could access the site with ease. Built in Wordpress. Project was organized using JIRA. |
Classified Concepts "Features" section.
|
Classified Concepts "Services" section.
|
|
Awhile after the Classified Concepts redesign, the executive team decided they wanted to step away from the Classified Concepts name and create a completely new platform for the product including new branding and website.
So, I developed Acqir for them. Acqir was bright, trustworthy, and the way you could acquire all the things you needed to move your business forward. The website was designed to be compatible for mobile use and designed to build trust through use of clear communication and thorough case studies. Built in Wordpress. Project was organized using JIRA. |
|
Acqir branding sheet.
Acqir homepage top section.
|
Acqir about page top section.
|
Maps.com Solutions homepage top section.
|
The backbone of Maps.com was not our ecommerce site but the business solutions side where our talented cartographers painstakingly created custom maps for a variety of industries. It absolutely deserved its own landing page.
Stakeholders pushed for a side menu above the fold geared toward the various industries we served. Below the fold we used strategic language to develop trust, including photographs of some key players on the Solutions team like Brandi who is a top-notch cartographer (and spectacular human) and Fred who handled all the custom orders management (He's also one of the nicest people alive and he wrote a wonderful Christmas song). Built in Wordpress. Project was organized using JIRA. 
Maps.com Solutions homepage Cartographers content block.
Maps.com Solutions homepage Fred content block.
|
Left: Original Maps101 landing page
Right: Cleaned up landing page.. 
Maps101 Frankenstein homepage.
Maps101 rebrand sheet.
|
Oh-me, oh-my, where do I even start with Maps101?
It was one of those great learning lessons from early on in my career. I would approach it much more differently now. But, that's only because I learned so much from working on it. The original website was so, well, hard to look at. I found my eye going EVERYWHERE. And, ultimately landing on the big ugly call-out to "Learn More". Learn more of what exactly?!? When, I'd go to read the header that had the details, my eye would get pulled away into the background of faded icons and then all off the edge into the green gradient surrounding it. It became very apparent that dev time for Maps101 was almost non-existent. That's something I've experienced at every company I've worked for/with. But, changes needed to be made. One day while tinkering with a new look for Maps101, I created a little header that I thought might work. I was even able to convince project management to fit it into the dev schedule. Dev would do it, they'd upload the header, they'd even kill the green gradient background. Was I ever excited to hear that. After seeing the update, I felt so proud to have pushed the landing page a bit more toward the 21st century. But, that feeling quickly faded as I stared at the Frankesteined landing page before me. Was this really progress? After that, I was allowed to do more of the same to the product itself. A lot of lipstick on a pig work that, although better looking, never felt right. I had a lot of questions running through my mind about everything. Mostly, how do the kids interact with the site? Do they rely on icons if they struggle to read? Do the colors feel fun or too childish? Eventually, I created an entire rebrand and style guide. I made the color palette more vivid so it could be playful without feeling childish. I also started to rethink the layout of the site and if there was a better way to display everything. After sketching out ideas, I made wireframes to work through the ideas. I planed on getting them approved for testing but moved on from the company before that could happen. Wireframes created in Axure. Project was organized using JIRA. |
Maps101 homepage wireframe.
|
Maps101 Spanish Lesson wireframe.
|
TrackR "How it Works" section of the homepage redesign.
|
At TrackR I tackled a home page redesign and check out process redesign.
I wanted to create a story with the homepage. After clearly saying what the product was above the fold, I wanted to build trust with customers by showing them how everything worked below the fold. To do this, I created an experience of a static iPhone, where each scroll a new screen and/or text would appear, one at a time, to walk customers through the TrackR experience. Each screen had subtle animations to help paint the picture better. Unfortunately, dev was not given enough time to fully execute the design. Instead, they put the 3 animated screens side by side in a single content block. It made for a busy and unhelpful design. Nothing at all like I had envisioned or designed. I unfortunately only have one content block from the homepage saved and that is the "How it Works" section. As for the checkout experience, I designed a cleaner version allowing customers to toggle between selecting a single Bravo in their preferred color, or shopping for bundles. Projects were organized using Asana and Trello. |
TrackR checkout redesign.
Procore's Innovation Lab landing page above the fold.
|
Procore's Innovation Lab is an annual event. So the landing page changes each year. Due to the temporary nature of the landing page and keeping with the theme of innovation, I decided to design a landing page that was more unexpected and trendy for the time which is this bento style of layout.
Instead of having one solid section, then scrolling to the next, this landing page was more chopped up, with different sections next to each other hopefully giving the feeling of thinking outside of the usual box. Project was organized using Workday. |
Procore's Innovation Lab landing page below the fold.
|
Procore's Innovation Lab landing page above the footer.
|
Listening to Smile branding sheet.
|
For Listening to Smile, their brand and website were in need of a serious overhaul. I completely rebranded them first before tackling anything with the website. Then, after the rebrand, my business partner Shannon wrote strategic copy for the entire website, I built the website and created all graphics needed to complete the job. Where the old website was not mobile compatible, this one is. On top of that, the founder of Listening to Smile is colorblind and could not fully see all the colors of his original brand. In my redesign I made sure to use a color palette fully visible to him.
This wasn't just a website build, Shannon and I design with users in mind to strategically drive sales. Built in Squarespace.
|
Left: Original homepage above the fold. Right: My redesign of the homepage above the fold.
Listening to Smile homepage top section.
|
Listening to Smile homepage mid section.
|
Alignful branding sheet.
|
Dana (Dan-ah), the founder of Alignful needed a colorful message driven website to attract future clients and steer them towards her many offerings.
Dana's is a bright and colorful being who needed her brand to adjust to the mood of the seasons and/or current messaging. She needed a versatile color palette to work with any emotion that came up. After redesigning her brand to allow her to shift her brand to brighter tones for summer and happier messaging, to warm tones for fall and serious posts, to cool tones for winter and peaceful messages, and everywhere in between, I then applied it to her logo and website. Dana is the safe buoy that her clients can symbolically attach to while they sink deeper into their emotional waters. Because of this, she loved the idea of water. So, I made water a part of her header. It isn't just any water though, you're just below the surface. From there, you can scroll deeper down the homepage to learn more. A reflection of Dana's practice. I went with the wave shaped divider to represent that to keep the website from being too distracting. Built it Squarespace.
|
Alignful homepage top section.
Alignful homepage mid section.
|
Alignful homepage bottom section.
|
Original nav, not compliant.
New nav, compliant!
|
The Burroughs Family Farm already had their branding dialed in and a good start to their home page but there were a few issues that needed to be addressed.
Although their brand colors are black, cream, and green, they had this bright yellow nav with barely readable white text on it. While I cleaned up the nav to be more on brand and legible my business partner Shannon wrote strategic sales copy for the entire homepage. After she finished with the copy, I got to work building out the sales story for the farm. I created icons, sifted through photography to find the best photos for the new messaging, and even added that yellow nav color to the buttons (they didn't want to lose their yellow). I just made sure to beef up the text on the buttons so it had enough weight to pass the ADA regulations. Beyond that, we made sure to call out their three top selling products to make it even easier for customers to find as well as create a huge call out for their raw almonds. Their raw almonds are fully raw, which is rare and people seek them out. Before the raw almonds were a bit hidden, deep in the site. We didn't want customer to have to work that hard to find them. Built in Shopify.
|
Left: Nav is not on brand and violates ADA requirements. Right: Redesigned menu is now on brand and compliant with the ADA requirements.
Burroughs Family Farm homepage top section.
|
Burroughs Family Farm homepage mid section.
|
Burroughs Family Farm homepage bottom section.
|