My Role
As the sole UX designer at LRN, the biggest project I worked on was transforming the existing desktop site into one that would work on mobile employing the Mobile First methodology outlined by Luke Wroblewski. I played a lead role. The product owner, project manager, and I worked well together to ensure that we finished the project on time and under budget.The Challenge
After studying our analytics, it became obvious that more of our 12 million users were using mobiledevices to reach our product. The flood of devices including Samsung Galaxy S3, iPad Mini, iPhone 6, Nexus 7, and Microsoft Surfaceleft our team asking how to best serve our users. The answer is simple: responsive design. Here are the steps the team I lead went through for our approach to mobile UX.The Solution
The answer is simple: responsive design. Here are the steps the team I lead went through for our approach to mobile UX.The Client
LRN's primary business is providing an e-learning system for its many clients to help their employees meet the rigorous state standards for ethics and compliance education. They have many clients but during my time there I worked with Apple, Pfizer, eBay, Dell, Dow and 3M
UX RESEARCH
I worked closely with a partner who knew the users and their concerns very well to create user-centered designs to target their issues with the working system.
Competitive Analysis
I took a look at LRN's competitors to evaluate what features they offered in contrast with our own.
>
SWOT Analysis
After reviewing our competition, I examined the strengths, weaknesses, opportunities and threats to LRN. This graphic shows my findings.
>
Persona
The outgoing designer did the research for these personas. We collaborated on the final deliverables while she was still around and then I updated them throughout my time at LRN.
INFORMATION ARCHITECTURE
User stories
I worked with the business analyst on my team to create user stories for all the features that we improved or added. The product manager worked closely with the customers. Then I would create a design solution and then the business analyst and I would write the user stories in Atlassian's Jira project management tool.
Site map
There was no site map when I arrived at the company. I created this one from the existing Catalyst system.
Task flows
it is very important to take the time to really think about the structure and flow of the pages and how that will lead to better user experiences for your users. User flows demonstrate the step-by-step elements required to allow the user and the business to accomplish their objectives. I created a few for the primary tasks that the end user must do to complete their assignments:
DESIGN
Prototype
I created a grid-based template that conformed to iOS layout guidelines. This allowed me to accurately edit prototypes during design meetings so participants could visualize proposed changes. I designed both portrait and landscape views. For the clickable protoype, click here. I am showing a selection in portrait view here, but full task flows are available:
DESIGN DELIVERY
Collaboration
I worked closely with the development team before, during, and after the design process was completed. This team that included the project manager, QA developers, database architect, and front end developers was instrumental in providing their expertise so I could create technical specifications and design that would not break the existing system. We worked in tandem to create effective design solution to meet user goals which also enhanced business outcomes. For example, during the agile sprint process a QA developer found that a video plug-in we were using was not loading quickly enough for mobile. Instead of loading under 30 seconds (which is best practice) it was taking upwards of 3 minutes to load. We did some research and found an in-house version that loaded in 30 seconds of less.
Handoff & problem solving
Once the design was completed with specifications it was attached to user stories in Jira, our project management tool. Then the feature was ready to be developed. I was available to continue collaborating with the team and answering questions about how the feature was intended to work in the development and QA process, straight up until launch. The result was a high-performing product that loaded in 4-7 seconds on mobile, tablet, and desktop devices resulting in a 125% hike the first year in use.