Genesis Tech Sales

Website Redesign

Genesis Tech Sales

Sirius Media and Avocational Design collaborated on the Genesis Tech Sales website redesign in 2017. The Genesis Tech Sales website was running as a basic HTML site and needed to be more responsive, easily navigable, and edited. The website needed to easily convey its product line, where they could order and have a contact form. The front end web was designed to be clean, easy to use and capitalize on the Genesis Tech Sales preexisting content. Lastly, the backend UI design was updated to be more navigable.

Visit Site

Design Ideation

The business owner wanted a single page layout with anchor links for ease of use and making the product lines easier to update and view. He had pointed out a few websites that he liked the look and feel of, gave a deadline, and we were off. The construction of the site went quickly since it was a one page layout. We communicated with the client throughout the process for approval and buy-in of the design.

Site Architecture

User Flow and Wire Frames

Key requirements for site creation were that it be responsive and have a smooth user experience for clients and potential clients to look at the business’s product line. We thus decided upon Divi, a wordpress theme, that has a simple and smart layout for setting up a single page website layout. Pictured are the website wire frames set up for the first draft of the single page layout.

Visual Design

Genesis Tech Sales provided us with a lot of freedom to create their website. In collaboration with the owners, we made two single page website visual designs. The first draft, pictured below on the left, was initially the site that was going to go up,but the owner wanted it to be a little more “techy”, thus we went with the second visual design draft that incorporates a lot more blue and black hues and plays with type size more. Both utilize anchor/jump links and a simple IA.

High Five Properties

Website Redesign

High Five Properties

High Five Properties LLC needed a fast and reliable UI for both its admin and users, and the website needed to reflect the bubbly attitude of its owners and personable quality of the brand. This website design mixes a clean and friendly environment with bright splashes of colors in order to capture the professional nature of the company and the exuberance of the Portland community. The design of the site is neat and places importance more on the homes being sold and rented, but still uses the creative artwork and colors of Tim Root (the artist of choice for High Five Properties) which makes the experience playful and memorable. By making some smart changes in UI, theme and CMS research, AI and client feedback a strong new brand and website have emerged for High Five Properties that reflects who they are in essence.

Visit Site

Design Ideation

The main objective of this site was to make shopping for a new home enjoyable. Lisa, High Five Properties owner, has been thinking about her site for a while and gave pretty clear expectations of her design expectations as well as what she wanted the site to accomplish for its users. I began the process of mapping out the key parts of the site by taking in the owner’s needs, looking at other similar sites and also by discussing website experiences with recent home buyers and people who were currently looking for an apartment to create an informal user journey map.

Site Architecture

Site Map and Wireframes

The site architecture for this site was pretty straight forward after researching similar sites and really looking at what the business and consumer needed. The site needed to convey trust and an established practice without seeming to be overly stuffy. To quote the business owner “I don’t want it to look or feel corporate.” Users wanted to be able to search for specific properties using filters, contact the business and download an application contact form. The site map, pictured above, laid out how to use the business’s then current information and showed future plans to expand the site to do more for both the business owner and front-end users. The wireframes give a preview of placement of sections on the site and showed how things would link up according to the site map.

Visual Design

High Five Properties came with a wealth of home images and original artwork by Tim Root, local artist, however they seemed to not flow together. The first challenge of the project was to incorporate the feel of the artwork into the brand of the business. During the branding of High Five Properties logo, type, color scheme, etc.f were set up. The elements were then incorporated into the front-end of the site’s user interface.

Rose City Yarn Crawl

Website Redesign

Rose City Yarn Crawl

Sirius Media and Avocational Design collaborated on the Rose City Yarn Crawl website redesign in 2016. The Rose City Yarn Crawl (RCYC) website needed to be more responsive, easily navigable, and edited. The website needed to reflect the personality of RCYC attendees and local businesses of the RCYC cooperative that ran it. The front end web was designed to be clean, easy to use and capitalize on the RCYC’s preexisting content. Lastly, the backend UI design was updated to be more navigable and utilize WooCommerce.

Visit Site

Design Ideation

While brainstorming the informational architecture of the site, it was important to consider the flow of the user’s experience. Luckily, we had been able to meet with multiple members of the Rose City Yarn Crawl board and local knitters that had used the site in the past- we focused on the user’s journey from actual people that used the site. The image above is a glance at one of the iterations of the simple site-map layouts.

Site Architecture

Wireframes

Some key project requirements were that site front-end users (people using the site for information and purchasing products) and site content-contributors (Rose City Yarn Crawl committee/board members) could use the site on multiple platforms and be able to quickly look up site content. The wireframes were created to demonstrate how the site map would flow for both kinds of users. The system was designed to flow from one venue and event to the next, so that each venue would be equally represented and events and patterns for purchase at each venue would be easy to find.

Visual Design

The Rose City Yarn Crawl provided us with their logo, a large library of professional knit and crochet pattern images, and inspirational website examples for us to gain design cues from. We worked with the committee to come up with the rest of the design elements. We considered how each color, transition, type, etc would contribute or detract from the UI of the site, the design preferences of the committee, and the site’s ease of use.

Site Feel

Visual Design

We went through multiple rounds of visual design development before arriving at the final design choice. The ultimate goal was to make sure that the site was responsive, easy to move through, and consistent in its design. We came up with a site that features event calendars to easily add and share events, interactive maps, slideshows showcasing knitting and crocheting images, incorporated ecommerce, and an interactive patterns page.

John Matthew PDX

Website Creation

Matthew John PDX

Avocational Design has just finished creating a responsive website for Matthew Wagner, Matthew John PDX. The Matthew John PDX website needed to be responsive, have a smooth navigation, have an easy to use contact form, and be easy to add blog posts. The website needed to reflect a feeling of tranquility and professionalism to reflect the energy coaching that Matthew conducts. Lastly, the site needed to allow for expansion of its functions ie event’s calendar, newsletters, and online payment.

Visit Site

Site Architecture

Site Map and Wire Frames

The key requirements of this site are making sure to keep the content easily navigable while conveying a cohesive message of tranquility for the site’s users. After discussing what the business owner was looking for, looking into site work research he had completed previously, and doing individual research into this site type- it became apparent that the site needed a single page layout with anchor links. After determining some site constraints, the design of the sitemap had to focus on key parts of Matthew’s practice (About, Services, Contact, and Blog). The wire frames to the left are based on the site layout above.

Visual Design

The visual design for this site needed to convey a sense of tranquility and simplicity, so the site’s visual elements incorporate a monochromatic palette and large inspirational images with soft call to actions and quotes. Matthew provided the small simple round graphics and images of his himself and excursions to the Andes. As you can see the site is still in production and is following the below visual design layouts that have been approved by the client closely.