UX/UI Website Redesign
Redesign Cannabis Lab Website
My Role
User Researcher
UX Designer
UI Designer
Tool Used
Figma
Miro
WCAG 2.0
Canva
UXtweak
Team
Project Manager
2 Developers
4 Designers
Project Timeline
Aug 2024 - Nov 2024
Background
I collaborated with Episode 1, a Cannabis Testing Lab in Thailand, redesigning their website. The project manager wanted the team and I to update the site's user experience, functionality, and overall look. The project focused on creating a modern, intuitive platform to showcase the company's testing services and technologies, meeting the company's growing needs.
Challenges
The site faced outdated design, confusing navigation, poor readability, and broken elements that disrupted usability. The main challenge was enhancing the user journey, simplifying content, and resolving technical issues to deliver a modern, accessible design.
What I Accomplished
1. Conducted website analysis to identify pain points such as poor navigation, unclear messaging, and broken interactive elements.
2. Developed and tested new interface designs to enhance readability, visual hierarchy, and content discoverability.
3. Collaborated closely with developers to fix technical issues and ensure a seamless implementation of design updates.
4. Delivered a streamlined, modern design aligned with the company vision.
01. RESEARCH
Understanding Business Goals
We started by understanding Episode 1's business goals to align the redesign with their vision. Key objectives included:
1. Improving the user scheduling experience
2. Building a trustworthy and professional brand image
3. Attracting and retaining clients through a modern design
Meetings with the project manager clarified these priorities, guiding us toward a design that reflects professionalism and supports growth.
Streamline Scheduling
Trustworthy branding
Attract More Clients
What Our Users Said
To better understand the picture, we interviewed customers to explore their interactions with the site, highlighting what worked well and uncovering key pain points.
"I found it hard to figure out what the company actually does right away."
"Overwhelming text, and sometimes it was hard to read over the images."
"I struggled with the navigation it wasn't always clear where to go."
"Some of the buttons didn't work, and it made the experience frustrating."
"The site didn't feel modern or polished, it didn't reflect professionalism."
Analyzing The Current System
Alongside user interviews, I analyzed the current system to identify usability issues and areas for improvement, gaining a deeper understanding of user challenges.
Below is an example of an annotation from the 'Home' page.
Text Over Image with Poor Contrast
Issue: Text placed over images has poor contrast, making it hard to read.
Solution: Add overlays (like semi-transparent backgrounds) behind the text or choose images that allow for better contrast. Alternatively, reposition the text or image to ensure readability.
Testing The Navigation
Building on system analysis insights, I tested how well users navigated the site. Using UXtweak, I conducted a tree test to evaluate the current information architecture and identify areas where the navigation could be improved for a more intuitive user experience.
This was the current information architecture of the website:
Result Analysis
1. Only 30% of tasks were completed correctly, indicating significant usability issues in the navigation.
2. Task 1: 6/10 participants selected "Contact Us" instead of "Guidelines" when they had questions about product requirements
3. Task 2: 6/10 participants selected "About Us" instead of "Contact Us" or "Guidelines" if they have questions regarding the company's information
Core Insight
The website's structure and design lack clarity and usability. Users are unable to navigate seamlessly, which highlights the critical need for a comprehensive redesign that focuses on improving navigation, content clarity, and a user-centered experience while reflecting the company's professionalism and goals.
02. DEFINE & STRUCTURING
Testing for Navigation Clarity
To improve navigation, we redesigned the information architecture based on insights from the first tree test, which revealed that users struggled to find key information.
Changes We Made:
-
Removed "Home"
-
Made "Guidelines" a main navigation item
-
Renamed "Submission Form" to "Schedule Testing"
-
Removed "FAQ"
A second tree test validated the changes, showing a significant improvement in success rates and confirming a more intuitive navigation structure.
Our new information architecture:
Result Analysis
1. 80% of tasks were completed correctly, showing significant improvement in navigation usability.
2. Task 1: 7/10 participants successfully navigated to "Guidelines," indicating the updated structure effectively directed users to the correct page for product requirements.
3. Task 2: 9/10 participants successfully selected "Schedule Testing," demonstrating that the new label improved clarity and reduced confusion.
Prioritizing What Matters
Once we fixed the navigation, we prioritized features with the MoSCoW method, ensuring we focused on impactful changes while maintaining project clarity and efficiency.
03. DESIGN
Responsive Wireframes + Prototype
We started by designing wireframes that prioritized simplicity, functionality, and responsiveness to ensure a seamless user experience across devices. Once the wireframes were finalized, we transitioned to prototyping, collaborating closely with developers to align design elements with technical feasibility. This phase allowed us to refine interactions and ensure the prototype met both user needs and the Episode 1 team’s expectations.
Desktop
Tablet
Mobile
04. UI + BRANDING
Brining Design To Life
With the core structure established, we moved on to bringing depth and personality to the website. Using the provided colour palette, I developed a cohesive design system aligned with the brand. Collaborating closely with the Episode 1 team, I refined the visuals to create a polished and consistent design that met the project's goals.
05. TESTING + ITERATIONS
Testing Our Solution
We began usability testing to validate the design and refine the user experience. Over several testing sessions, we worked with a total of 20 participants to evaluate the flow of scheduling product testing and identify areas for improvement.
Key Takeaways
Button Visibility:
4/5 Users
requested stronger color contrast for action buttons.
Scheduling Accessibility:
4/5 of Users
wanted a “Schedule Testing” button added directly after “Amount To Send” to reduce unnecessary scrolling.
Service Descriptions:
5/5 of Users
users recommended adding descriptions for each service to enhance clarity.
Additional Messages:
3/5 of Users
requested an option to add custom messages in the submission form for additional details.
Refining The Design
After completing usability testing, we focused on turning user feedback into actionable improvements. From clearer buttons to a simpler flow, each update made the design more intuitive and seamless, bringing it closer to meeting user needs. Here are some of the essential changes we made:
Fixing Color Contrast
Problem: Users had difficulty spotting key buttons due to low color contrast, with 80% of users requesting more distinguishable colors.
Solution: Updated button colors for higher contrast, making them easier to identify.
Before: Buttons blended in, causing navigation issues.
After: High-contrast buttons enhance visibility.
Addressing Unclear Service Description
Problem: Lack of explanations for each service left users unsure about available options; 100% of users requested added descriptions.
Solution: Added brief explanations for each service.
Before: Service details were unclear, causing confusion.
After: Clear descriptions help increase clarity
Inconvenient Schedule Testing Placement
Problem: Users found it inconvenient to scroll back up to find the “Schedule Testing” section, with 80% recommending a better placement.
Solution: Placed “Schedule Testing” section directly after “Amount To Send.”
Before: Extra scrolling interrupted the flow.
After: Adding this section minimizes clicks
06. FINAL UI
07. FINAL THOUGHTS
Next Steps
With the design phase complete, the development team will now build the desktop and responsive versions. After launch, I plan to:
1. Monitor and analyze user feedback to identify recurring patterns and areas for improvement.
2. Address pain points and resolve complaints to enhance user satisfaction and maintain trust.
3. Conduct additional usability tests to ensure the site adapts to evolving user needs and stays aligned with best practices.
By continuously refining the experience, the site will remain intuitive, responsive, and aligned with user expectations over time.
What I learned
Lesson 1: Mixing Bussiness and Design
Redesigning the Episode 1 website taught me to think beyond aesthetics and usability. It wasn't just about making the site easy to navigate. I also had to present the company as trustworthy and forward-thinking. This project showed me how to balance user-centred design with business strategy, ensuring the website met its audience and company needs.
Lesson 2: Balancing Priorities
Working closely with both the design and development teams, I learned the challenge of balancing multiple priorities. Between ensuring stakeholder needs, keeping timelines, and iterating based on feedback, I developed a more flexible approach to project management, ensuring the final product was both functional and user focused.
