_____________
Role
UX Lead
_____________
Date
2016
_____________
Client
Eltropy
_____________
Problem Statement
Eltropy had a working Web App they wanted to port over to mobile. Since they had pivoted their business from an eLearning tool to a SaaS content and creation tool, the challenge was to introduce new information architecture and design patterns to better fit user needs and goals.
PROCESS
Design Thinking
We designed the app around the primary use case for viewing and sharing content. To kick-start the project, I helped create a working PRD to help define requirements; this also allowed us to decide on the value proposition to customers, the user and business goals, personas, use cases and user stories.
![00](https://i0.wp.com/www.omairali.com/wp-content/uploads/2015/05/ux-study-3.png?fit=1247%2C697&ssl=1)
UX Research
I interviewed stakeholders, including the Director of Product and Solution Marketing, Preet, to understand how the product was being used within his team. His goal was to “win top-tier customers.” During the study, I learned that the app helped them build out content for their products (decks, competitive analysis, etc.)
The other tools his team tried out did not successfully inform them on how and why they were using the content. In addition to gaining insight from Preet, I also reviewed wish lists that existing customers provided the Eltropy executive team.
I conducted a competitive analysis by downloading “Competitor A” and “Competitor B” (apps for iOS) and performed a UX audit on both. I evaluated the pros and cons of the interface and studied the value proposition to the end user in relation to their business model.
Design & Test
I used paper prototyping to quickly bring flows to life. I then wire-framed primary tasks, vetted the flows with the Eltropy team, and iterated based on feedback. Once I had the basics down, I tested the designs by making them interactive. I created clickable prototypes that allowed us to check the flows in the medium for which they were designed.
![00](https://i0.wp.com/www.omairali.com/wp-content/uploads/2015/05/wireframe.gif?fit=850%2C661&ssl=1)
INTERACTIVE PROTOTYPE
![00](https://i0.wp.com/www.omairali.com/wp-content/uploads/2015/05/eltropyHF-small-BORDER2-2-1.gif?fit=500%2C750&ssl=1)
FINAL DESIGNS
Interaction Specifications
A few iterations later, I finalized icons, fonts, and the overall design language for Eltropy. I created a style guide specific to mobile that could also be ported to the web app. The app is available for both Android & iOS.
![00](https://i0.wp.com/www.omairali.com/wp-content/uploads/2015/05/eltropy4.jpg?fit=1024%2C1024&ssl=1)
![00](https://i0.wp.com/www.omairali.com/wp-content/uploads/2015/05/eltropyMock-analytics2.jpg?fit=1024%2C1024&ssl=1)
![00](https://i0.wp.com/www.omairali.com/wp-content/uploads/2015/05/eltropy1.jpg?fit=1024%2C1024&ssl=1)
![00](https://i0.wp.com/www.omairali.com/wp-content/uploads/2015/05/eltropy3.jpg?fit=1024%2C1024&ssl=1)