Overview of BRIDGEGOOD
​​​​​​​BRIDGEGOOD is a non-profit community design studio which aims to bridge the digital literacy and opportunity divide. Primary funders include Google.org and the Golden State Warriors. BRIDGEGOOD focuses on diversity, inclusion and accessibility.

Problem:
​​​​​​​"How might we redesign BRIDGEGOOD’s flagship feature, the portfolio page to reflect the Creative and their work?"

Solution:
Our team decided to emphasize the Creative and their personal branding by only displaying their work.

Client:
​​​​​​​BRIDGEGOOD (Board of directors, executive staff, and Creatives)
Team:
Product Manager: Shaun Tai
Designers: Omar Sinada, Christy Hu, Devon Washington, Tinh Nguyen and Jamaica Scott.
Engineer: Trung Huynh

My Role: 
​​​​​​​UI/UX Designer

Design Tools:
Research: Google, Behance, Dribbble and WIX
Ideation: Pen, paper and whiteboard
Wireframing and Prototyping: Adobe XD
Visual Design: Adobe Illustrator and Google Material Design​​​​​​​

Duration:
​​​​​​​3 week sprint

—————————–
Persona
Our team created a BRIDGEGOOD Creative persona based on asking users about their experiences and what they thought the current Portfolio Page needed.​​​​​​​ The persona gave us a better understanding of the user base before we proceeded. Our team determined that our audience will be in college searching for a platform to showcase their creative work.
Georgia's User Journey
We mapped Georgia's journey from wanting a platform to showcasing her creative work to presenting her portfolio for a potential job. We understood Georgia's struggle to find a service that would give her the best results.
SWOT Analysis 
Conducting this strategic planning technique helped us understand the current state of the Portfolio Page and how it compared to other similar platforms.
Strengths
The strengths include unlimited storage for projects, inspiration from projects by other Creatives, and paid-work opportunities for small businesses.

Weaknesses 
Some weaknesses include the featured project being hidden in the About section, lack of personal branding and storytelling for the Creative.  
Opportunities
The opportunities are to increase the personal branding for the Creative and reimagining the project viewing page for effective storytelling.
Threats
The Portfolio Page is threatened by competitors that provide an online resource to share projects similar to BRIDGEGOOD.
Competitive Analysis
We conducted a competitor analysis to understand existing services that were similar to BRIDGEGOOD's Portfolio Page.
Once we completed our research, we concluded that: All of the platforms are free with limited customizability. Behance and Dribbble doesn't reflect the designer's personality, only their work. We also discovered that all of these platforms assume there is work to post. There aren't many opportunities to produce work in the same place you post. We were also surprised of the limited resume resources and featured project options.
White-boarding
The next step was to write down the current likes, dislikes, and discussion topics of the current portfolio page to determine the direction of the redesign. This erupted a discussion about what we felt were needed versus not needed for the users. We all agreed that since it's the Creative's Portfolio Page, there should be less BRIDGEGOOD branding and tailored more for the user. For features we couldn't agree on, we would vote and share the results with the Project Lead.
White-boarding likes, dislikes and discussion topics.
How Might We's
We then used our findings while conducting How Might We’s to create and understand potential solutions. We wanted the new portfolio page to have a featured project, something that was currently hidden in the about section. We also didn’t want too much information that would take the attention away from the projects while also keeping the page minimalistic.  
Team Sketches
Once we had our ideas down, each team member sketched out as many lo-fidelity mock-ups to visualize the ideas we had. We generated many versions with different layouts and voted for the sketches that aligned with our How Might We's.
Conducting How Might We's and sketching lo-fidelity mockups.
Wireframes
Once we completed our sketches, we proceeded to creating wireframes. There were elements from each design that we liked so we incorporated them into the lo-fidelity mockup. Once our lo-fidelity mockups went through several rounds of feedback from the Product Leads, we created a hi-fidelity version to achieve the How Might We goals we had set from the beginning of the design sprint. 
Project Page Wireframe
Feedback
We had the amazing opportunity to have the Salesforce UX team visit our studio to give us helpful and useful feedback we were able to incorporate into our designs. With their feedback we were able to adjust our layout and only keep the essential features for the two pages.
We highlighted our key takeaways from their visit and discussed implementation at the current stage of the project. We gave the user the ability to rearrange their projects and improved the layout of the Project Page by placing the text beside the image.
Challenges
A challenge that we had with our hi-fidelity mockups was designing the versions we needed for the user: an empty state without any projects, a state with only one project, errors.
Redesigning the project viewing page was also a challenge because we wanted the process of the project to be the focus for the viewer.
—————————–
Final Product Key Components
Featured Project
The previous version of the portfolio page had the featured project hidden. Our redesign made the featured project the first thing the user sees.
—————————–
Project Viewing
We improved the project viewing page so you could scroll to see the entire process of the Creative. Other viewers can like/share the project as well as leave a comment for the project owner to view.
—————————–
More Projects and Info
Before the redesign, the user had to leave the page to see other projects from the same Creative. To solve this, we created a section containing more projects to view.
You will also be able to see comments/ratings left by other Creatives, and the speculations about the project.
—————————–
Final Product
Hi-fidelity mockup of desktop.
Portfolio Page
Before and After comparison. 
Project Viewing
Next Steps
Now that the feature redesign is shipped, we will collect user activity, account creation, and retention rates. With this data, we will be able to measure the success of the redesign and improve accordingly.
Key Takeaways

1. Designing for mobile versus application. 
Understanding that there are key differences between the two platforms, it was important to review over them so we knew the constraints. We also discussed with the engineer to make sure what we designed was possible. 

2. Referring back to our How Might We's.
Going back and referring to the How Might We's we created as a team throughout the design sprint was essential for the process because it would prevent us from going off track. 

3. Existing assets needed somewhere to go.
Since we were redesigning an existing feature for over 8,000 users, the content we wanted to rearrange couldn't just be removed because it would affect every user. To solve this, the assets had to go to a different part of the users profile page. ​​​​​​​

You may also like

Back to Top