Mediums is a new 24-hour-creative landmark, selling a variety of products to support everyone’s creative needs. Mediums aims to be a to-go for artists, creatives and daydreamers of all types.
CLIENT
Mediums
EXPERTISE
UX, UI and Development
PLATFORMS
iOS and Android
PROJECT BACKGROUND
Getting to know Mediums
Mediums aims to re-imagine the creative industry and the art supply as well as stationery scene to be accessible for everyone.
ISSUES
Challenges, problems and our solutions
Like many complex projects, the Medium app was not without its own challenges and obstacles.
Both UX and UI work was considerable as the MVP version of the app alone had more than 200 screens. Given that this was also a very short project, risk mitigation and fallback plans as well as several checkpoints were necessary to ensure that the desired functionality was included and value was delivered for the chosen MVP features without sacrificing quality or performance.
Keeping the team fully-engaged with each other and with the client were imperative to mitigate risk...
PROJECT TIMELINE
Scope of work and timeline
Mediums's project goal was to enable people to live a more sustainable lifestyle. The carefully-crafted mobile application would provide making art and design as open as possible. Enabling the customers to have the most frictionless experience right directly from their mobile devices. Mediums would use these online aspects to help shoppers better utilize their time to focus on creating rather than shopping.
Mediums envisioned a few key areas for their initial product offering as proof of concept. The critical feature included:
SETTING UP
Design System
A design system is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product. So the design system is not a deliverable, but a set of deliverables.
DESIGN SYSTEM
Iconography
Mediums icons are designed to be simple, modern, and friendly. Each icon is reduced to its minimal form, expressing their essential characteristics.
INFRASTRUCTURE
Development
For the MVP phase of the project, we would build native mobile apps in Swift for iOS, and Kotlin for Android, while incorporating a NodeJS-based backend API proxy service to integrate with Microsoft Azure and several secure internal systems.
Initially, the conversation called for the mobile apps to directly interact with the various existing back office systems via their native APIs. However, the discovery process quickly revealed that a proxy approach would be much cleaner and add a layer of abstraction so that authorization, authentication, and session management could be more consistent across the wide variety of internal and external systems. It also afforded the team much greater flexibility in managing changes as much of the heavy lifting was moved to the NodeJS backend proxy and could be altered without needing to rebuild and deploy the mobile app.
USER EXPERIENCE
Wireframes
Firstly, we focused on wireframe. The wireframe is a diagram or a set of diagrams that consists of simple lines and shapes representing the skeleton of an user interface to focus on the core functionality.
Re-imagine your creativity at your fingertips.
USER INTERFACE
New user experiences and interfaces
Our final design was based on multiple iterations throughout the UX and UI phase. We came to this end result by utilising pain points of current Mediums customers as well as goals and objectives set initially.
Search and browsing
Since there are two different behaviors (from novices to experts), we designed based on the initiative between specific search and navigation through browsing.
For search, this would help users who specifically search a product they already have in mind. For category browsing, this helps those who might not have things in mind by recognizing through categories.
FEATURES
Our final design was based on multiple iterations throughout the UX and UI phase.
Optimizing the product detail
The content on product pages plays a significant role in whether the user will purchase it or not. So we provide all the information but not overwhelm them which help the user to have a better understanding of what the product is, what it looks like, how it works etc.
Product variant selection is also built seamlessly into the product detail page.
Cart and Recommendations
Optimizing shopping cart recommendations, the cross-selling tactic.
The end result of deploying cart page cross-sellers is bigger basket sizes. Additionally,customers can add products to the cart there and then, without the need to go through product pages, which minimizes the risk of them leaving the website.
Real time orders tracking
Showing where their order is in real-time with accurate information.
Real time order tracking can also affect brand loyalty, According to a survey study, 87.4% of respondents said that real-time order tracking made their buying experience more enjoyable and more likely to return.
