About
Code
Design
Contact

Hello!

I’m a firm believer in that quote, but I’ll get to that in a bit. I do user experience design, development, and research. I’ve been doing this for about 8 years and the more I learn, the more I find that my curiosity is limitless.

I do not take these roles lightly. I was a graphic and web designer for many years before becoming a full stack javascript developer. Now I am focused on quantitative and qualitative research and user experience in general.

Being a designer and front end developer has given me a unique perspective and allows me to speak everyone’s language as well as get own my hands dirty when conducting UX research.

What I Am What I Am NOT
An advocate for the user experience. A person that simply uses UX in their title.
Comfortable with development AND design. A designer who knows just enough development to get by.
Always trying to learn more than I knew the day before. A person content at my current level.
Experienced in the entire interaction design process. A person that just makes pretty graphics and icons.
What I Am
An advocate for the user experience.
Comfortable with development AND design.
Always trying to learn more than I knew the day before.
Experienced in the entire interaction design process

What I Am NOT
A person that simply uses UX in their title.
A designer who knows just enough development to get by.
A person content with what I know.
A person that just makes pretty graphics and icons.
Weapons of Choice
HTML CSS Javascript Jquery LESS
Webstorm Photoshop Axure Chrome Dev Tools My Imagination
Weapons of Choice
HTML CSS
Javascript Jquery
LESS Webstorm
Photoshop Axure
Chrome Dev Tools My Imagination
How I Divvy My Time
UX Design
Front End Development
Reading About UX
Nerd Related Activities
Eating Ice Cream
What I’m Working On Now

I’m currently in the HCI Master's program at IUPUI. It's quite a handful, but there is a great deal of good information to absorb.

While I have previously spent much of my energy on the technical and design aspects of web development, I've grown to be equally interested in the psychology of them. I'm more focused on how people use applications and why; What motivates people to use an app or to choose a similar one over another. THIS is where the fun is at for me righ tnow. This is what has pulled me into user experience research.

While I do spend a lot of time on the visual/interactive side of UX, I still like to get my hands dirty with code. This part of my skillset came about simply because I wanted to build what I was designing. I’d have to say I enjoy writing code as much as I love designing a good user experience. There’s something extremely satisfying in both.

Below are some examples of sites or applications that I have written code for. There are links to Github repos where applicable.

The Lawrence Moore

This site was conceptualized, designed, and developed in about a week. It wasn't easy, but it was necessary. It's in the process of being refactored and checked for performance issues now.

View Live Site View GitHub

Revolt TV

I was one of front end devs on Revolt.tv, Sean Combs' latest opus. It pulls JSON data from a custom CMS to populate the newsfeed. I'd say it's one of the biggest sites I've had a chance to work on.

View Live Site

Amy Foxworthy

I created this writer’s protfolio website and logo with the sole purpose of giving them an edge on other writers. After looking through many writers' portolios, it turns out that giving Amy an edge wouldn’t be all that difficult.

View Live Site View GitHub

Indiana Chamber of Commerce

For this site, I was the sole front end developer working with two other back end devs. This is a .NET site and required me to be able to navigate through that framework comfortably.

View Live Site

Cliff Notes Skills Test

The Cliff Notes Skills Test was a test I took for a job interview. I had to turn a PDF into a webpage based on the style of their site. The PDF I used is located HERE. This was the only asset I was given. They provided absolutely no images, styles, fonts, etc. They have since redesigned their site so it doesn't match up anymore. It was cool at the time though!

View Live Site

My first steps into the world of web development began in design. It started with my hobby of drawing, to evolving into graphic and print design, then to web and user interface design.

Over the years, I have developed the habit of putting more work into conceptualizing the designs before I actually start on high fidelity stuff.

Here’s some of my design work. I have included the entire process where I could.

The Lawrence Moore lightblub logo

TheLawrenceMoore.com

Since I wanted to put up great examples of my design process, I figured why not start with explaining how I came up with this site? I redo my personal portfolio every year or so, and this would be the 5th iteration.

View Process
  • A job posting I saw was the motivation for me redesigning my site. As I said above, I typically do it every year or so and I was due for a change anyway. However, seeing this job posting for a position I really want meant that I needed to finish it sooner rather than later. Between balancing work, graduate studies, and sleep, I had to make time to design and code this project quickly.

  • To start my portfolio projects, I like to create a set a design goals and post them somewhere where I can see them readily and often as I’m working. For an interaction design job, there were a couple business goals right off the bat that I know I needed to focus on. Some of them include:

    • My website must have interesting interaction elements.
    • I have the dual skillsets of being able to design and write code. I have to show these equally.
    • It must also work on mobile or tablet devices because I won’t know where the people I want to see my site will be when they view it.
    • It has to have color (My last site was cool, but monochromatic).
  • After creating my initial goals, I then did some research into a few relevant topics. This would be where I would create use cases for a design. I read several Tech HR articles to see what types of things they look for in designer and developer portfolios. I also browsed a handful of interaction designer websites to see what others have done. After doing so I added these requirements to my list.

    • Must show design process for several projects.
    • Developed sites need links to live site as well as Github if applicable.
    • Competition is stiff so focus on visual impressions as well as the informative aspects.
  • Once I had my design goals set up, it was time to get to work. With the clock ticking, I got out my paper and pencils are started sketching out some interaction concepts. I needed a good core interaction method that would be visually impressive, but not ridiculously superfluous.

    I settled on this layout because not only does it have creative interactive functionality, but it also would translate easy between desktop, tablet, and phone. It made room for showcasing both of my skillsets as well.

  • For my design page, I wanted to make room to show all of my projects and the thought process behind as mentioned in my goals. I also did not want to use a lightbox since they can be problematic. I opted to go with a hidden carousel since it would allow me to show and explain my process and also wouldn’t lock the user into one area. They would be free to close it or leave it open and continue browsing at their leisure. And of course, autoplay would NOT be used on the carousel.

  • Since time was not on my side, I immediately jumped into putting together a prototype. I try to make functional prototypes whenever I can because I believe that letting users test designs in their intended form factor is important.

    After user testing my initial prototypes, I got enough support and feedback to jump into Photoshop and start designing. Keeping with my goals of adding color without making it garish, I created comps I was satisfied with. Now time to code… (Code for this can be seen here or in the code section of this site.)

Hubtile Website

Hubtile

This is a design project for a start-up that I got to work on with 2 other designers. Essentially, we had to design a system that allows users to “put together” a small marketing website using tiles.

View Process
  • When this project began, the founder had a basic idea of what he wanted to happen, but hadn’t yet refined the details. What we DID know was that it had to let users sign in and manage “sites” that they could build with tiles. There was also talk of implementing QR codes that would link to the site. With just that to go on, we started off creating use cases and primary noun architecture to workout what the admin section would need. This would be the basis of our design. After several thousand ideation meetings, we created a task flow that gave us and the stakeholder a better idea of what was needed and missing.

  • While there are MANY wireframes that we created for this application, this one is the core functionality of the application. While we would eventually refine this some more, this iteration was one of our earliest. As you can see, it contains the egress and ingress points from the task flow document.

  • This is a wireframe of the edit tile modal. We made sure to include all of the relevant options that a user would need to create a custom website tile.

  • iv. Here’s an image of the final design based on our wireframes. I didn’t do this design, but I just wanted to show what it eventually looked like. . I did go on to code the page to pass off to back-end developers. A demo can be found here

    During our iterations, the stakeholder determined that this would be a desktop and tablet app. We eventually removed many of the buttons and replaced them with drag and drop functionality.

Amy Foxworthy Freelance Writer Website

AmyFoxworhty.com

This is a portfolio website for a writer that I did. This was a unique experience because really, how often does a writer ask you to create a website for them? I can’t say no to a fresh challenge…

View Process
  • To begin, I had lengthy conversations with Amy as to what it is she wants this website to do. The obvious business goal is to display her writing talents, but there’s much more specific details involved in that. She needs to show particular writing skills and examples. She is also prefers traditional methods of writing, but that’s an aesthetic thing that will come in the visual design itself. We created this list of requirements.

    • Must show diverse writing: newsletters, hosted articles, and downloadable PDFs.
    • Must work on mobile and table for potential clients.
    • It has to contain room for her to be able to discuss her skills at length while also providing a summary.
    • Need to create a logo and branding.
    • It has to have a lot of green. (Very important!)
  • I decided to make this work like a single page application. This would allow the site to display all relevant info in one place. This would also allow potential clients to find everything they need without mucking about trying to find writing samples. And also, if there was going to potentially be large files to load, so this would increase performance (load times) as well.

  • To display the diversity in her writing samples, I collected them all together and determined that they fell into 3 categories: Writing samples online as downloadable files (Downloads), Articles on external websites (External), and Newsletter emails (Internal). I deemed the Newsletters internal because I felt that it was best to just recreate them with HTML as opposed to taking a screen shot. The accordion method lets the user see potentially many samples, but also giving them the option to hide them.

  • After tweaking the wireframes a bit, I then started on the branding. Green was required so that was easy. Since Amy is a writing traditionalist, the obvious choice was to include something involving typewriters. I created the logo to resemble a typewriter key and included one on the logo itself. I wanted the background to also be representative, just not too distracting so I placed a light black overlay on top of it. This is the finished design. The live site can be seen at amyfoxworhty.com and the code can be seen here.

Runner Image

Graphic Design

These are simply graphic design images that I've done that I like. Some are just images, others are mock websites. These were purely graphic design challenges.

View Gallery
The Lawrence Moore lightblub logo

TheLawrenceMoore.com

Since I wanted to put up great examples of my design process, I figured why not start with explaining how I came up with this site? I redo my personal portfolio every year or so and this would be the 5th iteration.

View Process
  • A job posting I saw was the motivation for me redesigning my site. As I said above, I typically do it every year or so and I was due for a change anyway. However, seeing this job posting for a position I really want meant that I needed to finish it sooner rather than later. Between balancing work, graduate studies, and sleep, I had to make time to design and code this project quickly.

  • To start my portfolio projects, I like to create a set a design goals and post them somewhere where I can see them readily and often as I’m working. For an interaction design job, there were a couple business goals right off the bat that I know I needed to focus on. Some of them include:

    • My website must have interesting interaction elements.
    • I have the dual skillsets of being able to design and write code. I have to show these equally.
    • It must also work on mobile or tablet devices because I won’t know where the people I want to see my site will be when they view it.
    • It has to have color (My last site was cool, but monochromatic).
  • After creating my initial goals, I then did some research into a few relevant topics. This would be where I would create use cases for a design. I read several Tech HR articles to see what types of things they look for in designer and developer portfolios. I also browsed a handful of interaction designer websites to see what others have done. After doing so I added these requirements to my list.

    • Must show design process for several projects.
    • Developed sites need links to live site as well as Github if applicable.
    • Competition is stiff so focus on visual impressions as well as the informative aspects.
  • Once I had my design goals set up, it was time to get to work. With the clock ticking, I got out my paper and pencils are started sketching out some interaction concepts. I needed a good core interaction method that would be visually impressive, but not ridiculously superfluous.

    I settled on this layout because not only does it have creative interactive functionality, but it also would translate easy between desktop, tablet, and phone. It made room for showcasing both of my skillsets as well.

  • For my design page, I wanted to make room to show all of my projects and the thought process behind as mentioned in my goals. I also did not want to use a lightbox since they can be problematic. I opted to go with a hidden carousel since it would allow me to show and explain my process and also wouldn’t lock the user into one area. They would be free to close it or leave it open and continue browsing at their leisure. And of course, autoplay would NOT be used on the carousel.

  • Since time was not on my side, I immediately jumped into putting together a prototype. I try to make functional prototypes whenever I can because I believe that letting users test designs in their intended form factor is important.

    After user testing my initial prototypes, I got enough support and feedback to jump into Photoshop and start designing. Keeping with my goals of adding color without making it garish, I created comps I was satisfied with. Now time to code… (Code for this can be seen here or in the code section of this site.)

Hubtile Website

Hubtile

This is a design project for a start-up that I got to work on with 2 other designers. Essentially, we had to design a system that would allow users to “put together” a small marketing website using tiles.

View Process
  • When this project began, the founder had a basic idea of what he wanted to happen, but hadn’t yet refined the details. What we DID know was that it had to let users sign in and manage “sites” that they could build with tiles. There was also talk of implementing QR codes that would link to the site. With just that to go on, we started off creating use cases and primary noun architecture to workout what the admin section would need. This would be the basis of our design. After several thousand ideation meetings, we created a task flow that gave us and the stakeholder a better idea of what was needed and missing.

  • While there are MANY wireframes that we created for this application, this one is the core functionality of the application. While we would eventually refine this some more, this iteration was one of our earliest. As you can see, it contains the egress and ingress points from the task flow document.

  • This is a wireframe of the edit tile modal. We made sure to include all of the relevant options that a user would need to create a custom website tile.

  • iv. Here’s an image of the final design based on our wireframes. I didn’t do this design, but I just wanted to show what it eventually looked like. . I did go on to code the page to pass off to back-end developers. A demo can be found here

    During our iterations, the stakeholder determined that this would be a desktop and tablet app. We eventually removed many of the buttons and replaced them with drag and drop functionality.

Amy Foxworthy Freelance Writer Website

AmyFoxworthy.com

This is a portfolio website for a writer that I did. This was a unique experience because really, how often does a writer ask you to create a website for them? I can’t say no to a fresh challenge…

View Process
  • To begin, I had lengthy conversations with Amy as to what it is she wants this website to do. The obvious business goal is to display her writing talents, but there’s much more specific details involved in that. She needs to show particular writing skills and examples. She is also prefers traditional methods of writing, but that’s an aesthetic thing that will come in the visual design itself. We created this list of requirements.

    • Must show diverse writing: newsletters, hosted articles, and downloadable PDFs.
    • Must work on mobile and table for potential clients.
    • It has to contain room for her to be able to discuss her skills at length while also providing a summary.
    • Need to create a logo and branding.
    • It has to have a lot of green. (Very important!)
  • I decided to make this work like a single page application. This would allow the site to display all relevant info in one place. This would also allow potential clients to find everything they need without mucking about trying to find writing samples. And also, if there was going to potentially be large files to load, so this would increase performance (load times) as well.

  • To display the diversity in her writing samples, I collected them all together and determined that they fell into 3 categories: Writing samples online as downloadable files (Downloads), Articles on external websites (External), and Newsletter emails (Internal). I deemed the Newsletters internal because I felt that it was best to just recreate them with HTML as opposed to taking a screen shot. The accordion method lets the user see potentially many samples, but also giving them the option to hide them.

  • After tweaking the wireframes a bit, I then started on the branding. Green was required so that was easy. Since Amy is a writing traditionalist, the obvious choice was to include something involving typewriters. I created the logo to resemble a typewriter key and included one on the logo itself. I wanted the background to also be representative, just not too distracting so I placed a light black overlay on top of it. This is the finished design. The live site can be seen at amyfoxworhty.com and the code can be seen here.

Runner Image

Graphic Design

These are simply graphic design images that I've done that I like. Some are just images, others are mock websites. These were purely graphic design challenges.

View Gallery
Contact Me

Due mail server problems with my webhost, it's best to just send me an email:

TheLawrenceMoore@Gmail.com