Micha Laforest's Portfolio
A selection of my UX and front-end development projects.
A selection of my UX and front-end development projects.
Marketing website for the ASKmeGOC healthcare web application.
FINAL PROJECT
ASKmeGOC was approaching its release, but there was no dedicated platform to clearly communicate what the product is, who it is for, or how interested users could learn more.
Create a website that introduces the product to its target audience, serves as a centralized source of information, and provides a clear way to contact the team for next steps and implementation.
User research consisted of discussions with the app’s founders (healthcare providers) to understand the anticipated users across three settings: primary care practices, acute care hospitals, and assisted living facilities.
We learned that healthcare providers are familiar with medical terminology and already understand the problem of unclear or missing care plans. Since healthcare providers already have a lot on their plate, it was important to show that the app is user-friendly and easy to adopt, avoiding the hesitation of learning a complex new tool. Because providers frequently discuss care plans with patients, the site needed to show how the app supports and improves these conversations. Privacy and PHIPA compliance were also critical concerns and had to be clearly addressed. Overall, the focus was on clearly communicating the app’s value and benefits to healthcare providers.
The purpose of the Home page is to highlight key information and provide CTA buttons that lead to additional information.This was especially important because it is the first page users land on, minimizing the number of clicks and searches needed to find the information they’re looking for.
This page gives users a detailed step-by-step overview of how the ASKmeGOC app works. It presents a clear visual flow, showing what the app does and helping users determine whether it is a good fit for their needs.
This page provides detailed information about the app’s security and privacy. Since our target users are healthcare providers, patient confidentiality is likely top of mind when evaluating a product like this. Addressing these concerns thoroughly helps give them confidence in the product.
Introduces the team and mission, showing users the app is created by industry professionals.
Answers common questions to reduce hesitation and provide clarity for users.
Gives users an easy way to get in touch with the team.
Certain pages were nested under a menu link to save space and avoid overwhelming the user. This allows users to navigate based on what they’re looking for, without having to browse through too many items at once. A “Get Started” CTA was also added to the menu so users can easily access it from any page, the moment they’re ready.
Since we are primarily in the Canadian market, a French/English language toggle was added to make the site accessible in both languages.
Design direction: Clean, informational, and professional.
The ASKmeGOC team already had a logo, so we used the existing brand colors as the site’s palette to reinforce brand identity. Light grey and navy blue were added to provide subtle light and dark shades where needed, keeping the look aligned with a clean, healthcare-focused atmosphere.
I identified three WordPress templates for inspiration and recreated a page from each in Figma, replacing the content with our own text, images, and brand colors to demonstrate different design options. These were presented to the client and team for selection, and theme #2 was purchased for development.
Because the templates included the types of page sections we needed, I mapped out in Figma which template would be used for each section. I then numbered each template section to map to and work on the content (text and media) that would replace the template's content. Here are a few examples of how I adapted the original template to fit our content.
I included numerous screenshots of the application throughout the site, mostly displayed within a tablet device to reflect the primary way healthcare providers would use it. This also highlighted the app’s user-friendly interface, which is important for our target users. Stock photography was used throughout to maintain a professional, polished appearance.
After development (see the DEV tab for development details), the client began receiving inquiries, and the site is now a go-to reference for users when sharing information about the app with others.
VIEW FINAL PROJECTPotential next steps to improve the user experience:
Promotional website showcasing the final edition of the Audi R8.
FINAL PROJECT
With the 2023 Audi R8 being the final edition, there would likely no longer be a focused digital resource maintained by Audi for fans and potential buyers to explore the model.
Create a focused resource where users can explore the 2023 Audi R8, with tools and information to support discovery and potential purchase, including pre-owned buying guidance, model specifications, and interactive customization of colors, models, and wheels.
Since the Audi R8 is no longer in production, users visiting this site are likely seeking this exact model, making Audi R8 enthusiasts the primary type of user. As a big fan of the Audi R8 myself, I leveraged my understanding of what users care about most — design details, performance, legacy, and the ability to customize and explore different variations of the car.
This type of user knows this car is a major financial investment, so conveying luxury, quality, and high performance is essential to match what users care about when visiting the site. Since a purchase like this requires careful consideration, this user would also value detailed specifications.
There is a good chance this user also has an emotional tie to this car because, why else would they seek out this specific car when there are so many other supercars that come out each year and are brand new?
This page displays key information highlights, making it easy for users to find what they’re looking for. It also includes a couple of CTAs linking to the 2023 Audi R8 page for users who want to explore additional details. Additionally, a historical timeline of the car was added to provide extra value, as this information would likely interest users given their emotional connection to the model.
This page was designed as a resource for potential buyers. The customization tool is repeated here from the Home page to bring all the decision-making tools together in one place. At the same time, this tool may also interest casual browsers, which is why it also appears on the Home page. Since not every user will be looking to purchase, separating the rest of the information from the Home page helps keep the Home page concise and easily scannable.
This page provides a brief summary of the Audi R8 for users seeking a quick overview of its key features.
Design direction: Luxury, sporty, and high performance.
I decided to keep the site's font and element colors neutral to let the high-quality imagery be the primary focus. This minimal approach avoids overstimulation for the user, and maintains a luxury feel.
I wanted the first thing users saw to be attention-grabbing and striking. To achieve this, I used a scroll effect where the car’s headlights start turned off, and gradually turn on as the user scrolls down. The photo I used for the first iteration already had the headlights turned on, so I had to edit them to make it look as though they were turned off. As you can see below, this did not look great, but it gave me a good starting point for the concept.
I then decided to use a photo where the headlights were already turned off, as it made it easier to edit them turned on. This approach worked much better.
I then decided to add animated smoke to enhance the effect. I also replaced the photo with one that better suited the design, resulting in the final design.
I added a custom scrollbar using the Audi rings to reinforce the branding, elevate the design, and create a more polished look. Another reason I decided on a custom scroll bar was to make the site feel premium and distinct from typical websites, reflecting the experience users expect when exploring a luxury product.
Using high-quality imagery was also a key focus throughout the site’s design. This helped reinforce the feeling of luxury.
After development (see the DEV tab for development details), the site offers users and potential buyers useful tools and a one-stop resource for exploring the Audi R8, showcasing key features and trims in a premium, cohesive, and interactive experience.
VIEW FINAL PROJECTPotential next steps to improve the user experience:
Web application that simulates a physical recipe book.
FINAL PROJECT
Physical recipe books take up space, and digital recipes are hard to organize, easy to lose, and annoying to navigate (lots of scrolling).
Build a digital recipe book that makes saving and quickly accessing favorite recipes simple and convenient.
The primary users for this app are home cooks who want to keep track of their recipes. These users often lose track of recipes, forget which cookbook they used, or have to flip through multiple pages to find what they need. Digital recipes aren’t much better for them either, often requiring excessive scrolling. Observing myself, family, and friends highlighted the need for clear, easy-to-access ingredient lists, step-by-step instructions, and accompanying photos.
Users need to be able to:
Design direction: Bright, Summery, Happy.
The core design centers on simulating a physical recipe book with category tabs, creating a familiar and pleasant experience for users. When cooking, users want to feel relaxed and enjoy the process, so the interface avoids feeling overly "techy". Bright colors support this mood, and the lemon logo — used in many recipes — reinforces a fresh, and happy vibe. Decorative tape elements further enhance the feel of a real cookbook.
When designing this app, simplicity was key. The app is designed to make storing and retrieving recipes effortless, keeping the focus on usability and enjoyment.
Acts as the cover of a physical recipe book. It’s intentionally simple to make the experience feel real and to naturally prompt users to explore the category tabs.
Initially, users could enter any text for ingredients and directions, which caused extra work and inconsistent formatting. Switching to an automated format—bulleted ingredients and numbered directions—simplified both creating and viewing recipes, providing a smoother experience. With the old format, users were unsure how to format recipes themselves, so this change improved clarity and usability.
The initial design used a simple list, which became time-consuming as users often had to open each recipe to find certain details (i.e. cooking time, rating, photo, etc.). Switching to a sortable table layout with thumbnail images and key information at a glance made it easier for users to choose recipes quickly and efficiently.
Displays all necessary information for a recipe in one place, minimizing scrolling and keeping it easy to read.
After development (see the DEV tab for development details), the app provides a streamlined digital recipe book where users can quickly save, browse, edit, delete, and access their favorite recipes, with key information displayed clearly for easy reference.
VIEW FINAL PROJECTPotential next steps to improve the user experience:
Marketing website for a donut shop.
FINAL PROJECT
The Donut Shop needed a simple marketing website that clearly promotes the store and its offerings while reflecting its fun, lively, and vibrant atmosphere.
Create a website that allows users to view key information about the donut shop (menu, special offers, hours, contact info) while also conveying the shop’s fun, lively atmosphere and brand.
The primary audience includes individuals seeking a fun donut shop experience with unique offerings and a visually appealing atmosphere. With the influence of social media, many users, particularly content creators and influencers, are drawn to cafés and food experiences that photograph well and are easy to share. Because this audience is constantly exposed to competing content on social media, they typically have shorter attention spans and are constantly on the lookout for new and exciting experiences to document.
Since our primary users are constantly exposed to competing content on social media, the Home page must be attention-grabbing, simple, and present key information quickly. I prioritized digestible, essential information while leaving plenty of space for interactive and visually engaging elements. The goal is to capture the user’s attention through imagery and effects rather than heavy text, letting visuals speak louder than words.
Consistent calls to action appear throughout the page, strategically placed with varied messaging, though all link to the same pages (menu or contact). Different phrases/imagery appeal to different users, casting a wider net. Users are then directed either to information to order or contact the shop, or to the menu, which may encourage them to visit in person.
The Menu page provides quick and easy access to the donut shop’s offerings. Users often struggle to find menus on restaurant websites, sometimes needing multiple clicks, which can lead to frustration. Since the menu is usually the primary reason visitors come to the site, having a clear, dedicated page ensures they can find what they’re looking for efficiently.
The Order/Contact page gives users a simple and direct way to reach the donut shop or place an order.
Design direction: Fun, lively, and vibrant.
I chose bright blue and bright pinks as the brand's colors. This color combo is often used in cotton candy, which are associated with sweet, yummy, and fun vibes, all which encompass the Donut Shop's brand. I also chose to incorporate a donut graphic into the branding as a fun touch, to further convey The Donut Shop's fun and lively brand. Two main logos were created: one designed for wide, horizontal spaces, and another for more square or compact areas. Additionally, the single donut icon serves as a versatile branding element for smaller spaces, such as the menu button.
I wanted the first thing users saw to be attention-grabbing, which is why I created a dynamic donut hero section on the Home page. As users scroll, the donuts move over the logo, creating an interactive experience. I explored different donut graphics but ultimately chose realistic ones instead of cartoons, as they trigger more appetite and accurately showcase the store’s actual products.
Another element near the top of the Home page is the magnetic sprinkles. They respond to mouse movements, moving away as the cursor approaches. Although this detail may go unnoticed by some users, it adds a subtle touch playful element, reinforcing the brand identity.
Large, colorful donut images were used throughout the site to create visual appeal and trigger hunger. They also serve a functional purpose by highlighting current offers, giving users a reason to visit the store if a product or promotion catches their eye.
A custom scroll bar and spinning donut menu were added to align with the brand’s fun personality. These small but playful touches make the site feel unique and memorable, reinforcing the brand identity.
A loading screen with a spinning donut was implemented as the site’s loading spinner, displayed until all DOM elements are fully loaded. This gives users clear feedback that the site is loading, provides an expected behavior, and offers something visually appealing and on-brand while they wait. While no wait is ideal, this approach is better than having users see misformatted or slowly loading content.
Overall, design decisions were focused on conveying the brand’s personality while still delivering key information for a customer visit. By creating a site that’s both fun and functional, users are more likely to share it with friends or on social media, helping the business reach a wider audience.
After development (see the DEV tab for development details), the site delivers an engaging and visually appealing experience. It maintains a consistent and strong brand identity centered on fun treats, while ensuring all important information is clearly conveyed to the user.
VIEW FINAL PROJECTPotential next steps to improve the user experience:
