Simcard Auction
Admin Panel System Redesign
of Hamrahe Aval (MCI)
Timeline:
2023, 14 weeks
My Roles:
Product Designer,
Service Designer
Product Manager,
Project Manager
About Service & Project Background
About Service
Hamrahe Aval (MCI), the largest telecommunications company in Iran with over 75 million active subscribers and one of the largest mobile operators in the Middle East, holds a monthly auction of valuable and expensive SIM cards. The auction is conducted through a system that includes a website and an admin panel. Company employees and general managers use the admin panel to manage the the auction process, including setting the starting price, accepting bids, and awarding the winning bid.
Project Background
The admin panel and website of the Rond system were outdated and inefficient. Many tasks were done manually, which increased the error rate and the time it took to complete tasks. I proposed to redesign the system to improve efficiency and reduce errors.
The redesign of the system focused on the following areas:
Improving the user interface and experience of the websit
Automating tasks to reduce manual work
Providing new features and functionality
to improve efficiency
Improving customer experience directly and indirectly.
The project consisted of two phases: the first phase was the redesign of the admin panel, and the second phase was the redesign of the Rond website. This case study focuses on the first phase, the redesign of the admin panel.
My Roles & Duties
As a Product Designer
User Research: I conducted research to understand user needs, challenges, and behaviors related to the admin panel, website and auction process.
Information Architecture: I created sitemap to organize content and features in a way that is efficient and intuitive for users.
Wireframes: I built them to refine design ideas with stakeholders.
Visual Design: I developed user interface for the website and admin panel, emphasizing usability and aesthetics.
Collaboration: I interacted with the rest of the team, which included an admin, a front-end developer, a back-end developer, and a representative of the IT (tech) team.
As a Service Designer
Service Journey Mapping: I analyzed the entire service journey, from initial user contact to auction completion, identifying touchpoints and potential improvements.
Stakeholders Interview: I interviewed key stakeholders across departments (employees, managers, customers) to understand their needs and challenges.
Flow Optimization: I designed a new service flow, taking into account technical capabilities, to reduce manual tasks as much as possible, eliminate unnecessary steps or bottlenecks, increase the speed and accuracy of work for employees, and make the auction process easier for customers.
As a Product Manager
Market Research: I analyzed competitors and industry trends to inform design decisions.
Prioritization: I managed the project scope, prioritizing features and ensuring resources were allocated effectively.
Communication: I maintained communication with stakeholders, including executives, and development teams.
As a Project Manager
Team Management: I managed the project team, ensuring clear communication, collaboration, and task adherence.
Reporting: I presented project progress reports to stakeholders.
Challenges & Limitations
Wearing Many Hats: Juggling multiple roles with low prior experience. Having to do the work of multiple roles that I had low experience in (except product design), and the high volume of work. For example, product management, service design, and project management.
Against the Clock: A compressed timeline for research, design, and implementation.
Blind Spot: Lack of access to a similar panel to get ideas and analyze competitors.
Agility Snagged: The bureaucratic bottleneck of a large organization prevented work from being carried out in an agile way, resulting in wasted time.
Spanning the Landscape: Coordinating geographically dispersed teams. For example, the front-end developer worked part-time outside the company, and the back-end developer, who worked for a contractor company, was in another city. This made it difficult to coordinate meetings and follow up on work.
Tech Tug-of-War: Bridging front-end, back-end, and IT prioritie over how and what technology to implement, and the effort to find a suitable solution in the shortest possible time was difficult.
Mastering the Juggling Act: The existence of different stakeholders who use this admin panel to do auction-related tasks. For example, sales business teams, financial affairs, accounting, and several general managers used this system to do auction-related tasks, each of whom had their own concerns.
Bridging the Gap: From undocumented chaos to a structured admin panel
Empathy
Current State - 1
Admin Panel Review
Since I didn't have any info about the admin panel, I decided to interview the people who use it. But before asking questions, I needed to learn about the panel myself. So, I reviewed panel to get a basic idea and to figure out what to ask during the interviews. I also became familiar with the flow of work related to before, during, and after the auction by talking to the admin. I documented the different items, sub-items, table items, etc.
My Limitations: The main challenge I faced in this stage was that the admin panel was one of the company's internal systems and required permissions to access it. Since MCI is a large organization, its processes are not agile and it took several days to obtain the permissions.
Admin Panel Review Datas
Current Sitemaps
The information architecture, or how things were arranged on the panel, had big issues. To get a clearer picture, I extracted the site map,which shows the layout of all the pages and connections.
I crafted a sitemap tailored to each user role within the admin panel.
Current Sitemaps
Interviews
Background
The purpose of the interviews was to extract all workflow details, divided by role. We also wanted to identify the pain points of employees who worked with the admin panel and hear their potential suggestions for improving the performance of the admin panel.
Design Structure and Conduct
After careful consideration, I selected the individuals I needed to interview. These individuals included the admin, an accountant, and a finance specialist. The basis for selecting these individuals was their crucial roles in the auction definition and processing workflow.
Since there was no existing documentation of the admin panel, I opted for an open-ended interview format. I began by asking the participants about their work processes and interactions with other project stakeholders. I then asked follow-up questions based on the participants' responses.
During the interviews, I took notes and recorded the participants' voices. This allowed me to refer back to the interviews later and gain a deeper understanding of the participants' experiences and insights.
Documentation
After completing the interviews, I decided to document the interview data using a time-consuming but effective method. I listened to the audio of all the interviews and entered and wrote them in FigJam. However, in order to save time, I searched for software for this task and I could find the Dovetail website, which converts audio to text and has many other great features. Unfortunately, it does not support the Persian language.
Interview Section Datas
While writing the transcripts and during the review for data analysis, I bolded the important sections.
Bolded Notes in Figjam
Initial Outputs
In the initial review during the interviews and documenting the data, the most common problem that the interviewees mentioned was:
Unattractive and outdated appearance
Illegible font
Performing many essential tasks manually and non-systemically, which caused waste of time and increased the error rate of individuals.
Current State - 2
Current User Flows
The SIM card auction's complexity defied standard user flow mapping. My interview data and panel reviews weren't enough. So, I used a cross-functional approach, mapping each team's journey and pinpointing task handoffs. Time-segmented sections clarified the auction phases, revealing the tangled web of responsibilities.
Note: To gain a comprehensive understanding of the SIM card auction flow, I extracted the customer flow in addition to the admin panel flow.
Current User Flows
Define & Ideation
Analysis & Ideas
After collecting the necessary information, I first analyzed the data to generate ideas. The data came from reviewing the admin panel, interviewing users, examining the sitemap, and mapping user flows. The interviews and user flows provided the most helpful insights.
To generate ideas, I decided to first identify the problems and then come up with a solution for each problem. I also took a broader look at the issue to come up with new and creative ideas. Additionally, because the next phase of the project was to redesign the Rand website, I had to ensure that the admin panel changes would seamlessly support future website changes to provide a seamless user experience.
The ideas were well-received by stakeholders, who also contributed their own ideas.
Problems & Ideas
Problems
The number definition process was inefficient and error-prone.
There were limitations on the types of auctions that could be defined.
The admin had limited control over the display of numbers on the website.
There was a lack of statistical and graphical information for the admin.
The status of SIM cards was not visible to the admin.
The auction approval process was inefficient.
Customers could not leave comments on the website.
Many tasks were done manually, which was inefficient and error-prone.
Ideas
Here are some of the ideas I proposed:
Implementing three-step auction creation process for enhanced user experience and task completion time optimization.
Enabling bulk list upload through Excel integration and implementing a robust search system to facilitate efficient number management.
Adding the ability to define precise start and end dates and times for greater auction flexibility.
Introducing functionality for the concurrent creation of both single and bundle auctions to cater to diverse user needs.
Developing a preview mode enabling real-time visualization of SIM cards on the website and incorporating manual sorting capability for enhanced user control.
Establishing a dedicated reporting, statistics, and charting section to provide in-depth data analysis and decision-making support.
Creating an integration between two widely used systems to automate manual processes and improve overall efficiency.
New Sitemaps
To improve communication and collaboration between designer and other stakeholders, improved navigation and reduct cognitive loads for customers, I created a new sitemap base on research results.
New Sitemaps
New User Flows
Recognizing the intricate web of the auction flow, I prioritized the creation of a user flow informed by research findings. This detailed map, outlining user actions for task completion, facilitated the identification of potential obstacles and inefficient tasks. Subsequent sharing and feedback exchange with stakeholders fostered stronger collaboration and simplified the process of advocating for the final design.
Note: The customer flow is not defined in this section. This flow will be completed in the website design phase.
New User Flows
Low-Fi Designs
Sketches
In accordance with my usual process for entering the visual design phase, after reviewing the problems, ideas, and solutions, I drew a paper prototype. After drawing the sketches, I presented them in a meeting with the team lead and administrator and received feedback. Some of these sketches are shown below.
Sketches
Mid-Fi Designs
Wireframes
Recognizing the need for early technical feasibility assessment of my innovative design concepts, I opted to bypass low-fidelity sketches for a more nuanced discussion. Accordingly, I prepared wireframes incorporating a comprehensive level of detail and convened a meeting with the technical team, encompassing front-end and back-end developers as well as an IT representative, to facilitate collaborative evaluation and potential adaptation of the proposed design.
Wireframes
Overview of Wireframes
After thoroughly outlining all wireframe sections to the technical team, their valuable feedback led to some flow optimizations. Importantly, the meeting confirmed the technical viability of automating manual processes via a two-system integration, paving the way for a vastly improved user experience.
High-Fi Designs
Typography & Colors
Hamrah Aval's corporate colors are orange and turquoise, but the color chosen for the Rond system is navy blue. This is due to the company's ongoing rebranding, which will officially launch in the near future (Hamrah Aval is using a combination of these two colors at various exhibitions). The new colors will be navy blue and gray. Additionally, navy blue is a fitting color for the Rand system, which has a luxurious identity.
Typography & Colors
Comonents & Iconography
Due to time constraints, the design of the components and icons was done during the high-fi design.
Comonents & Iconography
Old Designs
As you can see, the old design is not very user-friendly or visually appealing. The text is small and difficult to read, and the overall layout is cluttered and confusing and many other problems that were mentioned in the previous sections.
Note: Due to the presence of sensitive information, the pages are blurred.
Old Designs
Final Designs
In this section, a number of flows will be explained.
Note: These designs showcase the complete admin panel functionality. Role-based access control ensures each user only sees and accesses features relevant to their responsibilities, optimizing efficiency and security.
Creation of a Counter & Simcard Auction
In the new design, the process of defining SIM cards has been simplified because the user can both upload an Excel file and easily find the desired SIM card from the number repository using advanced search.
In addition to single-SIM card auctions, the possibility of defining bundle auctions has also been predicted, and this has been made possible through number coding.
The possibility of defining auctions under 24 hours has been created.
The possibility of changing the order of display of the numbers has been created.
The possibility of preview has been included so that the admin can see the state in which the numbers are placed on the site
Creation of a Counter & Simcard Auction
Current Tasks
Here is a snippet of the flow. Some of my ideas are:
I came up with the idea of “Current Tasks” for the affairs of each access level. This idea came from the fact that the auction is held every month or one and a half months, and the admin panel users only have tasks at certain times. And one of the things that was raised as a pain point in interviews was the repeated checking of the system so that the user could see if they had a new task or not, which was also solved with this idea.
Another idea that has been designed that covers both the employee side and the customer side is the idea of uploading a payment receipt. This is done by the customer uploading their payment receipt and the panel user then checks its validity.
Current Tasks
Here you can see an overview of designs.
High-Fi Designs
Documents
Permissions
The different access levels for the simcard auction admin panel were defined and documented. This documentation included a list of the items that each access level could see in the admin panel
Permissions List
Current Tasks
A list of current tasks was created and documented for each access level.
Current Tasks List
What I Learned
I successfully completed this challenging project on my own, strengthening my hard skills and gaining more experience in soft skills like negotiation, leading meetings, and leading people. I realized that involving the stakeholders earlier in the project could have resulted in better outcomes. I also learned how to better interact with different teams, especially the technical team.
Other Works
Need Help with A Project?
Let’s Talk
Redesigning Simcard Auction
Admin Panel System
of Hamrahe Aval (MCI)
Timeline:
2023, 14 weeks
My Roles:
Product Designer,
Service Designer
Product Manager,
Project Manager
About Service & Project Background
About Service
Hamrahe Aval (MCI), the largest telecommunications company in Iran with over 75 million active subscribers and one of the largest mobile operators in the Middle East, holds a monthly auction of valuable and expensive SIM cards. The auction is conducted through a system that includes a website and an admin panel. Company employees and general managers use the admin panel to manage the the auction process, including setting the starting price, accepting bids, and awarding the winning bid.
Project Background
The admin panel and website of the Rond system were outdated and inefficient. Many tasks were done manually, which increased the error rate and the time it took to complete tasks. I proposed to redesign the system to improve efficiency and reduce errors.
The redesign of the system focused on the following areas:
Improving the user interface and experience of the website
Automating tasks to reduce manual work
Providing new features and functionality to improve efficiency
Improving customer experience directly and indirectly.
The project consisted of two phases: the first phase was the redesign of the admin panel, and the second phase was the redesign of the Rond website. This case study focuses on the first phase, the redesign of the admin panel.
My Roles & Duties
As a Product Designer
User Research: I conducted research to understand user needs, challenges, and behaviors related to the admin panel, website and auction process.
Information Architecture: I created sitemap to organize content and features in a way that is efficient and intuitive for users.
Wireframes: I built them to refine design ideas with stakeholders.
Visual Design: I developed user interface for the website and admin panel, emphasizing usability and aesthetics.
Collaboration: I interacted with the rest of the team, which included an admin, a front-end developer, a back-end developer, and a representative of the IT (tech) team.
As a Service Designer
Service Journey Mapping: I analyzed the entire service journey, from initial user contact to auction completion, identifying touchpoints and potential improvements.
Stakeholders Interview: I interviewed key stakeholders across departments (employees, managers, customers) to understand their needs and challenges.
Flow Optimization: I designed a new service flow, taking into account technical capabilities, to reduce manual tasks as much as possible, eliminate unnecessary steps or bottlenecks, increase the speed and accuracy of work for employees, and make the auction process easier for customers.
As a Mroduct Manager
Market Research: I analyzed competitors and industry trends to inform design decisions.
Prioritization: I managed the project scope, prioritizing features and ensuring resources were allocated effectively.
Communication: I maintained communication with stakeholders, including executives, and development teams.
As a Project Manager
Team Management: I managed the project team, ensuring clear communication, collaboration, and task adherence.
Reporting: I presented project progress reports to stakeholders.
Challenges & Limitations
Wearing Many Hats: Juggling multiple roles with low prior experience. Having to do the work of multiple roles that I had low experience in (except product design), and the high volume of work. For example, product management, service design, and project management.
Against the Clock: A compressed timeline for research, design, and implementation.
Blind Spot: Lack of access to a similar panel to get ideas and analyze competitors.
Agility Snagged: The bureaucratic bottleneck of a large organization prevented work from being carried out in an agile way, resulting in wasted time.
Spanning the Landscape: Coordinating geographically dispersed teams. For example, the front-end developer worked part-time outside the company, and the back-end developer, who worked for a contractor company, was in another city. This made it difficult to coordinate meetings and follow up on work.
Tech Tug-of-War: Bridging front-end, back-end, and IT prioritie over how and what technology to implement, and the effort to find a suitable solution in the shortest possible time was difficult.
Mastering the Juggling Act: The existence of different stakeholders who use this admin panel to do auction-related tasks. For example, sales business teams, financial affairs, accounting, and several general managers used this system to do auction-related tasks, each of whom had their own concerns.
Bridging the Gap: From undocumented chaos to a structured admin panel
Empathy
Current State - 1
Admin Panel Review
Since I didn't have any info about the admin panel, I decided to interview the people who use it. But before asking questions, I needed to learn about the panel myself. So, I reviewed panel to get a basic idea and to figure out what to ask during the interviews. I also became familiar with the flow of work related to before, during, and after the auction by talking to the admin. I documented the different items, sub-items, table items, etc.
My Limitations: The main challenge I faced in this stage was that the admin panel was one of the company's internal systems and required permissions to access it. Since MCI is a large organization, its processes are not agile and it took several days to obtain the permissions.
Admin Panel Review Datas
Current Sitemaps
The information architecture, or how things were arranged on the panel, had big issues. To get a clearer picture, I extracted the site map,which shows the layout of all the pages and connections.
I crafted a sitemap tailored to each user role within the admin panel.
Current Sitemaps
Interviews
Background
The purpose of the interviews was to extract all workflow details, divided by role. We also wanted to identify the pain points of employees who worked with the admin panel and hear their potential suggestions for improving the performance of the admin panel.
Design Structure and Conduct
After careful consideration, I selected the individuals I needed to interview. These individuals included the admin, an accountant, and a finance specialist. The basis for selecting these individuals was their crucial roles in the auction definition and processing workflow.
Since there was no existing documentation of the admin panel, I opted for an open-ended interview format. I began by asking the participants about their work processes and interactions with other project stakeholders. I then asked follow-up questions based on the participants' responses.
During the interviews, I took notes and recorded the participants' voices. This allowed me to refer back to the interviews later and gain a deeper understanding of the participants' experiences and insights.
Documentation
After completing the interviews, I decided to document the interview data using a time-consuming but effective method. I listened to the audio of all the interviews and entered and wrote them in FigJam. However, in order to save time, I searched for software for this task and I could find the Dovetail website, which converts audio to text and has many other great features. Unfortunately, it does not support the Persian language.
Interview Section Datas
While writing the transcripts and during the review for data analysis, I bolded the important sections.
Bolded Notes in Figjam
Initial Outputs
In the initial review during the interviews and documenting the data, the most common problem that the interviewees mentioned was:
Unattractive and outdated appearance
Illegible font
Performing many essential tasks manually and non-systemically, which caused waste of time and increased the error rate of individuals.
Current State - 2
Current User Flows
The SIM card auction's complexity defied standard user flow mapping. My interview data and panel reviews weren't enough. So, I used a cross-functional approach, mapping each team's journey and pinpointing task handoffs. Time-segmented sections clarified the auction phases, revealing the tangled web of responsibilities.
Note: To gain a comprehensive understanding of the SIM card auction flow, I extracted the customer flow in addition to the admin panel flow.
Current User Flows
Define & Ideation
Analysis & Ideas
After collecting the necessary information, I first analyzed the data to generate ideas. The data came from reviewing the admin panel, interviewing users, examining the sitemap, and mapping user flows. The interviews and user flows provided the most helpful insights.
To generate ideas, I decided to first identify the problems and then come up with a solution for each problem. I also took a broader look at the issue to come up with new and creative ideas. Additionally, because the next phase of the project was to redesign the Rand website, I had to ensure that the admin panel changes would seamlessly support future website changes to provide a seamless user experience.
The ideas were well-received by stakeholders, who also contributed their own ideas.
Problems & Ideas
Problems
The number definition process was inefficient and error-prone.
There were limitations on the types of auctions that could be defined.
The admin had limited control over the display of numbers on the website.
There was a lack of statistical and graphical information for the admin.
The status of SIM cards was not visible to the admin.
The auction approval process was inefficient.
Customers could not leave comments on the website.
Many tasks were done manually, which was inefficient and error-prone.
Ideas
Here are some of the ideas I proposed:
Implementing three-step auction creation process for enhanced user experience and task completion time optimization.
Enabling bulk list upload through Excel integration and implementing a robust search system to facilitate efficient number management.
Adding the ability to define precise start and end dates and times for greater auction flexibility.
Introducing functionality for the concurrent creation of both single and bundle auctions to cater to diverse user needs.
Developing a preview mode enabling real-time visualization of SIM cards on the website and incorporating manual sorting capability for enhanced user control.
Establishing a dedicated reporting, statistics, and charting section to provide in-depth data analysis and decision-making support.
Creating an integration between two widely used systems to automate manual processes and improve overall efficiency.
New Sitemaps
To improve communication and collaboration between designer and other stakeholders, improved navigation and reduct cognitive loads for customers, I created a new sitemap base on research results.
New Sitemaps
New User Flows
Recognizing the intricate web of the auction flow, I prioritized the creation of a user flow informed by research findings. This detailed map, outlining user actions for task completion, facilitated the identification of potential obstacles and inefficient tasks. Subsequent sharing and feedback exchange with stakeholders fostered stronger collaboration and simplified the process of advocating for the final design.
Note: The customer flow is not defined in this section. This flow will be completed in the website design phase.
New User Flows
Low-Fi Designs
Sketches
In accordance with my usual process for entering the visual design phase, after reviewing the problems, ideas, and solutions, I drew a paper prototype. After drawing the sketches, I presented them in a meeting with the team lead and administrator and received feedback. Some of these sketches are shown below.
Sketches
Mid-Fi Designs
Wireframes
Recognizing the need for early technical feasibility assessment of my innovative design concepts, I opted to bypass low-fidelity sketches for a more nuanced discussion. Accordingly, I prepared wireframes incorporating a comprehensive level of detail and convened a meeting with the technical team, encompassing front-end and back-end developers as well as an IT representative, to facilitate collaborative evaluation and potential adaptation of the proposed design.
Wireframes
Overview of Wireframes
After thoroughly outlining all wireframe sections to the technical team, their valuable feedback led to some flow optimizations. Importantly, the meeting confirmed the technical viability of automating manual processes via a two-system integration, paving the way for a vastly improved user experience.
High-Fi Designs
Typography & Colors
Hamrah Aval's corporate colors are orange and turquoise, but the color chosen for the Rond system is navy blue. This is due to the company's ongoing rebranding, which will officially launch in the near future (Hamrah Aval is using a combination of these two colors at various exhibitions). The new colors will be navy blue and gray. Additionally, navy blue is a fitting color for the Rand system, which has a luxurious identity.
الف ب پ ت ث ج چ ح خ د ذ ر ز ژ س ش ص ض ط ظ ع غ ف ق ک گ ل م ن و ه ی
۰ ۹ ۸ ۷ ۶ ۵ ۴ ۳ ۲ ۱
Regular
Medium
DemiBold
Bold
الفآ
ایران سنس
IRANSansX
Typography & Colors
Comonents & Iconography
Due to time constraints, the design of the components and icons was done during the high-fi design.
Comonents & Iconography
Old Designs
As you can see, the old design is not very user-friendly or visually appealing. The text is small and difficult to read, and the overall layout is cluttered and confusing and many other problems that were mentioned in the previous sections.
Note: Due to the presence of sensitive information, the pages are blurred.
Old Designs
Final Designs
In this section, a number of flows will be explained.
Note: These designs showcase the complete admin panel functionality. Role-based access control ensures each user only sees and accesses features relevant to their responsibilities, optimizing efficiency and security.
Creation of a Counter & Simcard Auction
In the new design, the process of defining SIM cards has been simplified because the user can both upload an Excel file and easily find the desired SIM card from the number repository using advanced search.
In addition to single-SIM card auctions, the possibility of defining bundle auctions has also been predicted, and this has been made possible through number coding.
The possibility of defining auctions under 24 hours has been created.
The possibility of changing the order of display of the numbers has been created.
The possibility of preview has been included so that the admin can see the state in which the numbers are placed on the site
Creation of a Counter & Simcard Auction
Current Tasks
Here is a snippet of the flow. Some of my ideas are:
I came up with the idea of “Current Tasks” for the affairs of each access level. This idea came from the fact that the auction is held every month or one and a half months, and the admin panel users only have tasks at certain times. And one of the things that was raised as a pain point in interviews was the repeated checking of the system so that the user could see if they had a new task or not, which was also solved with this idea.
Another idea that has been designed that covers both the employee side and the customer side is the idea of uploading a payment receipt. This is done by the customer uploading their payment receipt and the panel user then checks its validity.
Current Tasks
Here you can see an overview of designs.
High-Fi Designs
Documents
Permissions
The different access levels for the simcard auction admin panel were defined and documented. This documentation included a list of the items that each access level could see in the admin panel
Permissions List
Current Tasks
A list of current tasks was created and documented for each access level.
Current Tasks List
What I Learned
I successfully completed this challenging project on my own, strengthening my hard skills and gaining more experience in soft skills like negotiation, leading meetings, and leading people. I realized that involving the stakeholders earlier in the project could have resulted in better outcomes. I also learned how to better interact with different teams, especially the technical team.
Other Works
Need Help with A Project?
Let’s Talk
Simcard Auction
Admin Panel System Redesign
of Hamrahe Aval (MCI)
Content List
About Service & Project Background
About Service
Hamrahe Aval (MCI), the largest telecommunications company in Iran with over 75 million active subscribers and one of the largest mobile operators in the Middle East, holds a monthly auction of valuable and expensive SIM cards. The auction is conducted through a system that includes a website and an admin panel. Company employees and general managers use the admin panel to manage the the auction process, including setting the starting price, accepting bids, and awarding the winning bid.
Project Background
The admin panel and website of the Rond system were outdated and inefficient. Many tasks were done manually, which increased the error rate and the time it took to complete tasks. I proposed to redesign the system to improve efficiency and reduce errors.
The redesign of the system focused on the following areas:
Improving the user interface and experience of the website
Automating tasks to reduce manual work
Providing new features and functionality to improve efficiency
Improving customer experience directly and indirectly.
The project consisted of two phases: the first phase was the redesign of the admin panel, and the second phase was the redesign of the Rond website. This case study focuses on the first phase, the redesign of the admin panel.
My Roles & Duties
As a Product Designer
User Research: I conducted research to understand user needs, challenges, and behaviors related to the admin panel, website and auction process.
Information Architecture: I created sitemap to organize content and features in a way that is efficient and intuitive for users.
Wireframes: I built them to refine design ideas with stakeholders.
Visual Design: I developed user interface for the website and admin panel, emphasizing usability and aesthetics.
Collaboration: I interacted with the rest of the team, which included an admin, a front-end developer, a back-end developer, and a representative of the IT (tech) team.
As a Service Designer
Service Journey Mapping: I analyzed the entire service journey, from initial user contact to auction completion, identifying touchpoints and potential improvements.
Stakeholders Interview: I interviewed key stakeholders across departments (employees, managers, customers) to understand their needs and challenges.
Flow Optimization: I designed a new service flow, taking into account technical capabilities, to reduce manual tasks as much as possible, eliminate unnecessary steps or bottlenecks, increase the speed and accuracy of work for employees, and make the auction process easier for customers.
Challenges & Limitations
Wearing Many Hats: Juggling multiple roles with low prior experience. Having to do the work of multiple roles that I had low experience in (except product design), and the high volume of work. For example, product management, service design, and project management.
Against the Clock: A compressed timeline for research, design, and implementation.
Blind Spot: Lack of access to a similar panel to get ideas and analyze competitors.
Agility Snagged: The bureaucratic bottleneck of a large organization prevented work from being carried out in an agile way, resulting in wasted time.
Spanning the Landscape: Coordinating geographically dispersed teams. For example, the front-end developer worked part-time outside the company, and the back-end developer, who worked for a contractor company, was in another city. This made it difficult to coordinate meetings and follow up on work.
Tech Tug-of-War: Bridging front-end, back-end, and IT prioritie over how and what technology to implement, and the effort to find a suitable solution in the shortest possible time was difficult.
Mastering the Juggling Act: The existence of different stakeholders who use this admin panel to do auction-related tasks. For example, sales business teams, financial affairs, accounting, and several general managers used this system to do auction-related tasks, each of whom had their own concerns.
Bridging the Gap: From undocumented chaos to a structured admin panel
Empathy
Current State - 1
Admin Panel Review
Since I didn't have any info about the admin panel, I decided to interview the people who use it. But before asking questions, I needed to learn about the panel myself. So, I reviewed panel to get a basic idea and to figure out what to ask during the interviews. I also became familiar with the flow of work related to before, during, and after the auction by talking to the admin. I documented the different items, sub-items, table items, etc.
My Limitations: The main challenge I faced in this stage was that the admin panel was one of the company's internal systems and required permissions to access it. Since MCI is a large organization, its processes are not agile and it took several days to obtain the permissions.
Admin Panel Review Datas
Current Sitemaps
The information architecture, or how things were arranged on the panel, had big issues. To get a clearer picture, I extracted the site map,which shows the layout of all the pages and connections.
I crafted a sitemap tailored to each user role within the admin panel.
Current Sitemaps
Interviews
Background
The purpose of the interviews was to extract all workflow details, divided by role. We also wanted to identify the pain points of employees who worked with the admin panel and hear their potential suggestions for improving the performance of the admin panel.
Design Structure and Conduct
After careful consideration, I selected the individuals I needed to interview. These individuals included the admin, an accountant, and a finance specialist. The basis for selecting these individuals was their crucial roles in the auction definition and processing workflow.
Since there was no existing documentation of the admin panel, I opted for an open-ended interview format. I began by asking the participants about their work processes and interactions with other project stakeholders. I then asked follow-up questions based on the participants' responses.
During the interviews, I took notes and recorded the participants' voices. This allowed me to refer back to the interviews later and gain a deeper understanding of the participants' experiences and insights.
Documentation
After completing the interviews, I decided to document the interview data using a time-consuming but effective method. I listened to the audio of all the interviews and entered and wrote them in FigJam. However, in order to save time, I searched for software for this task and I could find the Dovetail website, which converts audio to text and has many other great features. Unfortunately, it does not support the Persian language.
Interview Section Datas
While writing the transcripts and during the review for data analysis, I bolded the important sections.
Bolded Notes in Figjam
Initial Outputs
In the initial review during the interviews and documenting the data, the most common problem that the interviewees mentioned was:
Unattractive and outdated appearance
Illegible font
Performing many essential tasks manually and non-systemically, which caused waste of time and increased the error rate of individuals.
Current State - 2
Current User Flows
The SIM card auction's complexity defied standard user flow mapping. My interview data and panel reviews weren't enough. So, I used a cross-functional approach, mapping each team's journey and pinpointing task handoffs. Time-segmented sections clarified the auction phases, revealing the tangled web of responsibilities.
Note: To gain a comprehensive understanding of the SIM card auction flow, I extracted the customer flow in addition to the admin panel flow.
Current User Flows
Define & Ideation
Analysis & Ideas
After collecting the necessary information, I first analyzed the data to generate ideas. The data came from reviewing the admin panel, interviewing users, examining the sitemap, and mapping user flows. The interviews and user flows provided the most helpful insights.
To generate ideas, I decided to first identify the problems and then come up with a solution for each problem. I also took a broader look at the issue to come up with new and creative ideas. Additionally, because the next phase of the project was to redesign the Rand website, I had to ensure that the admin panel changes would seamlessly support future website changes to provide a seamless user experience.
The ideas were well-received by stakeholders, who also contributed their own ideas.
Problems & Ideas
Problems
The number definition process was inefficient and error-prone.
There were limitations on the types of auctions that could be defined.
The admin had limited control over the display of numbers on the website.
There was a lack of statistical and graphical information for the admin.
The status of SIM cards was not visible to the admin.
The auction approval process was inefficient.
Customers could not leave comments on the website.
Many tasks were done manually, which was inefficient and error-prone.
Ideas
Here are some of the ideas I proposed:
Implementing three-step auction creation process for enhanced user experience and task completion time optimization.
Enabling bulk list upload through Excel integration and implementing a robust search system to facilitate efficient number management.
Adding the ability to define precise start and end dates and times for greater auction flexibility.
Introducing functionality for the concurrent creation of both single and bundle auctions to cater to diverse user needs.
Developing a preview mode enabling real-time visualization of SIM cards on the website and incorporating manual sorting capability for enhanced user control.
Establishing a dedicated reporting, statistics, and charting section to provide in-depth data analysis and decision-making support.
Creating an integration between two widely used systems to automate manual processes and improve overall efficiency.
New Sitemaps
To improve communication and collaboration between designer and other stakeholders, improved navigation and reduct cognitive loads for customers, I created a new sitemap base on research results.
New Sitemaps
New User Flows
Recognizing the intricate web of the auction flow, I prioritized the creation of a user flow informed by research findings. This detailed map, outlining user actions for task completion, facilitated the identification of potential obstacles and inefficient tasks. Subsequent sharing and feedback exchange with stakeholders fostered stronger collaboration and simplified the process of advocating for the final design.
Note: The customer flow is not defined in this section. This flow will be completed in the website design phase.
New User Flows
Low-Fi Designs
Sketches
In accordance with my usual process for entering the visual design phase, after reviewing the problems, ideas, and solutions, I drew a paper prototype. After drawing the sketches, I presented them in a meeting with the team lead and administrator and received feedback. Some of these sketches are shown below.
Sketches
Mid-Fi Designs
Wireframes
Recognizing the need for early technical feasibility assessment of my innovative design concepts, I opted to bypass low-fidelity sketches for a more nuanced discussion. Accordingly, I prepared wireframes incorporating a comprehensive level of detail and convened a meeting with the technical team, encompassing front-end and back-end developers as well as an IT representative, to facilitate collaborative evaluation and potential adaptation of the proposed design.
Wireframes
Overview of Wireframes
After thoroughly outlining all wireframe sections to the technical team, their valuable feedback led to some flow optimizations. Importantly, the meeting confirmed the technical viability of automating manual processes via a two-system integration, paving the way for a vastly improved user experience.
High-Fi Designs
Typography & Colors
Hamrah Aval's corporate colors are orange and turquoise, but the color chosen for the Rond system is navy blue. This is due to the company's ongoing rebranding, which will officially launch in the near future (Hamrah Aval is using a combination of these two colors at various exhibitions). The new colors will be navy blue and gray. Additionally, navy blue is a fitting color for the Rand system, which has a luxurious identity.
الف ب پ ت ث ج چ ح خ د ذ ر ز ژ س ش ص ض ط ظ ع غ ف ق ک گ ل م ن و ه ی
۰ ۹ ۸ ۷ ۶ ۵ ۴ ۳ ۲ ۱
Regular
Medium
DemiBold
Bold
الفآ
ایران سنس
IRANSansX
Typography & Colors
Comonents & Iconography
Due to time constraints, the design of the components and icons was done during the high-fi design.
Comonents & Iconography
Old Designs
As you can see, the old design is not very user-friendly or visually appealing. The text is small and difficult to read, and the overall layout is cluttered and confusing and many other problems that were mentioned in the previous sections.
Note: Due to the presence of sensitive information, the pages are blurred.
Old Designs
Final Designs
In this section, a number of flows will be explained.
Note: These designs showcase the complete admin panel functionality. Role-based access control ensures each user only sees and accesses features relevant to their responsibilities, optimizing efficiency and security.
Creation of a Counter & Simcard Auction
In the new design, the process of defining SIM cards has been simplified because the user can both upload an Excel file and easily find the desired SIM card from the number repository using advanced search.
In addition to single-SIM card auctions, the possibility of defining bundle auctions has also been predicted, and this has been made possible through number coding.
The possibility of defining auctions under 24 hours has been created.
The possibility of changing the order of display of the numbers has been created.
The possibility of preview has been included so that the admin can see the state in which the numbers are placed on the site
Creation of a Counter & Simcard Auction
Current Tasks
Here is a snippet of the flow. Some of my ideas are:
I came up with the idea of “Current Tasks” for the affairs of each access level. This idea came from the fact that the auction is held every month or one and a half months, and the admin panel users only have tasks at certain times. And one of the things that was raised as a pain point in interviews was the repeated checking of the system so that the user could see if they had a new task or not, which was also solved with this idea.
Another idea that has been designed that covers both the employee side and the customer side is the idea of uploading a payment receipt. This is done by the customer uploading their payment receipt and the panel user then checks its validity.
Current Tasks
Here you can see an overview of designs.
High-Fi Designs
Documents
Permissions
The different access levels for the simcard auction admin panel were defined and documented. This documentation included a list of the items that each access level could see in the admin panel
Permissions List
Current Tasks
A list of current tasks was created and documented for each access level.
Current Tasks List
What I Learned
I successfully completed this challenging project on my own, strengthening my hard skills and gaining more experience in soft skills like negotiation, leading meetings, and leading people. I realized that involving the stakeholders earlier in the project could have resulted in better outcomes. I also learned how to better interact with different teams, especially the technical team.