Freelance Copywriter’s UI/UX, Rebrand, Site Build
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
3 Weeks at 15 hours / week.
Week 1: Research & Create UX / Week 2: Develop UI / Week 3: Site Build
Live Site (finished product)
Phase 1: Research
Competitive Landscape
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.
Sharing their motivations and work history on an About page.
Phase 2: 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.
User Flow
After defining the user persona I was able to create a specific situation for how the user may navigate the site.
Key
Site Map
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
Contact
Phase 3: Design
Wireframes
After developing the site map I sketched the initial wireframes and digitized them using Figma.
Visual Exploration & Development
After creating the black & white wireframes I worked with the client to define their brand’s voice & mission in order to better understand how it may translate visually.
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 responsive.
Building the Squarespace site Using Custom CSS/HTML
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.
You can view the live site below.
Phase 4: Testing
Usability Testing & Findings
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.
Phase 5: Conclusion & Next Steps
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!”
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.
Thank you.