Yasmin Kanani

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!

Yasmin's website request.
Yasmin’s website request.

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.
John Foster - the persona of Yasmin's target audience.
John Foster – the persona of Yasmin’s target audience.

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.

Sitemap on InVision.

Wireframe Iteration

First I drafted some ideas on my own:

After half a week, I drew up wireframes for mobile and desktop screens:

Creating the wireframes on a cold autumn day.
Creating the wireframes on a cold autumn day.

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.

Yasmin Kanani - Group wireframe on InVision.
Our group wireframe on InVision.

> 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:

Wireframe for our client's 5 step consultation 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.

Wireframe for our client's events page.

> 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.
The bottom example leads the eyes towards "Contact Yasmin".
The bottom example leads the eyes towards “Contact Yasmin”.

Implementation

Colour Palette

The following colours below were used to establish an optimistic and friendly atmosphere.

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.
The final XD mockup created for our client project.
The final XD mockup created for our client project.

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.
Outputting custom post types and advanced custom fields.
Outputting custom post types and advanced custom fields.

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.

> Back to my work