IBM | GSC One Click
An application and website that connects technical sellers to solutions and demos that support them in the sales cycle - designed using IBM’s internal design system (w3DS)
Role
UX Designer / UI Designer / Front-End Developer
Skills
UX Design / UI Design / Angular Development / Agile Collaboration / IBM Internal Design System (w3DS)
Approach
Research & Discovery ↓
Pin down our goals and empathize with our user
Design, Development, & Testing ↓
Following an agile process, design, build, iterate, and test.
Overview
The IBM Global Solution Center supports pre-sales client engagements by creating solutions which showcase the applicability of IBM products across Industries. IBM GSC needed a better way to showcase the demos they create as well as a way to educate their customers (IBM sellers) on how/when to best engage.
I designed and developed an internal application that allows the IBM GSC team to showcase 100s of solutions in support of selling IBM software. I also designed a website to serve as the IBM GSC’s presence. To ensure clarity, the web application and website were linked via navigation. This hid the fact that on the backend it was 2 solutions - showcasing a singular experience for our user.
01
Discovery
Research & Discovery
First I needed to get a lay of the land. I conducted stakeholder interviews to understand why we wanted to take on this initiative and why it was important. I also conducted preliminary research to better understand what digital products already existed and to empathize with our users.
Where we started
Stakeholder Interviews
I discovered our goals, identified our users, and understood the current landscape.
Current landscape
1
About websites
5
Market websites
1
Web app for demos
Key business goals
Goals
Provide technical sellers with a way to view pre-made solutions/demos.
Consolidate the existing websites and web application into a ‘One-Click’ solution for our user.
User Research Synthesis + Empathy mapping
User Interviews
From speaking with multiple ideal users (IBM technology sellers), I was able to generalize a persona to ensure we were building to address the right needs
User’s Need
Bill an IBM Technical Seller needs to find IBM technology demos and resources in order to demo an IBM technology solution to his client
02
Design, Develop, & Test
Information Architecture
Before designing it was important to understand and map out the current information architecture (1,2)
I established an Information architecture that would take the existing 7 different websites/webapps that were in use and would condense them to 2. One that served as the web presence/about for the GSC and another web app that allowed our user to find the demos that would support their clients. The 2 are linked via a common navigation (3)
1, Old general site architecture
2, Old architecture for the market sites (5 of them)
3, New proposed architecture
Design, Build, Test, & Repeat
With the understanding that our solution is framed around our user, goals, and technical constraints, I began designing.
We took an agile approach to designing and developing. As I moved from designing low-fidelity to mid to high-fidelity wireframes, I continually asked 2 questions: “Is this user-focused?” “Is this UI buildable?”
“Is this user-focused? Is this UI buildable?”
Mid fidelity wireframe
After user testing, we removed the hero image here as it distracted our user from their primary goal of searching
I conducted user tests to ensure we were designing and building towards the right goals and for our user’s expected interaction with our product.
While designing, I co-developed this application using Angular a Typescript framework.
Final UI solution catalog and code snippet
While designing and developing this application, I also designed the GSC’s website to serve as their online web presence
View full website image here↗
03
Outcomes
- A web application that showcased and provides access to 100s of pre-sales solutions developed by the IBM GSC
- A new website to serve as face of the IBM GSC
- An overall better UX and functionality measured by qualitative and quantitative metrics.
GSC website. View full website image here↗
Final UI solution catalog
Metrics
Quantitative
we had 2 metrics to measure on - clicks and views.
12% user growth Q/Q
Through all quarters the highest clicked link was the ‘catalog’ page
Qualitative
We asked for user feedback and we got it.
“Overall, I think you have done a great job with keeping the site very informative and very easy to navigate. Good job!”