Case Study — UX/UI & Brand
Complete brand identity and Squarespace website for an independent copywriter.
01 — Objective
Background
I worked with a client to completely rebrand her writing business, develop new UI / UX, and build her new website using Squarespace with CSS/HTML customization.
Objective
Create a brand that is artistic and quirky yet classic to match the client's thoughtful & relatable writing style.
Project Duration
02 — Research
I researched other freelance writer's websites who have a similar client base. I found that features all of the freelance sites have are: noting their specific services on the homepage and additional separate Services page, including testimonials on the Homepage, and sharing their motivations and work history on an About page.
03 — Define
User Persona
It was important to speak with the client about their current client base to understand who the user persona would be. Although I didn't create a user persona image I was able to understand that the ideal user is a marketing manager and/or associate at a small - large company that is in need of a writer who can authentically capture the brand's voice by understanding the company's mission and specific subject matter.
Sitemap
After speaking with the client about their requests for the website and also discussing my research we realized that the site map would be straight forward. It includes 5 pages: Home, About, Services, Work, and Contact.
04 — Design
UI Kit
The UI Kit is made from elements that I designed from scratch. It was important to create unique components because just like the writer's style, the brand elements are specific to go with the writer's one-of-a-kind style.
Color Wireframes
Creating the color wireframes was a fun part of the project. All of the work really came together and the client had a very positive response.
Squarespace Build
I chose to build the client's portfolio using Squarespace because it will allow her to make simple edits without my help which she stressed to be essential. Although I'm not a developer and CSS/HTML isn't my speciality I decided to take on the challenge of transforming the colored wireframes into a real product (which is why I don't have a high fidelity prototype featured in this case study). It was a great opportunity to sharpen my already basic understanding of HTML/CSS.
Usability Testing
Using a low fidelity prototype created with InVision, I conducted remote usability testing with 10 users (5 female & 5 male). The users found the UX easy to navigate and also noted that the UI enhances the website's usability. They didn't have suggestions or comments on how to improve the site.
05 — Conclusion
The client was extremely happy with the finished product — the UX/UI made her services easy to understand and work simple to find. Additionally, she said that her rebrand is, 'Better than what she could have ever envisioned!'
Next Steps
I plan on meeting with the client in ~3 months to discuss adding any new work to her site. I will also review the site visitation data and depending on the results will discuss with the client any possible changes that may increase views. I will conduct additional research and user testing before finalizing any edits.
