Queen’s Web:
Team Member Portal
Women Supporting Women in Tech!
Queen’s Web is a newly-formed organization for connecting women in tech to collaborate on real projects in order to gain experience. They currently have a client-facing website but lack an internal website for team members. Our team of 3 UX designers created a minimum viable product (MVP) of a team member portal that serves the immediate needs of Queen’s Web’s members.
Overview
UX Team
Katie Yarnold
Lead UI Designer | Content StrategistNandita Vedantan
Product ManagerKimberly Bombita
Lead Researcher
Duration
6 weeks
My Role
As lead UI designer, I was responsible for all visual design and UI elements. I created the lo-fi wireframes and hi-fi prototype. I crafted branding elements by creating a style guide and delivering content strategy. I also contributed to the research and testing phases of the design.
Methods
C & C Analysis
User Interviews
Research Synthesis
Wireframing
Prototyping
Usability Testing
Design Iteration
Branding
Content Strategy
Tools
Figma
Zeplin
Miro
Google Suite
Step 1: Discover
User Research
My user-centered design process always begins with user research. Considering the small size of our actual user group, the 20-30 members of Queen’s Web, we focused on conducting in-depth user interviews with Queen’s Web’s members. We interviewed 8 UX Designers and Software Engineers, one third of Queen’s Web’s members, to discover their needs for a team member portal. We generated these key insights:
Queen’s Web Members…
Are motivated to uplift and connect with other women in tech.
Want to gain more experience through team projects.
Difficulty with the current organization & distribution of Queen’s Web materials & information.
“I want to be pushed in a positive manner and be able to learn from that.”
— Queen’s Web Member
Business Analysis
In the next phase of our research process, we conducted business analysis through competitive & comparative analyses. Our competitive analysis looked at the member portals of two major international companies. Our comparative analysis analyzed the features of best-in-class products that most professionals in the tech industry use: Facebook, LinkedIn and Slack. We gathered these key insights:
Feature Inventory of Facebook, LinkedIn and Slack
Comparative Analysis
Robust personnel directories allowed employees to seek advice from industry experts at their own company.
Detailed employee profiles included graded skills, industry knowledge, contact information and social media links.
Competitors utilized APIs such as Google Calendar to build effective yet easy-to-use features.
Competitive Analysis
LinkedIn profile cards offered a lot of information about users in a very small format.
Facebook utilizes a calendar and RSVPs to keep track of events.
All platforms had prominent search bars that allowed users to easily find important info.
Step 2: Define
Research Synthesis
Utilizing affinity mapping, we synthesized our research into artifacts to guide our design process: personas, problem statement and user scenarios. We then used those artifacts to prioritize features and craft a design hypothesis which defined our MVP.
Remote Affinity Mapping
Persona
Problem Statement
The Resourceful Rookie needs a way to keep important dates, project timelines, and required documents organized so they can be a professional and communicative team member. They also need a way to view information about other Queen’s Web members so that they can network with other members for support and situational help.
User Scenarios
In order to prioritize for our users’ needs, we created this series of scenarios that detail the tasks our users most need to accomplish on this website:
1. Submit Documents
The Resourceful Rookie has just joined Queen’s Web. They are eager to get started on their first team project. However, they first need to fill out and submit an important document to the leadership team. The deadline to submit this document is coming up soon so they need to be able to login to the team member portal to find and sign the document quickly.
2. View Calendars
The Resourceful Rookie is starting their first project with Queen’s Web. They would like to see their project schedule as well as the meeting invitations for all the upcoming project meetings in one calendar to easily keep track of everything that’s happening. They need to be able accept meeting invitations to let their team know if they will be attending.
3. Find a Team Member
The Resourceful Rookie is feeling comfortable two weeks into her first project with Queen’s Web. The project is going smoothly but they have a question about using React. They want to find another Queen’s Web member who is well versed in React so she can contact them to ask for help.
Feature Prioritization
In order to decide which features to include in our MVP, we used the MoSCoW method (Must, Should, Could, Won’t) to determine which features would best solve the user needs defined in the persona and user scenarios.
Design Hypothesis
We believe that by designing a team member portal that includes a calendar, member profile pages, and easy access to required documents, we will see improved organization and communication among Queen’s Web members. We will know this to be true when we receive qualitative data from Queen’s Web team members affirming this.
Step 3: Design
Content Strategy
Although not directly related to the team member portal, I also provided content strategy for Queen’s Web’s client-facing website. This writing can currently be seen on Queen’s Web’s live website. For this project, I developed Queen’s Web’s unique brand voice to write such statements as:
Mission Statement
Vision Statement
Team Culture
Company Values
Guiding Principles
Sketching & Wireframing
For this project, we were fortunate enough to work very closely with the clients and developers. We decided to conduct a collaborative rapid ideation & sketching activity called design studio with the developers. This sessions was incredibly insightful as it taught us how developers approach problems. As the lead UI designer, I then iterated on those sketches until our design fully took shape int the form of low-fidelity wireframes. I used these wireframes to create a digital prototype of our product.
Sketches for Initial Wireframes
Lo-Fi Wireframes
Step 4: Develop
Testing & Iteration
In order to improve the usability testing of our designs, we conducted several rounds of usability testing with our low fidelity prototype. With our design decisions confirmed, I created the final high fidelity prototype of our MVP.
Usability Testing
Usability testing was an important step for proving our design hypothesis to be correct. We conducted two rounds of usability testing with a total of 13 participants. Our prototype features drew on existing models such as Google Calendar, DocuSign and LinkedIn. Thus, users were already familiar with the interface design of most of the elements in our MVP. In usability testing, users were able to accomplish all three tasks efficiently. Given these results, we made only minor changes to our lo-fi prototype before moving on to the hi-fi prototype.
Style Guide
Utilizing Queen’s Web’s existing logo, I created a style guide that aligned with the company’s values and branding to use for the high fidelity prototype of the team member portal.
High Fidelity Mockups
Thanks to the validation on our design decisions gained through usability testing, we were confident in the design of our MVP. As lead UI designer, I then increased the fidelity of our designs by adding the branding elements we defined in our style guide.
Member Profiles
Color-coded graded skill system that shows how knowledgable the member is about each skill.
Member bio and project descriptions show the member’s background and current work
Contact information and social media links
Document Organization
Color-coded document status easily shows members which documents need attention.
Documents link to outsourced e-sign platforms to ensure that legal considerations are taken care of.
Member Directory
Profile cards feature color-coded graded skills and contact info so that users can quickly reach out to other members when short on time.
Members can also view full profiles if they need to find out more information about other members before reaching out.
Calendars
Utilizing a Google Calendar API ensures usability as members will already be familiar with the interface.
Using this API also allows members to view any and all necessary deadlines and events all at once.
High Fidelity Prototype
Reflections
The key to making this project successful was working hand-in-hand with Queen’s Web’s developers. They are a small team of junior developers and we wanted to make sure that we were designing for their needs and capabilities. By utilizing API’s and outsourcing some features, we compromised and created a design that served our users’ needs AND was manageable for the development team. In the future, we’d like to keep add ing more features to serve member’s long-term needs such direct messaging and forums for posting questions and job listings.