top of page

Project Overview

Role:

UX researcher, Designer and Developer

Year:

Jan 2022- Apr 2022

Tools:

Figma, Canva, Microsoft 360, Google Workspace and Clipchamp​​​​

Team Size:

4 people

Objective:

Revamping the Horse Rentals website (horserentals.com) to enhance user experience through improved functionality, user interaction, and visual.

Introduction:

Website will utilize the 'Aggregation Model' to serve as a comprehensive resource for horse rentals across the United States. It will feature essential details including available ranches, the types of experiences they provide, their specific locations, contact information, and much more.

Background:

The Horse Rentals is a joint project for the "Interaction Design" course within the Master of Digital Media program. We acquired experience throughout the entire process, from initial concept to final execution, which included user research, creating a user journey map, developing an empathy map and persona, pitching, prototyping, demonstrating, and documenting the project workflow. Additionally, we built a backend using HTML, CSS, and JavaScript for the pages designed in Figma as part of the "Digital Media Environments" course in the same program.

Key Contributions:

  • Concept & User Research: Participated in defining project scope, goals, and target audience; conducted interviews and surveys to gather insights, establishing a user-centered approach.

  • User Journey, Empathy Mapping, & Persona Creation: Assisted in developing a user journey map, empathy maps, and personas to understand and address user motivations, needs, and frustrations.

  • Prototyping & Demonstration: Contributed to building interactive prototypes in Figma, presented the evolving design to stakeholders, and incorporated feedback to improve usability.

  • Mobile Design & User Experience: Took part in designing the mobile version, focusing on an app-like interface to enhance navigation and usability, specifically designing pages from the 3rd onward and the burger menu.

  • Backend Development & Course Integration: Collaborated in creating the backend using HTML, CSS, and JavaScript, translating Figma designs into a functional website while applying skills from "Interaction Design" and "Digital Media Environments."

  • Project Documentation and Presentation: Engaged in detailed documentation of workflow, design decisions, and iterations to ensure project clarity and traceability.

Development Process

Workflow:

  • Project Concept & Scope Definition:

    • Objective: Define the project's purpose, scope, and target audience.

    • Actions: Team brainstorming sessions to clarify the goals and identify the primary user needs and desired outcomes.

    • Outcome: A clear project concept and scope, establishing the foundation for user-centered design.

  • User Research:

    • Objective: Gather insights on user preferences, behaviors, and expectations.

    • Actions: Conduct user interviews and surveys to identify user pain points and motivations.

    • Outcome: Comprehensive user data to inform design decisions.

  • User Journey Mapping, Empathy Mapping, & Persona Creation:

    • Objective: Build a deep understanding of the user experience and motivations.

    • Actions: Develop a user journey map to visualize user interactions from initial discovery to booking; create empathy maps and personas based on user data.

    • Outcome: Detailed personas and empathy maps that guide design, ensuring it aligns with user needs.

cjm.jpg

Customer Journey Map - developed collaboratively in the group and designed by: Soukaina

User Persona - developed collaboratively in the group and designed by Samira Soltani.

​​​​​

  • Wireframing & Prototyping:

    • Objective: Establish the layout, interaction flow, and initial design elements.

    • Actions: Create low-fidelity wireframes and progressively refine them into high-fidelity prototypes in Figma. Include feedback loops to iteratively improve the prototypes.

    • Outcome: Interactive prototypes that are refined based on stakeholder and team feedback.

    • See more: Wireframe, prototype (web)

​​

  • Designing the Mobile Experience:

    • Objective: Adapt the design for mobile to optimize usability.

    • Actions: Design the mobile version as an app-like interface, focusing on ease of navigation and user enjoyment. Specifically design from the 3rd page to the final page, including the burger menu.

    • Outcome: A mobile-optimized design that provides a seamless and intuitive user experience.    

    • See more:  prototype (mobile) â€‹

​

  • Backend Development:

    • Objective: Implement the website's functionality using code.

    • Actions: Develop the backend using HTML, CSS, and JavaScript to bring the Figma designs to life, translating design into a functional product.

    • Outcome: A working backend that integrates the designed pages and interactive elements, following a code structure from the "Digital Media Environments" course.

    • See more: GitHub

​

  • Demonstration & Feedback Integration:

    • Objective: Present the project to stakeholders and gather feedback.

    • Actions: Conduct project demonstrations, showcasing functionality and usability; collect feedback to make further refinements.

    • Outcome: Stakeholder-informed improvements to enhance usability and meet project goals.

  • Project Documentation:

    • Objective: Maintain a clear and thorough record of the project workflow.

    • Actions: Document each stage, including key decisions, iterations, and changes, to provide transparency and track progress.

    • Outcome: A comprehensive project record that captures the entire development process and rationale for design choices.

  • Final Review & Submission:

    • Objective: Ensure the project meets all requirements and is polished for presentation.

    • Actions: Conduct a final review of both the mobile and desktop versions, making any last adjustments as needed.

    • Outcome: A complete, user-centered project ready for presentation or deployment.

Challenges & Solutions:

  1. Disorganized Content Layout

    • Solution: Simplified navigation with clear categories (“All Things Riding,” “Top Riding Destinations,” etc.) for intuitive access, particularly in a mobile-optimized, app-like design.

  2. Excessive and Irrelevant Content

    • Solution: Removed non-essential content (e.g., horse dating) and focused on relevant sections to streamline user experience.

  3. Navigation Difficulties

    • Solution: Introduced a LATCH-based search and filter, plus an on-site Navigation Map, giving users control over content exploration.

  4. Inconsistent Visual Theme

    • Solution: Applied a cohesive, nature-inspired palette with high-quality images and consistent fonts, creating an appealing, professional design.

  5. Backend Integration & GitHub Connection

    • Solution: Developed a functional backend with HTML, CSS, and JavaScript and maintained code version control and collaboration through GitHub.

Future Work:

​Future improvements include adding personalized user accounts to save favorite locations and view booking history, as well as enhancing search with AI-driven recommendations. Additional features, such as virtual tours of destinations and integrated booking and payment options, will create a more seamless and interactive user experience.

Contact Information:

Please contact me at samira.soltani@torontomu.ca

bottom of page