Defined and implemented a content strategy solution to improve our client’s workflow.
Timeline
BCIT Client Project
5 Weeks Execution Time
Completed Nov 2019
Applied Skills
Competitive Analysis
User Interviews
User Persona
Content Strategy
Wireframing
Prototyping / Development
View Expert Interview Notes
View Wireframes
Summary
Yasmin Kanani is an experienced career transitions consultant. She provides coordinated career consultations in individual or community workshops settings. We accomplished one of Yasmin’s visions by working with her to create her own website.
In our team of 4, my role in creating a website included user research, information architecture, user interface feedback, image/icon editing, and development.
About Yasmin’s work:
“Using a collaborative approach I’m able to develop and facilitate high-quality learning experiences that create a pathway towards a fulfilling career.”
Objectives
- Determine digital priorities for her brand/business.
- Design a website that fits our client and her userbase needs.
- Develop a responsive website that allows for easy maintenance.
Inspiration
Good Career Advice
“This website would be my branding and for my clients to find my information, services, resources and communicate with me. It should provide information about me, my services and invite them to events.”
We chose to work with Yasmin out of our list of potential clients as Yasmin’s site requirements and ideas were clearly laid out. I was also thinking I could get some advice from Yasmin herself about my own career goals!
Duties & Collaboration
We divided duties and set up in-person meetings through Slack. As we had very different working styles and approaches, we split up our assigned work, allowing us to utilize our own strategies.
Yasmin was included in our design and development cycle, as she could provide us with a professional perspective on the career counselling industry.
As the co-lead of a team of designers and developers, I regularly consulted with the client to set meeting times, determine business needs, and obtain site content.
Expert Interview
Our objectives were to learn more about Yasmin and the career counselling industry she was working in. We learned the following from our interview with our client:
- Background information about her work and career.
- Yasmin’s business approach/ work processes.
- Client history and demographics of Yasmin’s clients.
- Yasmin’s goals regarding her website.
- Yasmin’s personal brand and desired impression.
- Design examples of websites that fit Yasmin’s brand.
> View our expert interview notes here
User Takeaways
The average age of users was generally between ages 18-55:
- Originally, Yasmin had imagined the site to appeal to established professionals.
- Revisiting her client list, we noticed clients also tended to be new graduates.
The bulk of Yasmin’s previous clients are from:
- Parents of adult children, returning to work and reestablishing a career or job.
- Fresh graduates, entering a new industry and beginning their careers.
- Unsatisfied professionals considering a change in their career.
Yasmin’s generates business leads through:
- Personal referral – this is the majority of her clients.
- Social media – potential leads also come through LinkedIn.
Branding & Style
She already had a brand design, message, and colour scheme – there was a debate on whether or not we should stick with the existing brand colours or create a new one as a team.
After a vote, we decided to stay with the general style of her existing branding.
User Stories
“I want to learn more about different careers in detail before I decide on my own.”
Recent Graduate
“I want to figure out the source of my discontent so I can figure out my next steps.”
Dissatisfied Professional
“I want to find out what’s changed so I can re-enter my job industry.”
Older Parent
Ideation
Website Navigation
The first iteration for our website navigation had 7 top-level pages, as per client request:
Home, 5 Step Plan, About, Testimonials, Events, Contact, Resources.
After deliberation, the number of top-level pages was reduced to 5, in order to focus on the website objectives more clearly.
Wireframe Iteration
First I drafted some ideas on my own:
After half a week, I drew up wireframes for mobile and desktop screens:
InVision was a great tool to utilize as all members of the group, including my instructors, had access and could comment if needed.
Note: We ended up mostly communicating in person for this part, and so the notes on this page were completely mine.
> View the wireframes for the website here
5 Step Plan
This page was what our group and instructors believed was the most important page at this point in the project. This page would be the page that outlined our client’s consultation process, which would explain and appeal to any potential clients.
Wireframe for the page:
- By scrolling, users would view the 5 step process in the same order that would mirror an actual consultation, reducing potential confusion.
- Each interested user would have to click at least 3 or more times in order to see over 50% of the content available.
- Scrolling is a natural action for a user in both the scrolling motion made on mobile and through the scroll wheel on a mouse.
Events
Though Yasmin requested an events page, we first assumed as a group that based on her prior working history that Yasmin would continue to prioritize one-on-one consultations as her primary business model.
However, I had a change of heart. Although she mostly handled 1 on 1 consults before:
- It was her request for an events page despite the lack of prior experience, so it must have (future) significance.
- A workshop or event where many people would attend and pay into would be a more efficient use of time in a business or financial perspective.
The team and our instructors felt it was additional work and would distract from her primary business model. When we asked to clarify during our next meeting, she informed us that future events were as important to her as her 5-step-process.
> View the wireframes for the website here
User Interface
After user testing, I assisted the UI by providing:
- Design input regarding overall spacing and alignment.
- Typographic font assistance adjusting font-weight and tracking.
- Icon and image editing using Adobe Illustrator/Photoshop.
- Calls to action were redone to be visually intuitive.
Implementation
Colour Palette
Our Final Design
The impression Yasmin’s website would have:
- To be seen as approachable, friendly and relaxed – like how she is in person.
- Yasmin had a credible career history, so professionalism was less of a concern.
Website Development
The site was developed using the Underscores theme. Each page was coded to fit a different content structure. In this area, I offered a helping hand to my team as well.
I was responsible for the following:
- PHP functions, post types, and group taxonomies.
- Adjust and optimizing code to follow coding best-practices.
- Code was looked over to be fine-tuned, edited and polished.
- Pages were to be responsive without any resizing errors or cut-offs.
Extra Touches
The website was optimized with a SEO plugin. The dashboard of the website was customized for an improved administrative experience.
Launch & Follow-Up
On our final group meeting with Yasmin on October 25, we taught her how to use her website using the backend of WordPress.
Later, I organized an additional phone follow-up to check in on how she was handling her website. I helped her set up her auto-email replies and adjusted the “Event” page according to her wishes.
Insights
Throughout the project process, I gained valuable insight into the group dynamics of a complete web development project. With different creative visions, our team did not come to similar conclusions during our design portion of the project.
To remedy this, I spent more effort on the development side than initially planned. Our project was 1.5 weeks late as a result of this learning experience.
Next time, it would be ideal to properly assess each team member’s strengths, weaknesses, and then assign roles accordingly before beginning the project.