“P2”, a Process Documentation and Training App
This screen is a mock-up of an Employee View of a new version of Praxio my team worked on for a couple of months.
The Project:
Create a new, improved version of Praxio from scratch. In this version, Tracks was to be the main feature. I worked with my Project Manager to research competitors, map out user flows, sketch wireframes, then create prototypes for both the Admin and Employee user flows.
This project was never developed. It was sidelined while our team focused on improving Recess.
Project Roles: UX/UI Designer
Process:
Work closely with the Project Manager to plan app features, write user stories, map the app architecture, design user and task flows, sketch initial solutions, wireframe ideas for review, and prototype solutions.
Below are some examples of the process.
Research:
We had access to several people in our parent company, Scalable, who would be the initial users of this product. I interviewed about 8 people on a few different teams. Most were managers who were in charge of onboarding and training, but I also interviewed a few people who had recently been onboarded to see what their experiences had been like.
I recorded each interview and took detailed notes. After they were complete, I summarized them all into one Google doc and started listing possible solutions for each issue that was mentioned. I shared the doc with Kevin and posted it to the Confluence project management document for this project. Click here for the summary.
I also did a lot of competitive analysis. I needed to familiarize myself with what competitors were offering and see what we could add to meet our business needs. An example of some screenshots I collected is below.
I first spent a lot of time researching and collecting screenshots from competitor sites like Kajabi and EasyGenerator. This screenshot is just a small portion of the file. I looked at a lot of products with builders to see how many and what types of features were offered.
We next started planning the architecture of the app. At this point we had a list of user flows we knew the app would need.
I worked with the designer on our team in Pakistan, Fawwad, to create the above basic user flows.
Working through the flows helped us discover all the screens we would need, so we organized them into a site map. See below.
Fawwad laid out this site map as well, so we could visual all the pages that would be needed and have a better understanding of the app architecture.
I then started some rough wireframes to get some ideas on paper. I label my iterations to track my progress.
The below image shows some new wireframe iterations along with notes Kevin has left on blue post-its.
I then organized the wireframes into more defined flows, and got more feedback from Kevin. You can see our notes to each other in this screenshot below:
Design:
At this point, I felt ready to move to Figma. I transferred the flows to higher fidelity screens, then I applied the color palette Kevin and I had come up with.
I continued to work on refining the screens, getting feedback from Kevin along the way. I created two main flows, one for an employee and one for an admin. The employee would be able to see Tracks assigned to them, start the training, leave comments or questions along the way, and be able to come back to the app to start from where they left off. The admin had to be able to create a new Track, assign it out, track progress of assigned Tracks, collaborate with co-workers to build the Tracks, access pre-existing documents, and be able to take trainings that were assigned to them.
Below is a screenshot of part of the admin flow showing the connector lines for the prototype.
The screen below shows the admin view of a Track being built. In this scenario, a collaborator is about to comment on a section of the Track. Comments are shown along the right side.
Next Steps:
This project was sidelined in order to focus on Recess again. We got it to the stage where we were about to start sharing prototypes and gathering feedback from the people I had interviewed at the beginning of the research stage. I had been asking them clarifying questions along the way and they were excited to see our progress. Likewise, Kevin had been touching base with our Stakeholders through the initial planning to make sure we were meeting their needs as well.