Lawrence Moore

UX Activist + UI Developer

Lawrence Moore

UX Activist + UI Developer

X Close
X

“Having a UX department or UX title does not mean you are practicing UX”

- Hoa Loranger

Hello!

My name is Lawrence and I consider myself a UX Activist. In this era of ubiquitous devices, interfaces, and applications, user experience is of the utmost importance and is no longer a "nice to have". Understanding the users goals, motivations, and cognition are not only fascinating, but essential. I’ve been doing this since before I knew it was a profession.

I began as a web/graphic designer and over time evolved into a web developer.

As the web grew more complex, so did my design and development chops. On the development side, I turned my attention to gaining a deep understanding of front-end tech, various frameworks, and tools to build applications; however, to build useful, complex applications, the user experience becomes the cornerstone upon which everything else is built.

This idea prompted me to study how and why people would use applications. I became very single minded about the overall experience of using my software, and extremely passionate about creating efficient, intuitive, and pleasurable interfaces.

What I Am
An advocate for the user experience.
Comfortable with full stack js development.
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 simply makes pretty graphics and icons.
What I Am
What I Am NOT
An advocate for the user experience. A person that simply uses UX in their title.
Comfortable with full stack js development. A designer who knows just enough development to get by.
Always trying to learn more than I knew the day before. A person content with what I know.
Experienced in the entire interaction design process A person that simply makes pretty graphics and icons.
Weapons of Choice
HTML CSS
Javascript Jquery
LESS Webstorm
Photoshop Axure
Chrome Dev Tools My Imagination
HTML CSS Javascipt Jquery LESS
Webstorm Photoshop Axure Chrome Dev
Tools
My
Imagination
How I Divvy My Time Pie Chart of Activities
UX Design
Front End Development
Reading About UX
Nerd Related Activities
Eating Ice Cream
What I'm Working on Now

I am currently wrapping up a graduate degree in Human Computer Interaction(HCI) and a certificate in Applied Computer Science. After this, I will mostly likely pursue an education in some area of Psychology.

In between my studies, I am devouring any books I can find concerning the topics of cognitive psychology, HCI, and as many research papers from various NASA researchers because their pragmatic approach to HCI is at the core of my interests.

“What separates design from art is that design is meant to be... functional.”

- Cameron Moll

The foundation of any software application is the design. This concept applies to both the software architecture side, as well as the client-facing side.

Over the years, I have used many different methods and tools to create a solid foundation upon which to build. Below I’ve displayed some examples—including the entire process where I could.

The Lawrence Moore

Since I wanted to showcase great examples of my design process, I figured, “Why not explain how I came up with my own website?” I redo my personal portfolio every year or so, and the version you are currently viewing is my 5th iteration.

View Process

Redesigning my portfolio is something of an event now. I tend to do it every one-to-two years, documenting the process whenever possible. On this iteration, I opted to go with an “app-feel;” the tricky part is that typically, getting an app-feel tends to be performance-intensive. That was something I kept in mind as I began to redesign my site.

Redesigning my portfolio is something of an event now. I tend to do it every one to two years. Typcially I try to document the process. I wanted to go with a "app" feel on this iteration.

When I design my portfolios I try to jot down some specific goals to aim for. These are the ones I went for with this design. They include things such:

  • My website must have interesting interaction elements.
  • I have the dual skillsets of being able to design and write code. I have to show strong examples of both.
  • It must work across all devices since I won't know where people will be when they view this site.

When I design my portfolios I try to jot down some specific goals to aim for. These are the ones I went for with this design. They include things such as showing the various skillsets that I have and making the interaction one of the highlights.

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 possible.
  • Competition is stiff so focus on visual impressions as well as informative aspects.

After creating my initial goals, I then did some research into a few relevant topics. 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.

This is one of my initial sketches of how I wanted the navigation to work. This layout would feel more app like on a mobile device and would be very comfortable to navigate with touch or with a mouse. It would also address each area of interest that I was aiming for.

This is one of my initial sketches of how I wanted the navigation to work. This layout would feel more app like on a mobile device and would be very comfortable to navigate with touch or with a mouse. It would also address each area of interest that I was aiming for.

I wanted to have a little blurb about each project for my project pages to give an overall description of what skills/tools that project was giving an example of. Also, it was imperative to add some type of gallery for the design process. I opted with a slide show that went along with the app feel style.

I wanted to have a little blurb about each project for my project pages to give an overall description of what skills/tools that project was giving an example of. Also, it was imperative to add some type of gallery for the design process.

Krates

This is an app that I designed and am currently building that will help me catalog my vinyl collection, as well as brush up on different technology. Some of these include: Backbone, Handlebars, Require, and MongoDB.

View Process

I knew that this application would only have a handful of views. I made a diagram of how I wanted this to work. Future plans are to make it so that others can use this application as well, hence the user creation section. For now, it's just for me so development will be starting at the Home Page View.

I knew that this application would only have a handful of views. I made a diagram of how I wanted this to work. Future plans are to make it so that others can use this application as well, hence the user creation section.

The home page of this application contains the basic layout of the entire app. Most of the pages will resemble this. I used the task flow sketch to include and place the various actions that can be performed (editing, creating, etc).

The home page of this application contains the basic layout of the entire app. Most of the pages will resemble this. I used the task flow sketch to include and place the various actions that can be performed (editing, creating, etc).

Since I find myself dealing with my music in two categories (Albums and Songs), I made sure to include a view that helps me deal with albums specifically.

In this view, I will still be able to edit, add, and delete songs; the same things I can do in the Song View. This view is for those times when I'm more focused on entire albums so it isn't as redundant as it first seems.

Since I find myself dealing with my music in two categories (Albums and Songs), I made sure to include a view that helps me deal with albums specifically. In this view, I will still be able to edit, add, and delete songs.

The form elements that will allow me to add and edit songs will live in the left column where the genre list was before. I did this to avoid using modal forms and locking the user into that form when they may want to reference information in the table.

The form elements that will allow me to add and edit songs will live in the left column where the genre list was before. I did this to avoid using modal forms and locking the user into that form when they may want to reference information in the table.

This wireframe shows how this application will communicate with the Discogs API, which is the heart of creating new entries. The user can enter in a line of information and then click on the search button. This search will send a query to the Discogs API and return a list of matches. The user can then simply select the match for the item they want and it will auto-fill the rest of the form. This will keep the user from having to enter in 1000's of lines for a huge collection of music.

This wireframe shows how this application will communicate with the Discogs API, which is the heart of creating new entries. This will keep the user from having to enter in 1000's of lines for a huge collection of music.

HubTile

This is a design project for a start-up that I worked on with 2 other designers. Essentially, the task was to design a system that would allow users to “put together” a small marking 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.

When this project began, the founder had a basic idea of what he wanted to happen, but hadn’t yet refined the details. After several meetings, a few card sort exercises, and primary noun architecture exercise, we created this site map of the application.

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.

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.

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.

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

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.

Amy Foxworthy Writing

This is a portfolio website that I did for a professional writer. This was a unique experience because really, how often does a writer as you to create a website for them? I can’t turn down a fresh challenge.

View Process

To begin, I had lengthy conversations with Amy as to what it is she wanted 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 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!)

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.

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, this would increase performance (load times) as well.

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.

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.

To display the diversity in her writing samples, I collected them all together and determined that they fell into 3 categories: 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 amyFoxworthy.com and the code can be seen here.

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.

Emoe

This is a research project that I am working on for graduate school. It is a chat interface that is designed to support the emotional nuances of conversation. I'm currently developing a working prototype.

View Process

This has been an ongoing pain point with non-vocal communication since its inception. I read quite a few research papers from scientific journals to support my idea for this application. My findings revealed that there continues to be a great need for a chat interface that supports emotion and context. While my system doesn't address all facets of conversation, it does focus on emotion and levels of severity. Here's a list of functional requirements that I created from my research.

  • Users should be able to attach nuances or opt to not attach them.
  • Users should be able to lock the chat window during sessions.
  • Users should be able to create custom nuances.
  • Users should be able to assign colors to specific nuances.
  • Users should be able to arrange top 10 nuances for quick access.
  • Users should be able to use hot keys as well as GUI.

This has been an ongoing pain point with non-vocal communication since its inception. I read quite a few research papers from scientific journals to support my idea for this application. While my system doesn't address all facets of conversation, it does focus on emotion and levels of severity.

The main feature/goal of this application is to allow users to "attach" emotion, context, nuance, etc., to their messages before they send them. The senders meaning will be much easier to understand since it will be "received" as opposed to "perceived".

The main feature/goal of this application is to allow users to "attach" emotion, context, nuance, etc., to their messages before they send them. The senders meaning will be much easier to understand since it will be "received" as opposed to "perceived".

Another feature of this application will be the ability to lock the conversation for a period of time. During my initial study, I found that some users find themselves in situations where they are trying to complete a long message. Often times, they are either interrupted before they finish, or they have to submit a large block of text. This locking feature will allow users to lock the chat window for up to 3 consecutive messages. This aspect will have to be thoroughly test and tweaked to prevent it from being abused.

Another feature of this application will be the ability to lock the conversation for a period of time. During my initial study, I found that some users find themselves in situations where they are trying to complete a long message. This aspect will have to be thoroughly test and tweaked to prevent it from being abused.

The challenge with this design was keeping the interface simple and familiar (matching traditional instant messaging interfaces), while adding a conceptually complex feature to express the nuances of conversation.

To display the “emoes”, I opted to use colored circles. This keeps clutter down from the chat window and after a period of time, the colors can be readily identified with an emoe. The key that lets users know what the colors mean can be hidden, since two users who are familiar with each other’s colors would find it unnecessary and distracting.

The challenge with this design was keeping the interface simple and familiar (matching traditional instant messaging interfaces), while adding a conceptually complex feature to express the nuances of conversation.

Users will not only have default emoes to pick from, but they can also create their own and assign them a particular color. This feature was one of the main requested items in my initial survey.

Also, when a user attaches an emoe to a message, they can adjust the “level” of it. The slider goes from “none” to “max”; none being completely black and max being the full hue of that color. Users can use this to express the amount of nuance they want to attach to their messages.

Users will not only have default emoes to pick from, but they can also create their own and assign them a particular color. This feature was one of the main requested items in my initial survey.

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 Process

“If debugging is the process of removing software bugs, then programming must be the process of putting them in.”

- Edsger Wybe Dijkstra

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 skill-set 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

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 GitHub

Krates

This is a pet project of mine that will assist me in cataloging my vinyl record collection. It uses Node, Backbone, MongoDB, Handlebars, Grunt and LESS. Furture plans are to recreate it in several frameworks.

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 Writing

I created this writer’s protfolio website and logo with the sole purpose of giving them an edge on other writers.

Originally, I did this in website in a brochure style. To keep from having to update this website myself manually, I re-architected the site using KeystoneJS CMS to handle management of content. I find the interface much less convoluted than the big CMS's out there.

View GitHub View Live Site

Indy Chamber

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 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

“The single biggest problem in communication is the illusion that it has taken place.”

- George Benard Shaw

Contact Me

Right now, the best way to reach me is at:

Or there's always Linkedin, which can be found HERE