Back to Work

LISNR Content Portal

Web ApplicationUX & UI Designer, Front End Developer

LISNR Content Portal Dashboard preview

Our team needed to determine best solutions to solve for some key pain points and problems both internally, with clients and with end users. I helped the team by gathering initial feedback and defining our various users to drive us to an internal product solution that would provide a platform for us to connect with clients to help us focus on our true end product + users of the LISNR mobile application.

1Research & Planning

I met with key business stakeholders to discuss pain points in working with clients on the LISNR mobile application. The application was founded on the content we would receive from clients that was ultimately served to end users through our application. This process had a lot of pain points both for clients as well as our internal team that negatively impacted our end users.

I gathered a lot of the feedback we received from end users, clients and our team to highlight what issues we were facing to drive our end solution. We also needed to, as a business, increase our scalability and adaptability in increasing our client network and decrease the time needed to get client content into to our application.

2User Personas & Flows

After discussing with our business stakeholders, we determined we had two primary user groups - our clients and our team. A secondary and indirect user were our application users; they would be interacting and engaging with the content. I helped the team connect with the main user roles and we spoke with clients to determine what issues they had in providing content. Issues included struggling to provide the application-friendly content, seamless communication with our team regarding content, and high labor and time spent by our team to turn end content into something our application could use.

I could communicate directly with our team and also had access to clients to drive our user research and validate our initial assessment. This helped us move to identifying key features and functions we needed in client portal. I designed user flows to illustrate to our team the total experience and what actions the user would need to take to accomplish the proposed features.

3Wireframing

I designed low-fidelity wireframes of our user interface to help give priority, hierarchy and content structure to the features and user flows. This helped our team understand the interactions and content hierarchy and priority within the features. Below are examples of one of the processes we needed to have available within the app.

4User Interface Design

I translated our wireframes into high-fidelity mockups using Adobe Photoshop to visually illustrate the detailed design views and finalized user interface. I integrated the mockups into InVision to help give our team a design prototype that could be used to demo key features and test with our internal team and client users.

5Front End Development

I was responsible for initial work in translating our design mockups into a live working prototypes using HTML, CSS & JavaScript. This is what would be used by our engineering team to help connect needed services and functionality. I worked with our back end developer to help explain the requirements, interactions and specifications that the working prototype was built on.

6Brand Guide

I was responsible for establishing our brand guide for LISNR. This would be used internally to help give our team design standards to unify our approach and adhere to guidelines across marketing, sales, graphic and digital needs. This was also established to help unify our web standards betweek our business marketing website and our digital products.