CHALLENGE
Redesign an ecommerce website for Aylorien, vegetarian vitamin company.
GOAL
Optimize SEO, codify the brand style, and allow the user to interact with the product information.
TOOLS
Adobe XD
Photoshop
Visual Studio Code
Github
UX design
UI Design
PROCESS
This project was divided into 3 phases and completed over the course of six weeks.
Phase 1: Design
Typography
Color palette
Wireframes
Prototypes
Phase 2: Develop
HTML
CSS
Javascript
Cross-browser testing
Phase 3: Launch
Deploy
Test
Optimize
DESIGN
Typography and Color Palette
The client provided me with product photos which I used to generate the color palette.
Aylorien is all about clean ingredients to provide energy and vitality to vegetarians. My concept for the visual design was emphazing clean, crisp lines but also rounded for a subtle organic feel.
For this reason, I chose Nunito for the primary font (sans-serif with rounded points on characters). I chose Nunito Sans as a supporting font to create bold headings.
WIREFRAMES
After sketching low-fidelity wireframes to create a basic layout, my goal with the high-fidelity wireframes was to experiment to understand in more detail the aesthetic the client was hoping to achieve.
I was basically throwing things at the wall to see what stuck. I went a little heavy on the gradients, inspired by the aylorien label.
Turns out, the client didn't like gradients that much and felt the overall scheme was too "whimsical." I totally got what she meant, so I took her feedback and made adjustments for the high-fidelity prototype.
These changes were exactly what the client wanted, so with her approval I moved into the development phase.
DEVELOP
I chose to build this website from scratch with HTML, CSS and JavaScript instead of using a website builder--partly for the learning challenge, but also because I knew she wanted some very specific elements. In and in my experience with website builders, templates can be really frustrating and difficult to customize. Plus, she stressed that she wanted it to be fast so I wanted to make the code as light as possible.
Take a closer look at my code:
GITHUB REPOSITORYHTML
I began with building the content of the website using the copy and images provided by the client. I used semantic HTML with SEO in mind.
CSS
I began styling for mobile devices using flexbox which made adapting to tablet and desktop breakpoints very easy. I made a point to use CSS for animations wherever possible to keep the code light and quick. For example, I used only HTML and CSS for the FAQ section.
JAVASCRIPT
I used all vanilla JavaScript, again in the interest of creating a lean and fast experience. I used a few functions to create the navigation toggle on the mobile, the automatic/manual carousel for the homepage hero section, and the Product images on the Shop page.
LAUNCH
DEPLOY
After transferring domains and conducting cross-browser testing on the major browsers and different devices, I deployed the website on shared hosting with GreenGeeks (highly recommend!)
TEST
Normally, I would conduct UX testing before developing and deploying. However, in this case, the client needed the website as soon as possible. I chose to defer UX testing until after deployment.
The 5 participants of different ages tried purchasing and learning more about the product. Fortunately, no major changes were needed, but I did discover that participants had a difficujlt time tracking which page they were on. So, I made a tiny adjustment by bolding the current page in the header.
OPTIMIZE
The client's main priortity was optimizing her site for search engines. I used several tactics for this, including:
- Semantic HTML
- Titles and meta descriptions
- Structured Data (JSON-LD)
- Mobile-friendly design
- Sitemap
In addition to these, I used Google Search Console to validate that these steps were working by conduting rich results testing, mobile-friendly testing, and submitting a sitemap.
Lastly, I installed Google Tag Manager and Google Analytics. Though these tools are outside of the scope of thhis project, I wanted the client to have them ready to go for future marketing efforts.
WHAT I LEARNED
Despite the nerdy enjoyment of creating a bespoke website from scratch, in subsequent projects, I've switched to using Wordpress to build sites to save time. Finding the balance between the ability to work quickly while customizing is key--Wordpress does both!
aylorien.com ↗