"Study Pal" Tutoring Branding and Website Development Project
This project is a showcase of a streamlined workflow of a website development project for a small and medium enterprise (SME) client.
Key Skills
- Branding Guide
- UX Research
- Wordpress
My Takeaway
“A brand guilde is the solid foundation for a successful brand.”
Company
Ficticious tutoring company "Study Pal"
Project dates
May 8, 2023 - Aug 11, 2023
Total Hours
10 hours
Role
- UX Researcher
- Brand Designer
Technical Info
- Figma
- Wordpress
- Adobe Express Logo Maker
- Diagram.net
Project Goals
- (1) To conduct UX research for the basic information architecture of a fictitious charity organization.
- (2) To craft a Design System and compile into a Brand Style Guide for the charity.
- (3) To develop a website for the charity using Wordpress content management system with plugins installation and SEO optimization.
The Process
With the needs of a SME client in mind, such as a charity organization that may only allocate limited budget on a website development contract, this project covers all the fundamental yet essential components that are useful for the client, including a Design Brief for consistent brand identity, and a ready-to-go website using the popular content management system Wordpress, with SEO optimization and analytics.
The project was covered in the “Information Architecture” course in our New Media Design and Web Development Diploma Program in BCIT, and consists of three parts as stated below.
UX Research
To form the basis of the website for the client, information architecture was constructed and compiled into a Design Brief report for the client’s reference.
Abundant elements are covered in the UX Research Report, with the following purpose in mind:
- - defining the user goals and organizational goals of the client’s brand: User Goals, User groups, Competition Analysis; *
- - empathizing the target users of the website: User Tasks, User Persona, User Scenario; - constructing the basis of the site: Concept map, User Flow, Sitemap, Facets;
- - for SEO optimization: SEO Metadata tags.
(* Empathy Map and Journey Map, are covered in another course “UX/UI Strategy 1” in the next semester of the program.)
Design System
To make sure the User Interface elements of the website is in-line with the client’s brand identity, a Brand Style Guide was crafted with Logo and its variations, Typography, Color palette, Imagery and Buttons.
Low-fidelity Wireframes were also designed and crafted with Figma, to facilitate discussion with the client for their endorsement of the interface of the web pages.
Wordpress & SEO
For client’s easy update of the content of the website, such as blogs and news updates, the website was developed using the popular content management system Wordpress. After installation of Wordpress, necessary plugins were also installed for SEO optimization and website traffic analytics.
Summary
I had so much fun doing the “Study Pal” project and it is still one of the projects that had given me a strong impact by-far. It had shaken and reconstructed my impression of UXUI Design - not the glamourous and colorful interface design, but consisting of dreary yet fundamentally important groundwork called information architecture. Without such, brand identity of the client could be at risk, and the following wireframing and prototyping work could all go wrong.
No matter which discipline of UX/UI Design that I shall come across in the future, as an employed or freelancing Designer, “Study Pal” project will always be an important asset for me to reference back to - reminding me the fundamentals of information architecture.
