About Roundbox Solutions

Roundbox Solutions Services is a fast-growing System Integrator and distributor vendor that specializes in the provision of ICT multi brands solutions to enhance the flow of business activities.

About Project

Roundbox solution is an ICT company where I did my industrial training, during my time with the company, I saw lapses in their mode of delivery of services, hence i reached out to the director for a better re-design of their product and brand. It was a welcome idea, and I was happy to take on the project as well being the company i have a great relationship with.

Scope of Work: Mobile App

Timeline: Aug to Sept. 2023

Team: Solo

The Problem

Prior to the moment, there was little or no online shop for security and networking materials, inefficient systems for browsing through products, and confusing checkout processes for the few that were available.

The Goal

Roundbox mobile app is to be user friendly by providing clear navigation and offering a fast checkout process of all items purchased and remote delivery.

My Responsibilities

My role is a Product designer solely leading the Roundbox Mobile app. My responsibilities cut across conducting interviews, digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.

Scope of work

Scope of work cut across conducting interviews, digital wireframing, low and high-fidelity prototyping, conducting usability study, accounting for accessibility and iterating on designs

• Research: Research was done by Conducting interviews with old and new customers. Survey was done and questionnaires sent out to clients they rendered services for.
• Wireframe: Having conducted a very proper research, wireframe was drawn on paper then transformed to digital wireframe.
• Hi-Fi Prototyping: From Digital wireframe, low fidelity prototype was skipped to save time and resources, the scope went straight to Hi-Fidelity design and prototype.
• Usability Studies: Time was dedicated for usability study where pain points were uncovered in Cart and checkout section.
• Accessibility: Ensured the portal met WCAG 2.1 accessibility standards, making it usable for all users.

The Process

Every step of design process was gently observed for seamless user-centered design. These steps include Empathizing with users, defining of pain points, design sprint to ideate, prototyping and usability testing for iteration.

• Empathize: I observed the excruciating stress often experienced by engineers while trying to procure items they need to render their service and the need to ease the process.
• Define: Pain points include limited online shopping for ICT/networking product in my city, those available were not user friendly and checking out of product is frustrating.
• Ideate: Competitive audit was initially carried out, followed by design spring and crazy eight. After close scrutinization, best ideas were picked.
• Prototype: High fidelity wireframe was designed, and interaction was drawn frame to frame for a perfect user and task flow.
• Test: Usability test was conducted at every phase, from digital wireframe to hi-fidelity mockup and also on final prototype, leading to iteration.

Methodology

To gather comprehensive insights, a mixed-method approach was used, including competitive analysis, user surveys, user interviews, and usability testing.

Competitive Analysis

Objective: Understand industry standards and identify unique features that can be adopted.

Competitors Analyzed:

• Cisco
• Netgear
• TP-Link
• Ubiquiti Networks

Key Metrics:

• Homepage design and layout
• Navigation structure
• Search functionality
• Product page design
• Checkout process

User Surveys

Objective: Gather quantitative data on user preferences, behavior, and pain points.

Sample Size: 300 participants

Key Questions:

• How often do you purchase network equipment online?
• What features are most important to you in a mobile shopping app?
• What frustrates you the most when shopping for network equipment online?

User Interviews

Objective: Obtain qualitative insights into user behavior, motivations, and challenges.

Sample Size: 15 participants

Interview Guide:

• Describe your typical process for purchasing network equipment online.
• What do you like most about your favorite mobile shopping apps?
• What challenges have you faced while shopping for network equipment online?

Usability Testing

Objective: Identify usability issues by observing real users interacting with the mobile app prototype.

Sample Size: 10 participants

Tasks:

• Search for a specific network device.
• Compare different devices.
• Add a device to the cart.
• Complete the checkout process.

Metrics:

• Task completion rate
• Time on task
• Error rate
• User satisfaction (post-task questionnaire)

User Personas

Persona 1: IT Professional

Age: 30-45
Occupation: Network Administrator
Goals: Find high-quality network equipment, compare technical specifications, and get quick support.
Pain Points: Difficulty finding detailed specifications, lack of in-depth reviews.

Persona 2: Small Business Owner

Age: 35-50
Occupation: Small Business Owner
Goals: Purchase reliable and cost-effective network equipment, read user reviews, and get value for money.
Pain Points: Complex navigation, confusing product descriptions, slow loading times.

Customer Journey Mapping

Stages:

1. Awareness: User discovers the app through search engines, ads, or referrals.
2. Consideration: User browses the app, searches for products, reads reviews, and compares options.
3. Decision: User adds products to the cart and proceeds to checkout.
4. Purchase: User completes the payment and receives order confirmation.
5. Post-Purchase: User tracks the order, receives the product, and may leave a review.

Heuristic Evaluation

Using Nielsen’s 10 Usability Heuristics, the mobile app design was evaluated to identify potential usability issues. Key areas of focus included:

• Visibility of system status: Ensure the app provides timely feedback to users.
• Match between system and real world: Use language and concepts familiar to users.
• User control and freedom: Provide options for undoing actions.
• Consistency and standards: Maintain uniformity in design and functionality.
• Error prevention: Implement measures to avoid user errors.

Key Findings

Homepage and Navigation

Strengths:

• Clear layout with featured products and promotional banners.

Weaknesses:

• Overwhelming menu options.
• Lack of personalized recommendations.

Search Functionality

Strengths:

• Autocomplete suggestions and filters.

Weaknesses:

• Inaccurate search results.
• Lack of advanced search options.

Product Pages

Strengths:

• High-quality images and detailed descriptions.

Weaknesses:

• Limited user reviews.
• Missing product comparison feature.

Checkout Process

Strengths:

• Multiple payment options.
• Guest checkout available.

Weaknesses:

• Long form fields.
• Unclear error messages.

Mobile Experience

Strengths:

• Responsive design and touch-friendly interface.

Weaknesses:

• Slow load times.
• Occasional layout issues.

Recommendations

Homepage and Navigation

• Simplify menu options and introduce a hamburger menu for better navigation.
• Implement personalized recommendations based on user behavior.

Search Functionality

• Enhance search algorithms for more accurate results.
• Add advanced search filters for better product discovery.

Product Pages

• Encourage more user reviews and ratings.
• Introduce a product comparison feature.

Checkout Process

• Simplify form fields and ensure they are mobile-friendly.
• Provide clear and concise error messages.

Mobile Experience

• Optimize app speed for mobile users.
• Ensure consistent layout and functionality across all devices.

Wireframing and Prototyping

Using Figma, I developed wireframes and interactive prototypes based on our research findings and recommendations.

Wireframing

• Tools: Figma
• Approach: Start with low-fidelity wireframes to outline the structure and flow of the app.
• Key Screens:
  • Homepage
  • Product Listing Page
  • Product Detail Page
  • Shopping Cart
  • Checkout Process

Prototyping

• Tools: Figma
• Approach: Develop high-fidelity interactive prototypes to test with users.
• Features to Include:
  • Interactive navigation menu.
  • Search functionality with autocomplete.
  • Detailed product pages with reviews and comparison features.
  • Streamlined checkout process.

Testing and Iteration

We conducted usability testing on the prototypes to validate our design decisions and identify any remaining issues. Based on user feedback, iterative improvements were made to enhance the overall user experience.

Conclusion

This UX research provided a comprehensive understanding of user needs and pain points, leading to actionable design recommendations. By following these insights and using Figma for wireframing and prototyping, we created an intuitive and engaging mobile app for computer network equipment sales. Continuous user testing and iteration will ensure the app remains user-friendly and efficient.

‍

‍