Robert J. Morgan Website

Building a Responsive E-Commerce Solution

  • UX/UI Designer
  • Frontend Developer

Overview

Author and speaker, Robert J. Morgan, was entering into a new phase of his ministry. He was in need of a new website that would give his user base a place to purchase his books, see his upcoming speaking events, read and listen to his weekly content, watch his video courses, and more. The style of the site needed to be cohesive with the new brand I had developed for him as well.

Problem

RJM's website was out-of-date, and did not accommodate the growing verticals within the ministry. This prevented growth and limited his reach.

Solution

I designed and developed a fully responsive e-commerce site that would not only allow RJM to continue selling his catalog, but also begin selling online courses, publish weekly podcasts, as well as sell/book speaking events.

Development

Stakeholder Discussions

Key discussions were conducted which allowed me to:

  • Gain insights and knowledge as well as stakeholder expectations
  • Brainstorm functionality as well as understand technical capabilities and limitations
  • Ensure that design and content efforts were aligned to the ministry's vision.

Audience Research

By studying website analytics and mailing list demographics, I was able to gain a better understanding of Rob's audience. This data allowed me to pinpoint who I needed to keep in mind while designing the site so that we could create an experience that would better appeal to his user base.

Analytic data for Robert J. Morgan

Design

By utilizing the data gathered in the research stage, I was able to move forward confidently into the design stage of this project.

Wireframing

It was important that key areas of the site be easily accessible, whether through the navigation or in segmented sections of the site. Wireframing aided in optimizing the format of the site so that those key areas were easily accessible (Homepage elements, book purchase buttons, checkout flow, etc.)

Robert J. Morgan Wireframe

Visual Mockups

I created detailed mockups illustrating how the website would look and feel for both mobile and desktop views. These were presented to key stakeholders to help solidify the direction of the design.

Robert J. Morgan Mockup
Development

Development & Testing

As the front end developer on this project, I was tasked with:

  • Coding functional HTML, CSS, & JS for all areas of the website.
  • Creating a responsive framework that would work visually on both desktop, tablet, and mobile devices.
  • Ensuring website seamlessly integrated with third party features (payment gateways, email collection, etc.).
  • Testing the functionality of all elements on the website.