Designing websites and mobile applications when running a startup can be a very scrappy process. With time, budget and a generally chaotic environment working against you, it is important to manage expectations from stakeholders and float a workable MVP (minimum viable product) to the market at the same time. It is also important to note that disruptive technology may require radically different interfaces compared to traditional, sustaining technologies, thus the methods of production can be different as well.
In this article, I hope to be able to break down the process of designing web / app interfaces during the startup process and analyse disruptive technologies (built into websites and applications) based on my experience of running a CRM startup and working as a Junior UX Designer (intern) of a marketing firm in Shanghai. It can be difficult to appreciate the amount of effort put into User Experience / Interface Design because it is assumed that the interface itself must be seamless and easy to use. This assumption is wrong. The reason why an interface is easy to navigate, simple to use and flows well is due to careful consideration of elements, forms and structures. This is perhaps the reason why UX / UI is now considered an increasingly vital discipline of design in the digital age.
This form of design is very much like a game of chess, starting off from a few well defined basic moves into a multitude of endings. With this analogy, understanding this complex discipline will be (hopefully) easier.
Defining the Game
An interface is any device or program that allows a user to communicate with a computer. When designing interfaces, a fundamental rule, as with other forms of design, is the priority of function over form, but interfaces require both usability and form to thrive. An interface that looks pretty but is difficult to use is practically useless, but an interface that is useful but not beautiful is also painful to use.
Today, a significant majority of our time is taken up by our mobile phones; we interact with the world through a plethora of applications available in the market to serve the segmented needs of different customers. Given the diversity of options and the ubiquity of screens, User Experience design is not only an aspect of design, but also a fundamental component of product strategy. The design of interfaces is thus heavily dependent on the cultivation of a mode of thinking, a human-centric way of life and seeing, as an approach to solve problems for customers in the chaos of the modern world.
However, this human-centric way of seeing (e.g. Design Thinking) can also wreck havoc between stakeholders if not properly managed. Ultimately, a business exists to make profits for its shareholders and employees, and as much as designers want to continually adjust and fine-tune our perceptions, there comes a time when doing is prioritised over thinking. When design methodologies are not well managed and applied like an academic exercise, the startup is likely to lose precious momentum.
How then does one design interfaces for startups, given the restrictions of time, budget and ambiguity?
Establishing the Rules of the Game
In any game situation, there are rules and objectives. In the game of Interface Design, the rules are the equivalent to the Design System. The Design System sets the tone for the startup’s website, native app and any other platform that establishes a presence for the brand. It creates a set of guidelines undergirded by the overall vision and branding of the company. One informs the other. By having a clear and well thought out Design System, new hires can fast-track their learning curve in the startup and speed up performance on projects, reducing the time needed to train designers and interns.
This was how I was brought up to speed in the marketing firm I was working at in Shanghai. The head of UX, Alick, introduced the company’s design system to me. The system included buttons, switches, navigation bars, colour swatches, headers, footers and fonts. All these parts could then be fitted neatly and quickly into a whole, where the Ford Motor Factory-esque assembly line of designers dragged, resized and plugged the elements into position in the form of websites, apps, and Wechat miniprograms. It was from that Design System and Alick’s generous mentorship that I began my foray into the world of UX / Interface Design.
References for Design Systems:
Good questions to ask in creating a Design System might be:
- How will you maintain this system?
- How will you promote and encourage usage?
- How will you communicate updates?
In order for the Design System to be put into good use, it must function like a Swiss Army Knife; a lean and mean machine that can be used in various ways. There should be a master folder kept, preferably by the Head of UX as a safeguard against unwarranted changes. The official folder will then be floated onto the company intranet for use. The design and programming team need to work together to determine which elements are essential and which are not. This allows cross-collaborative efficiency by reducing overlaps of work. The project manager then keeps track of the deliverables, parting the Red Sea and allowing safe passage into the Promised Land (pardon the melodrama). Finally, just like the Business Plan, a Design System is an evolutionary animal, constantly changing with the trends and demands of the market. Thus, it is important for regular auditing to ensure everything is still usable and up to date.
Setting up the Pieces: Early Game
Research by Localytics shows that 24% of users never return to an app after the first use. Suppose you are a founder of a startup that uses an application as a primary form of distribution. Your breakeven point is $100 000. You price your app at $1, thus you need 100 000 people to download and use your app for you to reach breakeven point and start turning a profit. 24% of users = 24,000 prospects wasted. That’s an insane amount of potential customers and a waste of opportunity. For a startup founder, EVERY customer counts. In the early adoption phase of the product life cycle, the product needs to appeal to the early adopters; a minority within a minority of users. This means that the first impression and onboarding experience must be engaging and attractive to keep users coming back.
One method is to demonstrate the value proposition of the product before letting users sign in or register on the platform. This can be done through contextual onboarding; where users understand more of the product as they go along. This is important as users today are even less patient than when the App Store first launched. Instructions are provided only when the user needs them. This allows a few more valuable minutes for the startup to demonstrate its value proposition to the user without getting in the way.
Another method to reduce the learning curve is the empty state. The empty state highlights what action the user should take in order to maximise the utility of the application.
Moreover, precisely because empty states are often neglected, therein lies a good opportunity to set a startup’s brand apart from competitors’, through expression of brand personality.
These are simple ways to build up a good first impression and to sell the benefits of your product early on.
Gaining Momentum: Mid-Game
Building on the earlier momentum, users now have an option to continue using your product or get distracted by something shinier / more polished. It is at this point where refinement is necessary, much like the Japanese concept of Kaizen (continuous refinement). Front-end designers works with back-end developers to push out a cohesive product.
By combining Design Thinking’s humility, Lean Startup’s experimentation and Agile’s rapid fire development, customer problems can be rapidly identified, worked on and resolved quickly and effectively. This resolves the issue discussed earlier; where Design Thinking practitioners get locked in a mire of “open-ended” refinement, not knowing when to tune out the thinking and focus on the doing.
The information architecture, user flow and wireframes should already have been out by this stage. This is also the point where they are all continuously refined while the UI (user interface) is considered. Where disruptive technology differs from sustaining technology is the approach in creating mental models.
When Uber launched its app, the technology aimed to disrupt existing models of taxicab systems. Similarly, with the launch of Uber Central, it aimed to revolutionise the way people use public transportation. Traditionally, companies that created systems tend to focus on building on top of existing ideas and categorising information from a top-down, market driven approach. Designing for disruptive technology is more challenging as it is a down-top, user driven approach. Thus, the biggest challenge any designer has in creating models for disruptive innovation is reducing the amount of steps necessary for the user to reach the intended destination. As can be seen, the Uber Central Trip Request Flow is lean, mean and efficient, designed with as few steps as necessary. This reductive approach is necessary for simplicity, as disruptive technology is often simple, cost-efficient and provides massive convenience for users.
Animation should also be used to provide instant feedback and make the interaction between man and technology feel human.
Typography, a core aspect of graphic design, should also be brought into UI to allow users to read and process information easily.
Special attention should be paid to space, hierarchy and serif / san serif fonts in order to create a feeling that is consistent with the brand. Moving past this phase will be the final aspect of fine-tuning the product into a refined MVP ready for market testing.
Kingmaker: End-Game
In chess, players often neglect the end-game, taking massive risks when they feel an opportunity to win is at hand. They move haphazardly, deviate from their original strategy and move their big pieces to needlessly vulnerable positions due to their impatience to win.
Similarly, as entrepreneurs and marketers sense that the product is coming into fruition, the urgency to float an unpolished product to the market is real. Unfortunately, such a hasty move can spell trouble, especially when the product’s critical functions are unresolved.
One of the biggest challenges I faced when running a startup was pushing past the finish line. A lot of times, running a startup can be exhausting, with a small team taking on multiple roles and running in so many different directions. One of the mistakes we made was our sluggishness in developing the website after the MVP was built. We rested on our laurels after building the MVP because we were exhausted. If we had executed with more speed and relentlessness, we would have reached a solid endgame. Instead, our progress became slow and we became distracted with adding on more features to the business instead of refining what we had.
Due to the scrappy nature of the MVP, we did not design follow-up notifications with clients, and our email marketing efforts were met with lukewarm responses. If we had put more focus in following up with our clients regularly, we would have been able to sell more, get more referrals and build on a momentum that was precious in the startup world.
Designing interfaces for disruptive technology can be extremely challenging as products are built by taking what’s already in the market and finding a new product-market fit. The frustration and exhaustion can be mitigated by streamlining the process of identifying core elements of UX / UI Design and methodologies and applying them in a systematic, rigorous way to save time, money and confusion. Ultimately, the market determines what works and what doesn’t, and we designers are there to reduce market risk as much as possible through our humility and humanistic way of looking at business.
Bibliography:
Babich, Nick. “A Comprehensive Guide to Mobile App Design.” Smashing Magazine. Published Feb 12, 2018. https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/
Bee, Chris. “Engineering On-Demand Transportation for Business with Uber Central.” Uber Central. Published June 29, 2017. https://eng.uber.com/uber-central/
Dizon, Jeremy. “5 tips from an Airbnb designer on maintaining a design system.” Design Systems. Accessed March 31, 2019. https://www.designsystems.com/stories/airbnb-designer-shares-pro-tips-for-maintaining-a-design-system/
Douglas, Steven. “Everything you need to know about empty state design.” Just in Mind. Published July 12, 2018. https://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/
Suarez, Marco. “Design Systems Handbook.” Design Better. Accessed March 31, 2019. https://www.designbetter.co/design-systems-handbook
