So Connected Mental Strength Coaching and Personal Training website
Roles: Information architecture/design, interaction design, user experience design, visual design, art direction, photography. Tools: Adobe Illustrator, Adobe Photoshop, Adobe Dreamweaver, Sublime 2, development (HTML/CSS).
When Stacey came to me to design a website, I was excited about the possibilities. At the time, her business was still in its early years and her biggest challenge was communicating exactly what skills and services she brought to the table. Subsequently, our goal for the So Connected website was to focus on providing clear-cut content to potential clients to help build the business. Additionally, the thought was that the site would mostly be static (not a whole lot of updates), so it could be created by a developer from scratch in HTML and CSS based on my mockups/prototypes.
After the developer did his part, I took over the maintenance and modification of the site’s HTML and CSS. Around this time I was doing something similar with a site project at my day job, so the two projects combined helped me to really hone my HTML and CSS skills.
Notes and sketches from the early stages of designing the So Connected website.
Roles: Information architecture/design, interaction design, user experience design, visual design, art direction, photography. Tools: Adobe Illustrator, Adobe Photoshop, Adobe Dreamweaver, Sublime 2, development (HTML/CSS).
Creating the first So Connected Mental Strength Coaching and Personal Training website was a long process, but boy, was it fun! So Connected is a small business that uses a combination of mental strength coaching and personal training to help clients connect with themselves. It’s so small, in fact, that it only has one employee - owner and operator Stacey Herman.
When Stacey came to me to design a website, I was excited about the possibilities. At the time, her business was still in its early years and her biggest challenge was communicating exactly what skills and services she brought to the table. Subsequently, our goal for the So Connected website was to focus on providing clear-cut content to potential clients to help build the business. Additionally, the thought was that the site would mostly be static (not a whole lot of updates), so it could be created by a developer from scratch in HTML and CSS based on my mockups/prototypes.
After the developer did his part, I took over the maintenance and modification of the site’s HTML and CSS. Around this time I was doing something similar with a site project at my day job, so the two projects combined helped me to really hone my HTML and CSS skills.
Notes and sketches from the early stages of designing the So Connected website.
Early site planning
Early site planning.
Early sketches of the site.
Early sketches of the site.
My initial sketches on what photos to use on the site. Our thought was that providing a good visuals of So Connected owner Stacey Herman in action with current clients would help show potential clients what So Connected is all about. Each page has four photos in a sliding rotator.
Early site header mockups created in Illustrator. In terms of design, I had previously created some printed materials for So Connected that used colorful photos, so I wanted to try and carry this theme into the web design.
One of the later stage mockups. The final version saw the addition of an e-newsletter sign-up form on the right-hand side instead of the icons seen in this draft.
Edits between myself and the client on content. We were pretty old school in how we did it (printing off copies for markup).
The site as it exists today. During the production stage, I worked with a developer to create the HTML/CSS and to make the site responsive.
My client and I have recently decided to overhaul the So Connected brand with a website redesign. Since the first/current site was created, the needs of the business have changed. The owner now sells quite a bit of product (like custom made essential oils) to her growing Facebook groups and wants a full, online store. She’s also ready to start adding self-penned content (help articles, etc.) to the site herself, so we’re looking at using a platform that would allow her to easily make minor edits.
We’ve decided to go through as much of the UCD process as we can, so we plan to conduct lots of research, analysis and user testing. New info and screenshots will be added to this page as they are completed. Stay tuned!
We’ve decided to go through as much of the UCD process as we can, so we plan to conduct lots of research, analysis and user testing. New info and screenshots will be added to this page as they are completed. Stay tuned!