- Responsive design, multi-device viewing
- Membership, donation, and event ticket purchasing functions
- Client-controlled editing through WordPress platform
- Custom WordPress design (theme)
Collaboration between one&eight and the client is essential to a successful project.
This process illustrates how one&eight approached the work flow with LPCA (see above).
While each project has different needs, the rhythm of work is similar.
This project was led by Morgan.
The very first step of the process was to ask the client specific questions to uncover what it is that they are thinking about in regard to their project.
What were the key issues/concerns/needs?
What are some websites that they find appealing? What about those sites makes them appealing?
Morgan asked that LPCA email answers to these questions prior to the initial meeting. This created common touch points that were used in discussing the project.
About 1 hour, this time was used to better understand the project scope.
The LPCA membership payment process was no longer functioning and this was vital to membership management.
Content organization/findability, mobile accessibility, and content management were noted as other top priorities.
Aesthetics and functionality were discussed by reviewing sites from the initial questions and other examples. Wayfinding icons, images of the community, and a streamlined feel were identified as important. Greens and blues were identified to help tell the story of LPCA.
These requests would be addressed in the proposal and timeline.
The proposal outlines the project scope, financial agreements, and other considerations. The timeline lists when each step of the process will be submitted.
Both Morgan and LPCA have agreed to meet certain benchmarks in the process.
With these pieces agreed on, production can begin.
The content of the site informs the design.
LPCA had the benefit of having most of their content already online, in their current site.
The few updates and additions were given to Morgan so that she could start the process of re-organizing the content, or, as it is often called, working with the information architecture.
There were two revisions done to the content structure with the input of LPCA before it was approved.
Morgan began the design process by making quick sketches of her ideas, for her own use.
She kept the ideas of a large main image and easy access to key content areas in the forefront.
Wireframes are formalized outlines of the homepage sketches. They indicate areas of content.
Morgan began with three variations of the homepage.
With feedback from the LPCA, the focus landed on the third wireframe draft. This draft put emphasis on the story of LPCA with a large main image, let users quickly navigate to the needed content with the main navigation at the top of the page and key categories directly below the main image, and overlaid the logo on the image to further integrate the LPCA story.
The look of the Homepage informed the other pages’ layout.
Final wireframes for the Homepage, Join, and Association were approved.
The consistent grid throughout the site made it easy for the user to find information quickly by directing the eye to the important information.
The first round of visual drafts (Homepage, Join, and Association represented above) gave the LPCA an opportunity to see the visual elements that had been in discussion.
Blues and greens were used to reflect the park at the center of the LPCA and an accent color draws the eye to the primary call to action.
Two different interior header treatments were presented (Join and Association).
Large wayfinding icons were placed in consistent space to draw the eye as it scanned the page for important information categories. The icons change depending on the page the user is viewing, so they have quick access to the most relevant information.
In collaboration with LPCA, the green color was changed to make the site brighter.
The interior page header with the logo overlay was chosen to bring the style of the homepage throughout the site.
After inputing the content into the layout, it appeared too overwhelming to the user. To solve this, Morgan collapsed some of the content sections when the user arrived on the page. This allowed for the most important content to be the first viewed. The user could easily expand the content sections for more information.
Mobile visual drafts were created to display the same content as the desktop view.
Completed final visual drafts were used as the blueprint to code the site.
The code for the site was constructed.
Morgan coded the majority of the site. She partnered with two one&eight developers during the build: one developer coded the mobile versions and one developer implemented the membership processing in WordPress.
Once the site’s code was working, Morgan uploaded it to one&eight’s server for LPCA to review.
With the approval of LPCA, Morgan uploaded the site onto the LPCA server. The site was live!
The project scope also included WordPress training and documentation. Morgan provided detailed step-by-step directions on how to use the site and had a 2 hour training session with 4 members of LPCA.