laser academy

PROJECT BACKGROUND

Laser Academy is a stand-alone application connecting and training clients of the company-owned and operated by the stakeholders. It assists the users on how to better utilize, maintain, and maximize their products.

CHALLENGES

Currently, all of the stakeholder’s content is being hosted on a third-party web-based application. having this set up certainly limits the curation of functionality such as viewing the content offline, automatic sign-ups, unannounced server downtime, being at the mercy of the third-party vendor, and a slew of other unsavory factors. To top it off the ease of usability or should we say lack thereof. Finally, if a user has an issue with the platform the stakeholder is simply the middle man and must contact the hosting platform for troubleshooting. So let’s make the user’s experience as simple, easy, and fun as possible. 

MY ROLE AND RESPONSIBILITIES

  • User Research
  • User Interview & Stakeholder Interview
  • Wireframes
  • UI Design & Prototyping
  • Usability Testing

RESEARCH

CONDUCTING USER SURVEYS

Conducting a user survey was the best and most reasonable way to capture users’ needs, due to the fact that users come from all over the globe and the need for users input was critical the focus was on all users. A 10 question survey was conducted by email to current users of the current online learning platform. Users were tracked by open and bounce rates through HubSpot. 35 users responded in our allotted time, of those 35 responses, this is what we concluded. 
  • 83% said they use the online resources on a regular basis
  • 70% said they would like to be able to see the content offline while they are not on a local WiFi network as to not use data in some areas
  • 92% said the content was relevant and helpful when they are in need of a quick refresher while out in the field
  • 12% found no problem navigating the current platform
Ultimately it was established that while most users appreciate the content and find it useful, it would better suit the users for the stakeholders to establish an in-house solution to better serve their customers’ needs.

DESIGN EXPLORATION

IDEATION

A multitude of different styles were taken into consideration. User-centered design was the goal here. Combing through a number of different design resources for inspiration and even taking into account the current layout of the learning platform as some features are very intuitive and useful. Accessibility was a top priority! After a few iterations, it was decided to keep it simple and landed on a style that was usable, equitable for both the user and stakeholders, enjoyable, and accessible. 

DESIGN

Once the ideas were flowing the design concepts were ready to understand. Wireframes were made (not every screen, but the main ones users were most likely to come in contact with). Iterations were made to key screens such as content selection and placement of accessibility features such as closed captioning, language selection, and filtering options. 
Finally, wireframes were good to go and an MVP design followed. Jumping between Adobe XD, Photoshop, and Illustrator some well-designed user-centered mockups were produced. 

REVIEW / TESTING

It was decided to send out the working prototype to the original 35 users that responded as they were already vested in the process to a certain extent. Along with the prototype it was asked of them to point out any roadblocks and pain points they have along their journey navigating the product. A survey accompanied the prototype.
Feedback would have been appreciated from all 35 users, but unfortunately only 14 provided theirs. So with that information, it was discovered that;
  • Users wanted a transcript included with the video content to review and read over in certain situations
  • Users would like the ability to leave comments and questions on certain videos (this could be an accessibility issue due to the fact data/internet would be needed to populate, send, and receive that data) It would only be available once the user is in service range
  • Option to call directly from the application
After receiving feedback some iterations took place to accommodate those concerns. All were addressed minus the commenting feature as that will be strongly considered in future iterations. 
color.jpg

DESIGN

Having a good idea of the layout and what was needed, the design became clear.  
  • The stakeholder had a branding guide to follow that included color pallets and fonts and typefaces. This took some pressure off visual design as those aspects were taken care of. 
  • Create wireframes to define what information goes into each screen.
  • Decided to forgo images for now just to show the usability of the product. This ensures that every element makes sense, this method mimics the if people don't recognize your logo in b&w…well… 
Screenshot 2021-09-20 142030.jpg

TOOLS

  • Pen and paper for wireframes
  • Adobe XD for high fidelity prototypes & mockups
  • Photoshop for visual mockups
  • Illustrator for custom graphics

TAKEAWAYS

Testing is critical in situations such as this, the more involvement you can have in what the user wants and needs the better you can help the user.