Project Details
Timeline: 3 Months
My Role: Web Designer, Team Lead
Tools: Adobe Photoshop, Figma
Team Members: Tam Tran, Tu Ha
This was a multidisciplinary team-based design project for a fictitious rebranding of an existing business, Lina Nail Clinic, for the class “DMA 098: Design/Media Arts Incubator” at Pasadena City College.
#1: Defining the Problem
The nail salon/spa business Lina Nail Clinic (renamed Lina Nail & Spa for the purposes of this rebranding project), lacked branding materials which reflected a unified brand identity. While the business did have business cards and a brochure already, they did not have a website online to promote their business and provide important information for potential customers.
#2: Establishing a Style Guide
Using the materials already being used by the bussiness as a starting point, we crafted a style guide influenced by competing brands and our own design sensibilities. All team members contributed to the style guide, though I contributed the most to the “web typography” section and created the visual presentation of the style guide itself.
#3: Site Map
#4: Wireframes
Link to all wireframe variations
For the wireframes I made 4 variations of each of the 4 pages we planned to be on the website.
After consulting with my team members, the following are the 4 screens we decided to push forward in the design process.
#5: Final Desktop Prototype
Pushing the design forward, I added colors and imagery using the style guide as reference. Interactivity was also added. Images were taken from Lina Nail Clinic’s Instagram page, as well as taken in-person by Tu Ha.
Our professor brought up a point of feedback on how the scrolling was tedious on the “Services” page, and how this issue can be solved by implementing an accordion to display the information instead of having an overwhelming wall of text.
Prototype:
#6: Final Mobile Prototype
Using the desktop screens as reference, I designed a version of the website adapted to mobile screens.
Due to time constraints, the accordion on the “Services” page is not fully interactable.
Prototype:
What I Would Do Differently
Implement User Testing
Having some sort of user testing conducted at several points throughout the design process would have provided valuable feedback on the usability and accessibility of the site. I relied purely on feedback given by my team members and the professor, which is valuable nontheless, but it would be great to have conducted user testing with someone who isn’t involved in the project in any way and fits the target audience of the website.