Karen Ames Portfolio

WordPress e-Commerce Site

Client Project

Duration: 1 month

I have received info from client to create the e-Commerce website for their children's books company. This project is the completion of the WordPress site for A&W Productions. It is a WordPress site using WooCommerce that has now been moved, with all development being done directly on their host.
‍
Using custom PHP and CSS, I created a more client specific site with new section names and menu styling. I now have updated the content with data provided by the client. I have also included their logo as the header and link to the Home page from any page. This same logo has been used as the icon for the website and at the client's request, the Home page background image.

Logo & Icon Design

Custom PHP Design

The section names were changed to fit more client specific needs, instead of "Shop by Category" and "New In". They currently only have one published book, plus one in the works. Therefor, the number of items per page for All Books was also changed to allow customization as needed.

Custom CSS Design

Styling was added to the primary menu by giving it a custom background bar color and changing the font color. A hover effect was also added with a custom highlight color and font color change.

awchildrensbooks.net

Click link to view live site

Adobe XD Daily Creative Challenge

Design Challenge

Duration: 9 Days

Each day began with a basic starter template and instructions for the challenge. All work was done within Adobe XD using my own design and customization.

Day 1 - Interaction Video

Day 1 - Artboards

Day 1 Prototype

Click link to interact with prototype

Day 2 - Interaction Video

Day 2 - Artboards

Day 2 Prototype

Click link to interact with prototype

Day 3 - Interaction Video

Day 3 - Artboards

Day 3 Prototype

Click link to interact with prototype

Recipe App

Concept Project

Duration: July 4, 2018 - July 16, 2018

I’ve created a concept prototype of a Recipe App with Adobe XD. This project was completed in an effort to learn and use Adobe XD, while providing a collection of my husband’s favorite recipes from my years as a chef.

All design, wireframe, low and high-fidelity prototyping was completed through the use of Adobe XD, helping me to hone my UI/UX design and XD skills.
‍
This video shows the fully finished prototype for the Recipe App and all planned interactions in motion.

Interaction Video

Design

The main screen was designed with each individual element being brought together and pieced into one cohesive display. This was then carried throughout, helping the design and visuals to flow smoothly.

The recipe pages were designed following the same structure and visual lines as the main screen. This allows the design to further flow and tie the entire app together. The hamburger menu within the recipe pages opens a main menu of the recipes. This was designed as a streamlined version of the main screen.

Interactive Wireframe

All connections were created making sure any part of the section could be clicked in the main screen, recipe pages and menu button. Providing navigation to the respective recipe page chosen or previous page when using the back button. This ensures ease of use and comfort during interaction, especially crucial on touch screen devices. Overlay was implemented for the hamburger menu within the recipe pages, allowing a streamlined main menu to slide out.