Aerium first got our attention after we received a well-written brief that gave us a glimpse into the information architecture and contained a large part of the photo and video content that we would later use.
We decided to set up a conference call with the client to further discuss the Aerium concept, as well as to go over the roadmap of the project, business goals, marketing strategy, competitor analysis and some examples of design patterns relevant for our client.
We liked Aerium so much that we decided it would be one of the first projects in an upcoming series whose purpose is helping small entrepreneurs follow their dreams by executing their ideas.
We started to organize and prepare for the Aerium by setting up a Trello team and finding the right structure for each board. This helped us to be agile and keep track of what we have to accomplish in the weekly design & development sprints.
In parallel, we used the same approach with Slack, creating channels to match our requirements. Since most of the team worked remotely, we were constantly seeking new integrations and task management bots to improve the team’s communication and productivity.
To challenge ourselves even more, we set a tight deadline of three months. We prepared to launch an MVP that was aligned with an upcoming holiday, when we knew the products would have a considerable impact on the market.
Figuring out the user journey and red routes were the points on the agenda of our second call with the client. Based on the business needs, we brainstormed possible flows and determined how to balance the information architecture in order to provide a compelling story and sell the products.
Once the user flows are complete, they can be stacked together and joined with user stories to create real-world user flows for different use cases. Taking into account all the user flows for a product can be a bit tedious, but the more detail you account for in this phase, the easier it will be to create your information architecture in the next one.
The next step in the design process was creating the wireframe using the client brief and the feedback from the previous steps. Wireframing is useful for obtaining an initial visual understanding of the project and helps showcase the structure to the client.
Wireframes act as the blueprint of the design, connecting the IA to the visual design. They explain behaviors and flows — what goes where and how features interact with one another. A wireframe is helpful for all parties involved and serves different purposes for different people.
For designers, it explains the UI and contributes to the mockup process. For developers, it explains functionality and can assist with backend architecture. For clients/stakeholders, it provides reassurance that everything is being accounted for.
Great interfaces feel effortless to users. They omit unnecessary elements and use straightforward language. The best way to attain simplicity is through thoughtful reduction. Thus, we tried to achieve it by discussing every screen during our weekly calls and iterating until everyone was satisfied with the outcome.
Designing over a WordPress theme is convenient because you already have many components you can work with. However, we believe that every theme should be tailored to the website you are building in order to convey the user experience you aim for.
We reviewed all the components and decided to rethink the red routes by customizing the entire e-commerce experience. We improved the UX of adding products to the cart, the cart page and the checkout process.
In the interest of telling a compelling story, we also paid special attention to the blog. We completely redesigned it to improve the experience and readability on both desktop and mobile platforms.
Choosing WordPress for a multi-purpose website certainly enabled our client to provide its targeted market with a comprehensive and coherent user experience. Having an intuitive portal, a shop powered by WooCommerce and, most importantly, a blog, all beautifully integrated as one piece empowered our client to leap ahead and defeat its competitors.
After thorough research, we chose Salient for the website’s backbone. A responsive multi-purpose WordPress theme backed by Envato, Salient is wildly successful because of its all-encompassing customizing experience and flexibility.
Combined with custom coding, this paved the way to achieving highly refined user interaction elements that are consistent across the entire platform and on any handheld device.
Since safety is especially important, we wanted to make sure we chose the right online payment gateway. After extensive research and negotiating payment commissions, we opted for a local bank. They provided us with the necessary modules and assisted us throughout the installation process until it was finished and working perfectly.
The most challenging amendment to the payment module was removing the decimals in the pricing list, which were specifically requested by our payment gateway for their database. We had to modify WordPress’s function files and the payment module so that it would not display the pricing decimals, yet would still send the correct information to the gateway database.
Alongside the final steps before the launch, we invited friends relevant in fields such as design, user experience, marketing and development to test the platform and give us feedback.
After several chats, emails and calls with them, we validated our strong points and vision and we gained very useful information as to what and how to improve, especially in terms of the checkout process.
By getting constant qualitative feedback, we knew what were the main priorities regarding the platform and, backed by the quantitative metrics we obtained post-launch, we filled the backlog with the insights and started to perfect the user experience and interface.
Several weeks before the launch, we released a Facebook post and a “coming soon” page so as to inform the community that a new website was under construction, that they could subscribe to the mailing list and receive a notification when the new website went online.
We grew the Facebook community from 2.5k to 10k by using inbound marketing strategies and publishing three weekly posts, one every two days, from a pre-scheduled content calendar:
On Instagram, we posted five pictures per week with descriptions regarding plants and interior design, using 50% of the hashtags to approach our target audience and the other 50% of the hashtags to geolocate places were we knew we can reach our demographic.
To help us expand the page and promote it more effectively, we started collaborating with influencers who would share our products on their personal accounts. We also engaged in conversations with accounts in the same niche and found out that a valuable strategy with a great return was to ask our customers to post photos of their products, so that we could repost them.
Quality assurance is crucial for a product launch, so we used different QA methodologies to test almost every pixel on the website on multiple devices, browsers and operating systems.
The bugs discovered were reproduced to ensure that they were not isolated incidents, then logged into Trello for prioritization and issue fix validation. Furthermore, we optimized every asset and snippet of code for quick response, resulting in a user interface which is fast and consistent across the entire platform.
After fixing the major bugs, we reviewed and refined every part of the UI to ensure all colors, font sizes and spacings are identical to those in the design guidelines.
On the launch date, we removed the “coming soon” page and released a powerful Facebook boosted post with the exciting news. We also sent an email notification to the entire subscriber list, informing them that they could finally start ordering the amazing products.
Soon after launching the campaigns, the servers suddenly went offline, which is one of the most frightening things that could happen during a launch.
After investigating, we discovered that the servers hosting the website couldn’t handle the influx and that they went down due to the large number of active online users. It was bad news, but it was also a strong validation of our effectiveness.
The website went back online after reporting the issue to the hosting company and orders started coming in...