Magscreen:
World's first wireless, snap-on power bank
Mobile-first, easy-to-use and speedy e‑commerce development.
In my role as the UX/UI Lead for the Magscreen project, I orchestrated the development of a Shopify store dedicated to showcasing Magscreen's innovative power bank products. By leveraging my expertise in user-centered design principles, I crafted a visually captivating and intuitive online shopping experience. Collaborating closely with the development team, I ensured seamless integration of design elements and functionality to optimise user engagement and conversion rates.
Through thorough research and analysis, I identified key user pain points and preferences, informing strategic design decisions. As a result of my leadership and creative vision, the Magscreen Shopify store is poised to deliver a compelling brand experience and drive business growth.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Magscreen.
E-commerce
Tech Accessories
CMS
EDM
Google Analytics
Agile Methodology
Scroll to explore project step by step
Let’s get started.
Solve the right problems with right goals.
In my role as UX/UI Lead for the Magscreen project, our primary focus lies in achieving three key objectives.
Firstly, we aim to ensure that the product is easily understandable to users, enhancing user comprehension and facilitating informed purchasing decisions. Secondly, our goal is to optimise the purchasing process, making it swift and seamless for users to complete transactions, thereby improving conversion rates and user satisfaction. Additionally, we are developing a robust Content Management System (CMS) to efficiently handle assets and content, enabling seamless management and updating of product information and marketing materials.
By aligning our design efforts with these high-level goals, we aim to create a user-centric shopping experience that not only enhances user understanding and facilitates quick purchases but also streamlines backend operations for effective content management.
Our high-level goals were to:
-
Make the product easy to be understood.
-
Make the product fast to be purchased.
-
Create a CMS system for asset handling.
Conversion %
I solved the problem of users refusing to hard-to-interpret, static, templated and boring content which led to uplift of conversion rate.
Bounce %
I solved the problem of users refusing to hard-to-navigate, non-intuitive and unorganised content which led to lower of bounce rate.
Cart Abandon %
I solved the problem of users not checking out with lack of incentives and promotional offers which led to lower of cart abandonment rate.
*Exact number of growth metrics are confidential and have been hidden.
Scroll to view my UX/UI approach
Research comes first.
Identify the design methodology.
In my role as a UX/UI Lead for the Magscreen Shopify store project, we followed a systematic Research & Design (R&D) Iteration process. Collaborating closely with management, we gained a comprehensive understanding of the business objectives behind the project. Taking the lead, I guided the team of UX/UI designers in crafting innovative solutions that aligned with these objectives and catered to user needs. Seamless collaboration with the development team facilitated the successful implementation of the UX/UI solutions on the Shopify store.
Working alongside the e-commerce and marketing teams, we conducted split tests to gather valuable user feedback, allowing us to refine and iterate on the UX/UI solutions. This iterative approach ensured continuous improvement, enabling us to enhance the user experience and drive conversions. By consistently repeating and iterating these procedures, we aimed to deliver a compelling and user-centric Shopify store for Magscreen's power bank.
Meet the pain points.
For the Magscreen Shopify store, I analysed user behaviours to create a comprehensive user experience map. Identifying pain points, I improved the overall user experience. By aligning stakeholders and using user-centric insights, I drove design decisions, resulting in an optimised shopping experience for Magscreen's power bank.
The primary metric applied in the project was the conversion rate. The higher the conversion rate, the more the revenue.
Followed by the average session time metric. The lower the average session time, the faster the conversion journey.
Design for the right ones.
In the Magscreen Shopify store project, I gained a deep understanding of user needs to develop impactful user personas. These personas guided design decisions and prioritised features. Through testing and validation, I fostered empathy and collaboration, resulting in an effective store for selling Magscreen's power bank.
Know your enemies well.
In steering the Magscreen Shopify store project, we conducted thorough competitive analysis. We discerned competitors' design nuances, identified industry trends, and uncovered user preferences. By aligning with industry benchmarks, we ensured our design decisions were informed and user-centric. This process also unearthed opportunities for strategic differentiation and innovation, enhancing Magscreen's market presence.
Our aim is to deliver a compelling shopping experience, showcasing Magscreen's power bank range effectively. Through strategic design choices and differentiation strategies, we strive to captivate users and drive success for Magscreen's e-commerce platform.
Ensured compatibility across devices, browsers, operating systems, and performance, optimising user experience for seamless interaction across diverse environments.
Identified barriers, ensured compliance, enhanced usability, promoted inclusivity, and addressed concerns early for improved accessibility in design.
Prove the hypotheses.
In developing Magscreen's Shopify store for their power bank, I executed a thorough data collection and analysis process. Understanding user behaviour was paramount in guiding design decisions and addressing pain points within the customer journey. Through iterative design improvements, I ensured a seamless and personalised user experience. Utilising various analytics tools, I strategically optimised conversion rates by refining product presentation and checkout processes.
By integrating these insights, the resulting Shopify store effectively showcases Magscreen's product, prioritising user satisfaction and facilitating efficient navigation towards conversion. This data-driven approach enhances the overall user experience and contributes to the success of Magscreen's e-commerce platform.
View like birds, think like trees.
In developing Magscreen's Shopify store, I structured content to enhance user flow and searchability. Organising information logically clarified navigation, improving the overall user experience. The sitemap provided a visual guide to the store's structure, ensuring seamless navigation and optimiing access to product information, ultimately enhancing the user experience.
Then design and sprint.
Words well structured.
In crafting Magscreen's Shopify store, typography was thoughtfully selected to improve readability, establish a clear hierarchy, and reinforce branding. Emotional impact was prioritised, ensuring accessibility and enhancing overall user experience.
Colouring in.
It involved selecting a cohesive colour palette to maintain consistency and establish a clear visual hierarchy. Emotionally resonant colours were chosen to enhance user engagement, with accessibility in mind to ensure inclusivity across diverse users.
Spaced but undivided.
Crafting Magscreen's Shopify store involved refining the layout's grid and spacing scheme to ensure enhanced consistency, organisation, and visual harmony. Flexibility was prioritised to adapt to various screen sizes, optimising efficiency and user experience.
Visualise the dots.
In the Magscreen Shopify project, wireframing and mockups conceptualised ideas, defined structure, and visualised elements. They facilitated feedback iteration and consolidated documentation to ensure project alignment with objectives.
Connect into lines.
In Magscreen's Shopify store project, prototyping enabled iterative design, validated concepts, and facilitated communication. It allowed for user testing, ensuring optimal user experiences and seamless interactions for customers shopping for Magscreen's power bank.
Animate to form faces.
In the Magscreen project, animation and transition elements play a pivotal role in elevating user engagement and feedback. By carefully implementing these dynamic features, we guide users through the Shopify store interface, enhancing their overall experience. These animations not only improve user flow but also contribute to a more intuitive navigation system, facilitating seamless interactions with Magscreen's power bank products.
Moreover, the strategic use of animation adds personality to the brand, establishing a stronger connection with users. Through iterative design and user testing, we ensure that these animations serve their purpose effectively, validating concepts and refining functionality. Ultimately, this attention to detail results in an enhanced user experience, driving increased engagement and conversion rates for Magscreen's Shopify store.
Test. Observe. Measure.
Trial and error.
User Acceptance Testing was instrumental in the Magscreen Shopify store project, validating design decisions, ensuring functional integrity, and gathering feedback. By identifying and addressing usability issues, the process boosted user confidence. The iterative improvements made to the shopping experience for Magscreen's power bank customers resulted in enhanced usability and heightened customer satisfaction.
Optimise to leap high.
The focus was on optimising conversion rates and enhancing the user experience. Through a data-driven approach, the user interface was continuously refined to maximise engagement and drive increased conversions. By leveraging user behaviour analysis, A/B testing, and feedback, informed design decisions were made to optimize the user interface and deliver an enhanced user experience.
Data-driven insights were utilised to identify pain points and prioritise iterative improvements that would lead to increased conversions. The user interface was optimised to effectively showcase Magscreen's power bank, ensuring a seamless and engaging shopping experience. Through this iterative process, the project achieved higher conversions and customer satisfaction.
It involved understanding user behaviour, identifying pain points, and measuring effectiveness to inform iterative improvements and optimise performance for the application.
Lastly A/B testing was utilised to optimise the user experience. It validated design hypotheses, improved conversion rates, and refined user interface elements through iterative design improvements.
Scroll to explore the project
A quick look.
Attractive. Intuitive. Effective.
As the UX/UI Lead for Magscreen's Shopify store, I orchestrate the creation of an engaging and seamless online shopping experience.
By prioritising intuitive navigation and visually appealing design elements, we aim to captivate visitors and drive conversions. Our focus is on delivering a user-centric platform that aligns with brand identity and product offerings.
Home.
The Home Page in the Magscreen Shopify store offers an engaging and informative introduction to showcase the power bank products.
Navigation.
The Navigation component in the Magscreen Shopify store enables intuitive browsing and seamless access to different sections.
Product detail.
The Product Detail Page in the store provides comprehensive information and features of individual power bank products.
Cart.
The Cart Page in the store allows users to conveniently review and manage their selected products before making a purchase.
Checkout.
The Checkout Page in the store enables a streamlined and secure process for customers to complete their purchases.
Tracking.
The Tracking Page in the store provides customers with real-time updates on the status and location of their orders.
Log in
The Log In Page in the store allows users to securely access their accounts for personalized shopping experiences.
Forgot Password.
The Forgot Password Page in the store allows users to securely reset their passwords for account access.
Sign up.
The Sign Up Page in the store enables users to create new accounts for a personalised shopping experience.
Order.
The Order Page in the store provides customers with a record of their past purchases and order details.
Address.
The Address Page in the store allows customers to enter and manage their shipping and billing addresses for seamless transactions.
Custom pages.
Other custom pages such as About Page, Customer Support Page and Contact Us Page provide customers additional information.
Toast.
The Toast component in the store provides brief and informative notifications to users for important updates or actions.