Examples of questions asked in the kickoff meeting
Kevin Hanst
UI/UX Designer
Create Yourself Co
B2C Web Design
Overview
Create Yourself Co. was created by a speech-language pathologist who coaches parents, teachers, and caregivers on strategies to promote social emotional development and to help them understand children’s behaviors.
The Create Yourself Co. mission is to help children with sensory processing differences thrive in this sensory world, and to coach caregivers on how to help children navigate it. By understanding the foundation as to why our behaviors occur, there is more room for connection during the storm.
The founder of Create Yourself Co. hired a team of designers to design a website that will: explain to parents what create yourself co is all about and help them book consultations for specific services to potentially grow her business.
Timeline
5 weeks: Nov 2022-Dec 2022
Process
User Flows, Wireframing, Style Guide, Prototyping, Handoff
Tools
Zoom, Figma
Category
Moment Studio Project - Web Design
Team
6 UI/UX Designers
My Role
I was the team lead of the project which meant that:
I was the only one that was in direct contact with the client
I distributed the work to the team and they all reported back to me with questions or finished work for me to review
When a deliverable was finished, I personally turned them in to the client explaining what work we just finished and the purpose of it so the client understood our design process.
Our team split the work that went into each deliverable. We divided ourselves into pairs to complete the project. My partner and I were responsible for all the services pages, contact form, and pre-order book pages.
1. Discover
Initial Kickoff Meeting
In our introduction to the project, the team compiled a list of questions to better grasp what the client was looking for. In our meeting, the main areas we wanted to address were the client’s audience, the long-term goals, and the visual aesthetic of the site.
Who are we designing for?
From the kickoff meeting, we learned that the client’s audience is mostly parents with children who have sensory processing difficulties when communicating with other people. The purpose of the site is to show how Create Yourself Co can help children with social and emotional difficulties and for the parents to book consultations with the creator of Create Yourself for services that pertain to teaching their children these skills.
2. Ideate
User Stories organized by Navigation sections
User Stories
Now that we understood what the client was looking for, my partner and I created user stories to assemble the content requirements and capabilities that users can fulfill when on the site. We showed these to the client to make sure that we’re both on the same page when it comes to the features.
User Flows
As our next deliverable, we created user flows to show how the user can navigate through the pages and the content within. These were created from the user stories as they align with the purpose of the site. There were four main flows: Homepage, Services, About, and the Contact page.
Team Lead Decision: I felt that since the e-book is a digital product and not yet complete from the clients side, it made sense to take it out of the services pages since it is separate from the consultations. My design team agreed with this idea and we implemented this change into the wireframes.
3. Design
Mid-Fidelity Wireframes
Our ideas on the structure and navigation of the site were moved to figma where they can be visually represented as a rapid greyscale iteration. Through a lot of updates from client feedback, we were able to make design choices that improved the user's experience to complete user goals.
Inspiration for UI
Our moodboard can help with making the users experience even more to the liking of the client by matching it with the aesthetic of the creator of Create Yourself Co posters, her professional photos, and even her instagram!
UI Iterations
We showed 5 hi-fidelity iterations to the client that included real text and color. Each iteration had different color palettes and the one she liked the most, we would go off that with the rest of the visual design. The main purpose of this was to show the client multiple versions that used various visual elements that added something unique to the experience(i.e. using the yin-yang symbol on the mission section).
While she chose the middle one as her favorite, she advised us to go with the neutral brown colors that were on the posters she gave us and also change the images for each of the sections! She felt the images didn't match with the service each one was attached to!
Style Guide
The last step before the hifi wireframes. This is a compilation of UI artifacts that help bring the final version of the designs to life such as typography, color palette, buttons, input fields, icons, logos, and images for the site.
The logos, the Tan Pearl typeface and the images were provided by the client. The images were selected purposefully for designated sections which was discussed with the client before finalizing.
HIFI - Home & About
For the homepage, we wanted to draw the user into Create Yourself Co with letting the user know her top 3 services and a testimonial section validating the impact of the company on its clients. For the about page, we used blob shapes to make headers more visually appealing. This page served to explain the value that Create Yourself Co can bring to your children.
HIFI - Book Consultation Flow
This flow was the most important since it enabled the user to sign up for a consultation which would allow Create Yourself Co to grow with more clients.
HIFI - Services
There are 9 services that Create Yourself Co offers so the user can book a consultation to any one of these to learn more about them! At first, the client wanted long blurbs of text to be within each page however, the team knew that the user would have difficulty reading the pages if the information wasn't legible in a user-friendly way, therefore my partner and I decided to use icons and cards to make the information easier to read!
HIFI - Contact Flow
The user can send a message to the company without booking a consultation. The contact form is very similar to the consultation modal with minor tweaks.
HIFI - Pre-Order Book Flow
The client was working on a e-book that she wanted to put on her site, so we did just that. The e-book was separate from all the other Create Yourself Co services so it made intuitive sense to have it on the main navigation bar instead of putting the pre-order on the services drop down menu.
4. Handoff
Prototype
Client Hand Off
For the last deliverable, I made annotations for all the service pages explaining the spacing between each autolayout layer and other visual elements. This handoff served as a guide for the client to make the site themselves or send it to someone else.
Reflection
I learned how to have back and forths with the client regarding design decisions. As a designer, its always best to communicate the rationale behind your work so that the client has a clear understanding of your thought process.
The biggest challenge was that working in a large team caused some hiccups with visual consistency, but we were still able to turn in our deliverables on time! Each member had a different experience level with figma so everyone did an excellent job on communication, letting everyone know when they’ve completed an update and asking for help!