CPAWC Website Redesign Project
Client: Codebox Development Inc.
Type: UX and UI Design
Tools: Sketch and Adobe Suite
CPAWC – Commercial Production Association of Western Canada Website Redesign Project was two-month long contract work for Codebox Development Inc. As an interface designer, I worked with a developer from Codebox Development Inc. to add the missing steps in the user flow. Improving the experience of navigating from one page to another, and the visual design of the member directory page was the main focus of this project.
Current Website Design
The main objective was creating simple website pages that allow users to sign up for an account, to create a listing post and to pay for a subscription. There are two main users: people who want to make a business listing on the website and people who want to manage the users who signed up for the business listing service.
Before this redesign project, the account holders for CPAWC website had no direct access to their business listings. One would have to contact the administrator to make changes to the listing on the WordPress admin page. The administrator wanted to move away from using WordPress for admin purposes.
Research and Wireframe
First of all, I took a screenshot of the existing web pages which I needed to redesign. After adding comments on these screenshots, I created sketches of sitemap to clearly determine the structure of the website. I worked on how to improve them by organizing the hierarchy of each web pages. Then, I sketched many wireframes to imagine how one can showcase the data. Making sense of what kind of information should be there for the user was important since it directly involves the user and the admin interaction with the web page to enter the data or to obtain the data.
Design Objectives
Develop the user experience profile for CPAWC brand/identity
Develop the visual design (colours and graphic) for CPAWC brand/identity
A self-sustaining administration page (away from WordPress format)
Requirements
Not feature heavy
Maintain a member directory of people related to the film industry
Paid subscription to be shown on the member listing
6 Wireframes
Registration page
Payment page
Account page
Admin dashboard
Member list
Final Prototype
Member Signup/Login (Corporate)
Member Signup/Login (Individual)
Corporate Member Listing
User Administration Page
Result
I learned how much work goes into creating forms, organizing information and adding helpful visual cues. It was my first freelance project which requires both UX and UI knowledge. By studying UX and UI online, I learned to use various resources and guidelines such as Material Design by Google.
As for the tools, learning to use Sketch was the biggest learning curve in this project for me. My experience with this redesign project motivated me to take User Interface Design class at Brainstation.