Skip to main content

We’re working to redesign our LMS experience and now that we have our initial designs structured out in Figma, we’re trying to determine the best way to bring those designs to life in the Thought Industries Platform.

The Challenge:
To start, Helium just isn’t in the budget so it’s not something we can consider for this project. So it sounds like most of our work will need to happen within CSS code.

While we have Chameleon to reference in our sandbox, the dev team of the design company we are working with shared the initial impression that getting all the TI LMS elements (pages, widgets, buttons, etc.) updated to the new designs will likely take a significant amount of time simply due to the breadth of elements across the system. I want to say the current estimate is somewhere around 300 hours (though that could change as they get more familiar with the system).

Questions:

Are there any folks out there who have done a significant design overhaul within their instance of Thought Industries? If so:

  • Do you have any tips or recommendations to consider before delving into this work?
  • Were there any development tools or resources you found particularly helpful when implementing the design into the LMS?
  • Anything specifically that helped reduce how far into the weeds you had to go in terms of dev work and research?
  • Is there anything to consider outside of CSS?

Any stories, thoughts, feedback, takeaways, etc. about your design overhaul experience(s) in TI are warmly welcomed! 

We want to make sure we are making the most of our time and leveraging all tools and resources at our disposal, and so had a few questions we hope you may be able to assist with or point us in the right direction of tools/resources/contacts.

@Ckushnir I would love to maybe chat on this with you.

I have a good understand of how to Target and use CSS in the Platform. If interested let me know and I'll email you directly. 

Questions:

  • Do you have any tips or recommendations to consider before delving into this work?
    • Please note that designers are fancy, not a bad thing but over the years I have seen folks make a mess of things because they do not understand how the widgets works. or they push it so much for desktop and forget mobile. 
    • Designing our software is overwriting our CSS for yours. It’s not like building from Scratch. 
  • Were there any development tools or resources you found particularly helpful when implementing the design into the LMS?
    • I have a some office hours videos in the academy on this that talk about it in general.
  • Anything specifically that helped reduce how far into the weeds you had to go in terms of dev work and research?
    • The main thing is understanding how to target our widgets and not break others with simple CSS targeting. 
  • Is there anything to consider outside of CSS?
    • How our navigation works
    • Learner View V admin View
    • How Panoramas work. 

Thanks ​@Philcahill87!

I warmly welcome any insight you might wish to share-- please do feel free to reach out directly via email. 

I’ve reviewed a number of the office hours videos on design and have also shared those with the developer. We’ve done some light review with them on current navigation, translation settings, page behavior, etc but probably owe them a deeper dive on how we have our panoramas structured.


Hi ​@Ckushnir,

I wonder what your plan in the implementation phase would be. How are you planning to implement the UI changes in your platform considering you have it live? Are you considering a freeze period, doing over the weekends, any thoughts?

Our project is going through a similar path in the next year, and we’re exploring best ways to achieve that also.


Hey there ​@felipe.damaceno,

I believe our plan is to work through standing things up in our sandbox environment to start. Once things are looking good there, we’ll likely look for the most opportune time to push to production-- when we see lower volume in traffic. Before we make any changes, I always make a copy of whatever code we’re adjusting-- that way, if something seems really off during QA, we can roll back the changes and do some further testing/investigation if needed.

Regarding when we actually implement changes: Our users are folks completing homebuyer education requirements to qualify for loans and the like, so we don’t tend to see volume/engagement necessarily tied to standard business hours which can certainly make finding the right time to “push” changes through a bit challenging. I’ll typically run a report from the last few months to get a solid sense of days/times with less traffic and when we might want to put changes through. 

I hope this helps! Please feel free to share any key learnings you find along the way-- this is definitely the largest scale project we’ve taken on in Thought Industries to date.


@Ckushnir

Thanks for your insights!

We’ve explored Helium but that turned out that it wasn’t a good option for our project. Now we are exploring re-building all the UI in Web Components, which can give us more flexibility and future proof in case we need to reuse the same components in other projects. That involved way more development resource, but can give us flexibility later on.

In terms of deployment, the plan is to re-build our pages and don’t publish them straightaway, and in the launch day we release all of them, update our navigation links to the new ones and un-release the legacy ones. In that way we can implement the changes from our sandbox in production while keep users away from the live changes. Then for the dashboard changes, we will explore same as you, a period of lower usage to make the changes.


Reply