top of page
ShopRunner's CS App
The Problem: The customer service team's account look-up tool is outdated and doesn't interact effectively with their email ticketing system.
The Solution: Design an improved tool with intentional information architecture to live within an iFrame.
Role: UX Designer
Timeline: 10-15 hrs/week for 8 weeks
Tools: Figma, Notion, Whimsical
To comply with my non-disclosure agreement, I have modified and obstructed confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of ShopRunner.
Context:
The customer service team's tool for account look-up was out of date. Back-end data was being processed using outdated technologies, and the previous owners of the product had left the company.
The Brief:
Migrate the existing CS App's functionality to a new interface: an iFrame to sit within Zendesk, the team's tool for email ticketing.
The Plan:
Re-structure the existing CS App to group information more logically, bringing the most frequently performed tasks to the most accessible locations, and prioritizing development according to the most used functions.
Stakeholders:
Two customer service team leads who have used the product for 2+ years.
Meet the Original CS App
New Product: Technical Requirements
1
Exists within an iFrame (frame width 350px, working area 320 px)
2
Migrating all features in the existing CS App to the new product
3
Creating wireframes to be implemented as soon as possible, due to the project timeline and contract length for the developers
Getting to Know the CS Team
Even though the stakeholders provided a list of features and a basic sketch of the new product, I began by sitting down with each of the 6 CS Team members to ask them about their experience with the existing CS App.
I asked them to share their screen and show how they performed a variety of tasks. I used an affinity map to synthesize my research across participants.
I then grouped together patterns and created a report that summarized the results of the interviews and my analysis. I also brainstormed some potential solutions based on my research.
I shared this report with my team.
CS App Research Findings
Brainstorm
Bringing the iFrame to Life
User Interface
The developers on my team requested that I work with Bootstrap's UI Kit when creating my designs, since they already had access to the toolkit. While I did not have prior experience with this UI Kit, it was a great learning experience for me to use it in my designs.
Bootstrap's toolkit, along with a few elements from an internal company toolkit, made up the interface for the product.
Wireframes
Approaching the Design
Since we were moving from a desktop site to the more condensed iFrame, I knew I needed to be strategic with how information was displayed. I decided that accordions were essential to prevent the frame from becoming too long and to allow information to be easily legible.
Grouping Information
I changed how information was grouped together, so all information that pertains to the same subject appears in the same tab. All actions that relate to membership live in the "Member Details" page. For example, password resets and membership extensions used to live in different places.
Visible Feedback
Any information pertaining to orders lives in the "Order History" tab. Before, users had to go to different places to email vs. generate a pdf return label.
I also improved user feedback by tying the action to the result — now, clicking either return label button results in the tracking information appearing in the table above.
Revisiting the User
While the developers moved ahead with my wireframes, I felt it was important to sit down with the same six CS team members for usability testing with the new product.
I created a prototype that would allow the users to freely explore the new tool. I asked them to perform a few common tasks and provide feedback on the ease of use.
I compiled the results of the usability testing into a report, which I then shared with my team.
Usability Test Results
Tasks
Task #1: 6/6 users completed with no errors
Task #2: 6/6 users completed with no errors
Task #3: 5/6 users completed with no errors
Task #4: 5/6 users completed with no errors
Users rated every task either a 1 or a 2 for difficulty of completion (on a scale of 1-5, with 5 being the most difficult)
Descriptors
Suggestions & Observed Needs
-
Adding a search function to the order history page
-
Consider moving return label buttons to header of collapsed accordion
-
Verifying that multiple accordions can be open at once
-
Confirming that accordions can still be open & users can navigate to another tab
Design Adjustment
Adding a search function to the order history page to allow the team to locate a specific order without having to navigate through multiple pages.
Looking Back & Looking Ahead
Collaboration is Key
I loved collaborating with the three developers and project manager for this project. They challenged me to deepen my thought process and find a home for every feature we wanted to migrate. Their support was invaluable to my results. I also had to adapt to their communication styles; for example, the developers weren't familiar with Figma, so I needed to keep my files clean and provide annotated wireframes to most clearly communicate my work to them.
Approaching my Stakeholders
There were a few times where I met with my stakeholders to communicate some potential changes with them. I realized after the fact that I could have come into these meetings with more information about why the changes would benefit the project on a larger scale, backed with specific figures from my collaborators. Knowing your audience is key, and I could have improved the way I presented this information considering my specific audience (the stakeholders). I learned to be more mindful when approaching these types of meetings in the future.
Phase 2
For this project, I was working with three contracted developers. The company's goal was to migrate the existing product to the new interface with their help. Once their contracts were up, internal developers would be assigned to own the product, and we would move into a second phase where we could look at developing new features that didn't exist in the original product. This would require new designs and flexibility with the existing designs. So while my team feels confident in the product in its current form, I am also looking ahead to iterating the product and brainstorming how to further improve its function for the users.
Want to explore the new CS App?
{
}
bottom of page