User Experience – JUSTIN.L https://ljustin.com // LJUSTIN.COM Tue, 28 Feb 2023 21:49:45 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.2 https://ljustin.com/wp-content/uploads/2022/08/cropped-Asset-7-32x32.png User Experience – JUSTIN.L https://ljustin.com 32 32 Improved a fitness platform to better connect coaches and clients https://ljustin.com/project/fitinio/ Wed, 22 Feb 2023 22:23:23 +0000 https://ljustin.com/?post_type=ohio_portfolio&p=224595

👨‍💻 What we did

We have created an interactive, personalized experience for users to navigate a variety of inclusive fitness classes. The design choices were based on the diverse needs of all minds and bodies, we made the website easy to navigate, informative, and interactive.

  1. Based on survey results, the following are the top three most commonly used discovery preferences.
  2. We have consolidated the main menu options to the corner for improved usability.
  3. To enhance search usability, we have prioritized the search bar to be the first element users see upon page load.
  4. To encourage users to try our new interactive tool, Fitfinder, we have implemented a prominent call-to-action banner promoting its use. Fitfinder is a user-friendly tool designed to help users find the most suitable fitness or event options based on their preferences and needs.
  5. We have implemented a light colour palette that contrasts with the background, making it easier for users to identify and engage with the CTA.
  6. By prominently displaying the logos of our clients, we aim to enhance trust and credibility between users and Fitin. Including the logos of our notable clients helps to establish a sense of authority and industry expertise, ultimately increasing user confidence in our services.
  7. Our ‘Find the Best Deals’ section is a highly popular choice to promote ongoing sales. By prominently featuring our current sales, we aim to provide users with a clear and engaging way to discover the best deals available, ultimately encouraging them to make a purchase.
  8. We have introduced a new card design that prominently displays key information, such as reviews, intensity, recommended user, and labels like ‘Support Pregnant’ or ‘Injury Recovery’.
  9. Introducing our ‘Trending this Season’ section, which is a highly effective way to promote seasonal products and encourage user engagement.
  10. We have consolidated and simplified the placement of important links, such as FAQ, backend login, privacy policy, terms and conditions, to improve the overall user experience.

🔨 How we did it

To improve the website, we did a thorough analysis of its strengths, weaknesses, and how it compares to competitors. We also asked users about their needs and preferences. Using this information, we created a content strategy, restructured the website, and created user personas and journeys. All of our work was focused on making the website more user-friendly and appealing to a diverse audience.

❓ Research

Problem Definition –

  1. One of the main challenges Fitin faced, given our focus on inclusivity, was the lack of discoverability and categorization on our platform.
  2. How can we differentiate ourselves from other fitness and wellness competitors?
  3. What are effective strategies to attract more customers from both the consumer and business sides of our platform to address health challenges?

Current State Analysis

We conducted a comprehensive analysis involving gathering information about the existing product to identify improvement areas and innovation opportunities.

Competitive Analysis

We completed a thorough competitive analysis to gain insights into the strengths and weaknesses of various fitness services in different markets. This analysis provided us with a deep understanding of the competition, enabling us to identify opportunities for innovation and areas where we can differentiate our offering. By analyzing the fitness services currently available in the market, we were able to gather valuable information on the features, user experience, and user feedback of our competitors.

Scenario-driven User Journey: Find UX pattern

We used the user journey to collect all the necessary information for carrying out our inclusive fitness and wellness recommendations that cater to different types of users, including young bodies, aging bodies, pre-and post-natal bodies, and differently-abled bodies. We categorized the relevant fitness information over time and incorporated it into each step of the user journey, ensuring that our recommendations are accessible and appropriate for all users. This helped us better understand how much information should be considered to make the right decision for each unique user, promoting a more customized and tailored fitness experience that is inclusive and welcoming to everyone.

This is where the concept of “FitFinder” came from. We wanted to create a platform that not only connects users with fitness programs that meet their specific needs but also helps them discover new opportunities and experiences that they may not have otherwise found. “FitFinder” embodies our commitment to inclusivity and accessibility, making fitness and wellness available and welcoming to everyone.

After connecting with our actual users, we conducted interviews, surveys, and consulted with fitness professionals to create a set of questions that can help users navigate the Fitin platform. These questions provide helpful suggestions and guidance to users, making it easier for them to find the right fitness and wellness programs to meet their unique needs. This approach is just one of the ways we’re working to make fitness and wellness accessible and inclusive for everyone on our platform.

Final outputs: a new user journey that makes sense for diverse users; a prototype.

What we discovered unexpectedly:

One valuable insight we gained through testing was that people could be sensitive when asked about their age. We received a lot of feedback on this issue, and after careful consideration, we decided to remove the age question from our platform. This decision was made to ensure that our platform is inclusive and welcoming to all users, regardless of age or any other personal characteristic.

❗ Delivering

Prototype tested with 34 real users, before and after the changes.

Impact:
The tool we developed for Fitin had a significant impact in just 4 months. Prior to implementing the tool, users were spending an average of 1 minute and 30 seconds on our platform. After implementing the tool, the average time spent on the platform decreased to just 52 seconds. This improvement in efficiency is a testament to our commitment to providing a seamless and intuitive fitness and wellness experience for all users on our platform.

Enhancing User Experience through a Comprehensive Content Plan
We understand the importance of providing accessible and relatable content to diverse user groups. To achieve this for our client Fitin, we proposed a comprehensive content plan that leverages multiple communication channels to reach users effectively.

We conducted a thorough analysis of the existing sitemap to identify areas for improvement and restructuring of content. Additionally, we developed a writing guideline that ensures consistent content creation and promotes overall website coherency.

Our proposed content plan also includes the creation of relatable and engaging content that resonates with our target audience. By considering the needs and preferences of different user groups, we strive to ensure that our content plan enhances the overall user experience and encourages user engagement.

]]>
Enhanced Loosh Brands’ Website Usability and User Experience https://ljustin.com/project/loosh/ Mon, 20 Feb 2023 05:15:22 +0000 https://ljustin.com/?post_type=ohio_portfolio&p=224712

👨‍💻 What I did

To better showcase the company’s identity and products, I implemented a number of key improvements. Here’s a summary of what I did:

  1. Rewrote the headline to be more concise and clearly convey Loosh Brands’ purpose.
  2. Rewrote the subheadline to provide support for the headline and explain who Loosh Brands is.
  3. Added a “Our Family of Brands” section to give users an overview of Loosh Brands’ identity and draw a connection between the user and the brand.
  4. Changed the logos’ appearance method from a carousel to an overview look, making it easier for users to view.
  5. Added a brand new section showcasing all of Loosh’s products, allowing users to easily browse and discover the different offerings.
  6. Added an article section to increase recognition and establish the company’s credibility.

7. Created a brand new page showcasing all of the products, using a WordPress plugin called WooCommerce, and set up the entire backend for the company to add products in a simple and quick manner.

8. Created easy-to-use navigation that allows users to quickly and easily find what they are looking for.

9. Added a breadcrumb feature to help users navigate the website and find their way back to previously visited pages.

10. Implemented an image preview and lightbox feature, allowing users to view product images in greater detail.

11. Included basic product information, such as THC content and pack size, to help users make informed decisions.

12. Included a clear call to action for users to purchase if they are interested.

13. Provided detailed product descriptions to help users better understand each offering.

14. Added a “You may also like…” section to help users navigate Loosh Brands’ offerings and discover related products.

👨‍💻 Creative Process

To begin with, I identified several areas for improvement and made changes through the website’s backend (WordPress). The first and most significant issue was that their website was not searchable through Google, due to a setting that had accidentally been turned off.

I also based my approach on the Usability Heuristics for User Interface Design, which helped me to improve the website’s usability in a number of ways. For example, I suggested shortening the headline to make it more straightforward and easier for first-time visitors to understand, and displaying all the brands at once on the desktop website. I also recommended showcasing the signature products in a grid view, with product names, images, and cannabinoid information.

Other improvements included adding a dedicated page to showcase all of the products on offer, adding a section to include resellers/shops and links to online stores, and adding a news coverage/article section to increase credibility. Finally, I recommended adding an overview of the brand, with clickable icons that would automatically scroll to the corresponding brand and display their social media handle.

After many rounds of discussion and meetings with various colleagues at Loosh Brands, I successfully implemented these changes, resulting in a much more user-friendly and visually appealing website. This project allowed me to gain valuable experience in web design and user experience, and I am proud to have contributed to the success of the Loosh Brands website.

]]>
Designed 3D Storyboarding Software for Creative Professionals https://ljustin.com/project/storylizer/ Wed, 01 Feb 2023 18:52:24 +0000 https://ljustin.com/?post_type=ohio_portfolio&p=224738

🔥 Motivation

As an experienced videographer, video editor, and motion designer for the past decade, it is surprising to note the lack of adequate tools for storyboarding in the production process. Despite successfully transitioning from a hobby to a professional environment, I’ve noticed this gap and believe it presents an excellent opportunity for technology to revolutionize the storyboard creation process, making it easier and more accessible for indie filmmakers, art directors and casual videographers.

👨‍💻 What I did

Storylizer is a truly unique storyboard application that provides an affordable and user-friendly 3D storyboarding solution. Our goal was to minimize friction between creativity and storyboarding while making the process faster and more intuitive for users.

To ensure an optimal user experience, I implemented several key UX decisions. Here’s a summary of what I did:

  1. Established a clear brand identity and branding, which also serves as the “Home” page for the user, with consistent navigation position for easy access.
  2. Designed a project management page that prominently displays recent, shared, and team projects for easy project management.
  3. Implemented various tips throughout the app to help users navigate the app’s many functions.
  4. Added a search feature to allow users to easily locate files or projects.
  5. Provided a quick shortcut for users to start a project from scratch, saving time and effort.
  6. Created a project filter to make it easier for users to sort and filter their projects.
  7. Designed project cards that display basic project information and collaborators in a visually appealing way.

8. Implemented a top navigation bar that is easily recognizable and consistent throughout the app.

9. Created an interactive menu for user-imported media to make it easy to work with these assets.

10. Added the ability to add captions or on-screen copy to improve communication with clients.

11. Highlighted the “Edit in 3D” feature, which is the main feature of the app, see points 18-22 for more.

12. Included a large preview window that provides a video editing-like experience.

13. Implemented basic frame and effects control, similar to a video editing app, to provide more control over the storyboard.

14. Displayed the duration of each frame and provided thumbnail previews to aid in navigation.

15. Designed a modern and clear movie-script-like style that separates scripts from screens, and added an “I” icon to manually insert separation.

16. Created a video editor-like experience with a play head and playtime to provide more control over the storyboard.

17. Added a timeline view to provide a quick and clear overview of the storyboard.

18. Implemented a 3D asset tab, which allows users to browse our 3D assets market to simplify the storyboard creation process.

19. Clearly indicated when the user is in “Editing in 3D” mode to reduce confusion.

20. Provided a 3D view of the current storyboard, which offers a clear indication of the setup for lighting and characters.

21. Added a layer panel to easily manage layers within the storyboard.

22. Included quick tips to provide helpful information throughout the app and improve the user experience.

23. Created a sharing menu that can be accessed from anywhere in the app to simplify the sharing process.

24. Implemented a link access feature and invite feature to allow for collaboration on the project.

25. Added file export options for traditional video editors and the ability to upload directly to YouTube for easier sharing.

🔨 Creative Process

Driven by my passion for Storylizer, I conducted thorough research and surveys to determine the validity of the product idea. To do so, I interviewed ten industry professionals, mentors, and college professors with experience in video production environments and surveyed an additional fifty individuals. Over 86% of respondents were not aware of a similar tool and found the idea to be valuable.

During this research phase, I performed comprehensive market research on existing storyboarding products and services, ultimately discovering a gap in the market for a 3D tool that was accessible to regular users, rather than just large production companies.

I learned that Marvel Studios and other companies use a similar production method called “pre-visualization” at higher production levels, where they build 3D scenes before filming each frame with an actual camera. With this information, I knew that my idea was both possible and valid, leading me to move forward with wireframing and user testing.

After numerous iterations and user feedback from industry professionals, I created a prototype for Storylizer that addressed a problem I had struggled with for years, as I’m not proficient in drawing. The result is a simple, beautiful design that combines my years of experience with professional creative software and a great user experience, giving me an edge and a head start in creating a valuable creative tool.

📖 User Story

Meet David, an aspiring filmmaker who is using Storylizer to bring his latest project to life. David loves the creative process of storytelling, but he often finds himself bogged down by the time-consuming process of traditional storyboarding. With Storylizer, David can quickly and easily bring his ideas to life by using text input and drag & drop assets. The ability to shift camera angles and focal lengths allows him to better visualize his story, and the intuitive design of the app makes the process much more enjoyable for him.

Thank you for your interest!
Click here for a full presentation, and click here for the prototype.

]]>
Todosy – Rethink Productivity https://ljustin.com/project/todosy/ Tue, 01 Mar 2022 09:37:24 +0000 https://ljustin.com/?post_type=ohio_portfolio&p=224259

👨‍💻 Role

As the user experience designer and researcher, I was responsible for creating wireframes, personas, and conducting user testing to ensure that Todosy meets the needs of the target audience.

🔨 Tools

Adobe XD was used to create wireframes and prototypes for Todosy.

❓ Problem Definition

The current problem with most productivity tools is that they either offer a cluttered and complicated to-do list or a basic calendar with limited functionality. This makes it difficult for users to stay organized and on top of their daily tasks and appointments.

❗ Task

The goal of Todosy is to provide a solution to the problem of cluttered and complicated productivity tools. By combining the best of both worlds, Todosy makes it easy for users to keep track of their daily tasks and appointments in one place, easily and efficiently.

🖌 Design

During the design process, I took into consideration the user’s needs and preferences. I designed Todosy to be user-friendly and intuitive, making it easy for users to keep track of their daily tasks and appointments. The app features a clean and organized interface, and allows users to add tasks, set reminders, and view their schedule all in one place.

📖 User Story

Meet Sarah, a busy mom who’s always on the go. With Todosy, she can easily keep track of her daily tasks and appointments in one place, without having to switch between different apps. She can set reminders for important tasks and appointments, and view her schedule all in one place. Todosy makes it easy for Sarah to stay organized and on top of her busy schedule.

🔖 Summary

Todosy is a unique productivity tool that combines the best of both worlds, making it easy for users to keep track of their daily tasks and appointments in one place. With its user-friendly and intuitive design, Todosy is the solution to the problem of cluttered and complicated productivity tools.

]]>