Roles.
- Best Practices
- Info Architecture
- Wireframing
- UI Design
- Presentation
Tools.
- Figma
- Zephyr
Team.
- Project Manager
- Front End Engineer
The Challenge.
A two-week sprint to update a main feature of an Enterprise Mentoring Software. The software is used by companies to connect their employees and allow for internal communication, mentorship, and skill growth utilizing their employees. My job was to revamp one of the main features of the software. The "engagements" currently acted as rooms allowing mentors and mentees to talk and exchange ideas and work on tasks for growth. For this project, our team was to update the existing engagement page to a timeline design similar to other social media applications you see.
Existing Engagement Page
Access.
The first step was to gather as much information as I could so I could make informed decisions on my steps going forward. Working with a project manager, they laid out what we are looking to build and the constraints of the design.
Goals
- Increase the use of the engagement page and make more interactive by removing the existing tab and transitioning into a timeline format.
- Make it easier to collaborate, the single timeline should make it so that users have all the information in front of them without having to search though tabs.
- All existing tabs should have a block type including Posts, Document Review, Tasks, Media (Video, PDF, other), Kudos, Event, Polls.
Requirements
- Will be implemented into current design page, and should focus on the Engagement block section.
- The project team wanted to see and integrate "replies" within the blocks. The latest reply should always show up.
- Needed the following blocks: Post, Embedded Video, Image, Tasks, Document Review, Kudos
- Need a wrapper with CTA buttons to add blocks
- Need replies to be part of the blocks or wrapper.
Existing Site Analysis
2010 Chic
To start the client wanted to update their application to fit better with the times however a main problem to figure out was how to modernize the UI while only implementing parts at the time.
Layout and Engineering Constraints
The timeline also needed to fit within the existing structure and the header and sidebar needed to remain for the most part.
Just copy Facebook.
The final thing that I did for this feature was to analyze other sites to determine how they went about similar features. Some of the sites I looked at included Facebook, LinkedIn, and Twitter to determine how they organized the blocks including how they solved replies. Since these sites have been using a timeline feature for awhile and I could assume that many of my users would be familiar with them by integrating similar concepts I was hoping that it would lessen any learning curve one might have from the change.
Layout and Concept.
After some quick sketches and wrapping my head around the concept. I started off my creating some layouts that could be re-used and constant throughout the design.
Three Columns
Taking inspiration from the existing layout and other social media layouts. I wanted to layout the page with a consistant menu on the left, a main content column that would hold the important information and a auxiliary information column on the right.
Wrapper design.
The main engagement content needed a wrapper that would hold the main information of the forum and have buttons to post.
I also added a search and filter feature location for a future feature.
Standardize the blocks.
For the "blocks," the layout needed to be consistent so the user could quickly scan the content and make it easier to build. The structure consisted of a header bar with information, supporting content, the post, and replies at the bottom.
Solution.
After working through the wireframes and concept strategy with the Product Manager, I started to work through the interface and designs. This strategy was to make sure everything fit within the existing framework but make the page feel more modern.
Wrapper
The designs for the wrapper needed to be pretty simple. The header included all information about the group, including a logo, name, additional information, members, skills, documents, and a join button. Initially, there was no way to join or follow a group and the addition made it much clearer to know if you were already in the group. The second row included all the CTA buttons for posting, followed by a search and filter to organize the content below.
Blocks
The individual blocks wanted to be as consistent as possible and allow the user to identify the different blocks quickly. One way of solving this was to show an identifier (identical to the CTA) at the top right corner to allow the user to scan why they scroll. The rest fit the content to each block, so they looked good and focused on the critical information of each block.
Post with condensed replies
Embedded video block
Image block
Kudos block
Post with expanded replies
Task block - Done
Task block - Open
Document review
Integration
Through the process I was working with the front end engineer but knew I was design for a number of sprints in the future. After getting sign-off with the project manager for the direction, I worked with the engineers to figure out how to stage the design so it could be built over a series of sprints.
Existing Engagement Page
MVP or Version 1
Future Direction
Conclusion.
As the contract was only six weeks long, I never saw the designs get built, but this project was a great experience. It was my first introduction to working on an already designed and build product. The constraints and needed to take something that is already working but could be better into consideration. The team I worked with was great and made for an experience e where I learned a lot.
Lessions Learned
Keep focused at the task at hand. I got off track on this project and tried to solve more problems than were assigned of me. Ultimately it made more work for myself and the engineers to figure out how to integrate everything. It was a good learning experience to while it is good to keep future iterations in mind and know where you would like to go with a product that while designing its good to focus on the feature or part at hand.