BFree Nutrition
A website designed for a nutritionist wanting to create a virtual space to give information about services they provide, able interested prospective clients to connect with the owner and a place to post blog entries.
This project is still in progress and has not been completed yet.
Initial meetings established the look the owner was wanting to achieve with their website, giving examples of other websites displaying a simple modern look along with other nutritionist sites displaying color with healthy natural foods. The owner was wanting to merge the simple modern feel with color and wanting to incorporate royal blue to pay homage to their family. I then created a moodboard to refer back to, so that I can keep in mind what the owner was wanting the feeling of the site to come across and draw inspiration from the specific aspects or features that they liked.
Sketching.
I presented 4 sketches to the owner and discussed which details did they like out of each one, so that I then can create a few low fidelity mockups to follow. Below are some key points that were to be included in the next steps of the design process.
Wanting to keep a big photo with a layover of text.
All social media accounts at the footer are to be written out so that their clients who are older know what they stand for rather than seeing the icons.
Keeping the page flow and if people are wanting to read more than a small description that is given then having a call to Action (CTA) would be very beneficial and can track what people are interested in when visiting the website.
Will keep the about section short with not too many photos of themself.
Unsure of the overlay of a quote with the photo.
Creating the Style Guide.
I pulled together various color palettes from nature and organic colors from vegetables and fruits. The reason for creating this deliverable was to make sure that the color palettes were to the owners liking and to give an idea to them what the palette looks on a light and dark background.
The owner and I at this point discussed her current clientele before taking the next steps of designing. It was then made apparent that the majority of their current clientele is of older age and some may have limited reading visibility due to health concerns they are addressing.
With this knowledge I informed the owner that with such bright colors being involved it may be difficult for their clients to see the typography on certain backgrounds and that the color palette will have to be considered with WCAG standards. After presenting a few typography choices we ultimately decided to go with Ubuntu for larger font giving that organic modern feeling and Source Sans Pro for text. Regarding the color of the site, a blue variation color palette (located bottom right) was chosen to move forward with when creating the high fidelity design.
Low Fidelity Design.
After some discussion of being presented with the low fidelity mockups it was decided that we were no longer doing the quote over the photo since it was too distracting from what the owner wants the clients to focus on. However instead it was discussed to include perhaps a few testimonials of previous or current clients regarding their services expanding no more than two - three sentences. This Carousel of 5 will be shown with three consistently in view; one being visible to read and two others slightly showing off of the webpage, so it can intrigue the new clients to read more.
The “About” pages were created to give the owner a few options since they do not want too many photos of themselves on the site. Having the option being presented and seeing what the site can potentially look like gave the owner some thought for more photos of them or of their work to be displayed in the future.
No official decision has been made for the direction of the “About” page, as this is still in progress.
Finalizing the site layout in both a light and dark format the site still felt like it was missing a final touch to entice the patients to keep scrolling down. Referring back to the moodboard it reminded me that the client wants to incorporate vibrant colors and healthy living but not too much in an overbearing way, this gave me the idea to create a transparent photo of healthy vibrant fruit as a background. Having this array of fruit fall from left to right was intentional to create a natural eye movement for those who read in that direction.
I utilized Web AIM to check the WCAG standards were in compliance when designing throughout the High Fidelity mockup. This was to ensure that the patients with visual impairments were considered when it came to the color of the background interacting with the typography size and color.
Waiting to hear back from the owner who is sharing this deliverable with their peers. If they are wanting to go forward with the light or dark format.
Hi Fidelity Mockup.
With the different versions of the site that you see below I experimented with the different headers size and transparency, this was to explore what could be the best visually appealing. When first creating these designs there was a feeling of unutilized space particularly with the bottom of the page. When reiterating I kept in mind what most new patients want to be informed about.
1.) They want to know the services and the Nutritionist qualifications as they are volunteering their health information and seeking change in their life; along with contact information.
2.) Most people are searching for feedback from others about their personal experiences of the services.
3.) Any additional information such as social media accounts, video blogs or written blogs.
With these in consideration I rearranged the website to take into account the most important at the top of the page and the least towards the bottom, which then gave us the structure of the site layout.
Next Steps.
This project currently is waiting on feedback from the owner as the last deliverables were received with high approval and no additional edits to be made other than the owner needing to decide whether they wanted to go forward with the light or dark format. I highly encouraged the owner to have these final deliverables shared with peers and colleagues from their field, so that there can be some improvements and so that I can apply the final decisions to the “About” and “Blog” pages.
The next steps are taking the design into Wordpress and incorporating the CSS coding that I’ve been teaching myself to help with page transitions, embedding other sites, and incorporating plugins to keep track of analytics.