UEG Portal
UEGroup is a Silicon Valley consultancy firm specializing in designing breakthrough User Experiences.
Goal of the Project
The aim of the project was to design a portal for UEGroup that should emphasize information presentation from the internal company to external users. Clients look at the deliverables without knowing the research or reasoning behind it, and so do not see the need for user-centered design as a component of devising a solution. To address this, the portal should allow external clients to understand the UX process and its value.
Timeline: 16 Weeks (August 2019 - December 2019)
Contribution
I championed the research portion of the project, which involved carrying out comparative analyses, analyzing existing portals used by the company, conducting testing, and note-taking during sponsor meetings and interviews,
Design Solution
A high fidelity mockup to help illustrate what it would be like to navigate UEGroup Portal. Once logged in, the UEGroup Professional can customize/create a project based on their needs. From there they can navigate to design, development, research, or file management to view more into each section. There is a timeline to show the sprints for each department, completed documents/due dates, and many more features.
Research
We carried out market research of existing collaboration tools to determine their strengths, weaknesses, and areas of opportunity. The insights from this were used to focus on a list of themes to narrow the scope of our design.
​
User Interviews
​
The team conducted user interviews with 3 UX Professionals as well as 2 clients, one of which had previous experience working with UX firms, and one who did not, in order to better understand the pain points when it comes to the communication between professionals and clients, and also get an insight into what kind of information clients value when it comes to keeping up with the projects.
​
Based on the insights we drew from these interviews, ​we moved to redefine the features that we visualized within the portal. We wanted to make sure we were developing features for this portal that were well thought out and not just a bunch of features that we could spend limited time on.
Analysis of Findings
_edited.jpg)
Affinity Diagramming of Interview Insights
Analysis of Previous Portals
For the analysis of portals used by the company, I, along with another team member, decided to conduct it using guidelines set by myself. The blue ink was used to indicate things we found to be useful and aligned with our previous findings, the red ink was used to write notes on things we found did not hold value to our potential new design or features we were confused about, and the purple ink was used to suggest areas of improvement.
To make the distinction between the client vs. professional sides of the portal, we created proto-personas for each one and made use of it to determine the needs of these user groups in our sketching/ideation. We made them a list of goals, potential pain points in the experience, and other user groups that they would interact with. Proto-personas differ from normal personas in the way that they are created on the basis of primary and secondary research.
​
​
​
General Site Map
Notable interactions include the division of the departments into research, design, and development (UEGroup’s own three departments) and the very simple and straightforward navigation. Apart from that, our number one goal for this side of the portal is to create a very quick user flow, as we want the professional’s time to not be taken up entirely by this portal.
​
As for the client view, we had to also maintain the same flow, since there had to be no differences in the way information was viewed for both user groups to avoid confusion. The only modifications to separate the two was in terms of content access, and the addition of an extra project setup wizard and dashboard for professionals to create new project portals and switch between different active ones.
​
This propelled us forward to find a way to fit our broad themes along with the features into the given windows and further revise our work.
Through further revision of our site map and themes, we decided to sort our user groups in the following manner and ideate for them -
UX Professionals
-
Researchers
-
Designers
-
Developers
Clients
-
Hands-On Clients
-
Hands-Off Clients
Sketching
We did extensive sketching throughout the entire process up till the end to keep iterating on new insights and findings. We started off with brainwriting, where each of us spent ten minutes ideating on each of the seven categories we identified. Every team member individually sketched three ideas on all the categories, and the team congregated to discuss and vote on every idea to choose how to incorporate them into our final designs.
This is a project overview window for the clients to look at, and is designed in such a way that it provides only the highest-level of updates and information related to the project for the clients that just want to glance through without having to know the in-depth considerations or notes behind a design decision.
​
The goal and users are front and center to remind both the client as well as the professional of how the project is aligned and ensure that they are on the same page.
​
Documents and other extensive notes and updates can be accessed through the department links at the bottom.
This is a sketch of what a page to show design visualizations/prototypes could look like with the consideration of features like different prototype views, annotation and commenting, and a link to view the specifications document if the user wishes to.
This is the an idea from the round of sketching done for the file management page. Clients would be able to see which team members worked on a document, a timeline specific to the department, and an overview/summary of the report that would be visible before needing to view the entire file.
Project Overview
-
Overview - Hands-off clients main source of information, the overview is to make sure that clients and UEGroup are on the same page.
-
Executive Updates - Hands-off clients can utilize executive updates to take a better look at the project from a high level. We wanted to emphasize UX’s many facets, so we are organizing the sections with icons.
-
Sidebar Navigation - Every project that a client is working on with UEGroup will be here, and this will also function as a way to navigate between departments. This can also be done with the bottom three icons.
Paper Prototyping
When it came to testing our screens​, we created paper prototypes of each one with the features. We tested with 5 UX students, as they were eligible to fit our intended user group of UX Professionals. The testing protocol was drafted while keeping in mind the questions we wanted answers to for each design. We tested seven different paper prototype screens that were divided into the themes we had ideated for -
​
​
This is a paper prototype for our overview page, and participants were asked to carry out different tasks to take notes on their mental model of navigation​, which was then followed up by questions to determine the positives and shortcomings.
​
Similarly, we tested all our other screens against their different objectives, and made use of our insights to design high-fidelity prototypes after iteration.
Visual Guidelines
Typography
Color Palette
#202124
#FF4545
#2E2F31
#E65F31
#363636
#00B882
#FFFFFF
Refined Screen Designs
.png)
Video showing interactions on the overview page
Project Overview
The client overview screen is set up to emphasize ease of gain of surface-level information about a project. We want them to be able to quickly understand the current pace of a project as well as any immediately important information relevant to the project.
​
This includes latest updates on the right along with the dates associated with it, a timeline that displays milestones and status of completion, as well as the goals of the project which are displayed at the forefront.
​
Clients can move between viewing details of different departments using the navigation on the left side bar.
​
​
Research Visualization
The type of research done for a particular project varies depending on the scope. We designed a general visualization of research documents that kept the elements of the UX process to the forefront to allow clients to have an insight into the progress as it took place in stages.
Easy language and clear goals are used to define the direction of research, and the milestones on the timeline allow clients to anticipate deliverables.
​
​
File Management
A file management system to keep track of documentation over the progress of the project, that is divided into different departments and has sorting filters so that access to particular files is easy for the client.
​
​
Project Setup
We designed a general project setup system to determine the baseline requirements that UX professionals would need in the portal, such as the departments according to the type of project, the team members on a particular project that would have access to edit and communicate through the portal, and a layout editor to add undetermined features in a way that best suited both user groups. As part of potential next steps, we would like to work more on the setup for the UX Pro side of the project to make it a complete, cohesive portal on both ends.
​
Exploring Ideas
Wireframing/Testing
Final Design
Reflection
This project was a wonderful experience for me, made better by my cooperative sponsors and wonderful team members. Over the course of the timeline, we hit a few potholes due to miscommunication between the team's vision of the project and that of the sponsors. However, it was a very fruitful lesson in working under pressure when faced with time constraints, and making the best out of it.
​
Evidently, by the goofy team photo I chose to add in here, you can probably see that we had a lot of fun together. It put into perspective for me how important it is to maintain a good relationship with my colleagues so that the team dynamic contributes to a positive direction in terms of collaboration.