Tech Innovations
Project Brief
Tech Innovations, is one of the first listed companies, to offer great returns of high growth tech companies with the liquidity of listed entities. As a listed company, they have a legal requirement to create a digital presence which would help both Investors and startups to gain information on how to go about investing, or applying for funding.
Problem Statement
How might we: Design a responsive e-commerce website that makes understanding what they do, guiding an investor, or a startup applying for funding a seamless experience?We will also be addressing,
How might we: Create a logo and brand that has a modern feel and conveys their expertise in this business?
The Solution:
A responsive website for Tech Innovations that would make the above actions an easier and delightful experience.
Design Process
The design process I followed consisted of 5 stages. Discover, where I conducted secondary research and Interviews; Define: where the research was analysed and further explored through the creation of personas, and defining project goals; Ideate, where Information architecture and sketching helped create the structure and the content; Prototyping consisted of visual design, branding, UI kit creation and wireframing, before building the prototype, and Testing it with users in the final stage. Priority revisions were made based on the Usability test. As the Project manager, I also had to keep a tab on responsibilities and deliverables from each team member along with a timeline to follow. This can be viewed here.
STAGE ONE: DISCOVER
During this stage, I studied the Industry in depth, along with the top competitor’s to gain a better understanding of the context and market.
Research goal
• Identify project scope and Key Performance Indicators. (KPIs)
• Speak to Entrepreneurs, and Investors to understand their vision and plans to scale their companies.
• Understand the user’s pain points, motivations and priorities.
Research Methodologies
1. User interviews to have fluid conversations that include a set of prepared questions to understand the process of applying for acquisition/ funding through a listed entity.
2. Competitive research including studying competitor’s in the market and their offerings through their websites.
Key Performance Indicators
The KPIs Identified after research and discussion were:
• Online Enquiries: First measurable would be the tracking of how many people are making use of the website to submit enquiries. We can also monitor the steps they are following to do this.
• Blog visitors: As the blog is a big part of the website, we can monitor how many visitors visit the page and go through the articles.
User Interview findings
The next part of my research included interviewing founders of startups a 1 on 1 discussion. I wanted to determine their “pains and gains”, and understand what difficulties they might have when applying for funding.
My interview guide was based on the relevant information that they would require while trying to carry out this process. Since start-up founders have busy lives, I was lucky enough to meet with 5 founders across India.
Competitor Analysis
As Tech Innovations is offering a unique solution, I could not study direct competitor’s to the brand. However, looking at other SPAC and Venture capital companies and their websites helped me better understand what kind of information should be made available to the site visitors and users.
Key Findings:
• Prioritisation of the company’s offerings/solutions.
• Representation of the Board of directors, management and team
are important to build trust with users.
• Users value knowledge from mentors who have spent a lot of time in the industry and are eager to connect with them.
I found that conducting research through Interviews and a Competitor
analysis helped to answer my design question and provide clarity about
the research goals.
STAGE TWO: DEFINE
During this stage, I analysed the research from the competitor analysis and interviews to create a solid persona, which helped me define the project goals and made sure they aligned with the overall vision.
Persona
I created 2 provisional personas and then built upon one, based on my research. The goal of creating Arjun was to address the major needs of the most important user group, the Entrepreneurs. I made sure to reflect back on Arjun’s persona from time to time, to make informed design decisions.
Empathy Map
To ensure that the project was headed in a human-centred mindset and To organize my research into a coherent vision, I created an Empathy map to help make Arjun’s personas more realistic.
Project Goals
In order to make better design decisions moving forward, I decided to take a step back and get a clear overview of the business, technical and user goals from my project brief and research.
STAGE THREE: IDEATE
During this stage, I created the Project Feature Roadmap along with the leader of the development team and management. Using this, I moved on to creating the Information architecture and wireframes of the website.
Project Feature Roadmap
While creating the Product Feature Roadmap, I decided to make use of Ideation frameworks in order to expand my current way of thinking, and generate as many out of the box and unique ideas. Later, these were refined and finalised by discussing them with the leader of the Development team.
I decided to use the Mash-Up method of Ideation to generate ideas. In one column, I wrote down the key pages the website would contain, and in another, ideas relating to tech, innovation and excitement.
I then mashed them up to come up with some interesting ways to represent the content on the website.
Information Architecture
After creating the project feature roadmap, I had a better idea of the content to include in the Information Architecture. I started by discussing with the project manager, and development lead about the key pages to be designed and we then detailed the content on each page. We then looked at how each of these pages can be connected/linked. We considered both the entrereneur, and Investors user journeys which helped to build the structure. There was a lot of reorganising at this stage, but we finally arrived at an IA that worked well in representing in the best way possible, all the information we wanted the user to know about the company.
Paper Sketches
Sketching on paper helped me to explore ideas without a limitation, and helped me expand my thinking. I presented these sketches to my mentor and we discussed possible layouts for the various key pages in the website.
I then incorporated his feedback, suggestions, and some new ideas in the wire-framing stage.
A key change that was deliberated at this point was to the design of the Navigation menu. As a part of the ideation exercise, and after much discussion with the Development and Content head of the website project, we decided to use the Navigation space to convey a sentence through the menu items. (These would be Creating wealth, For Entrepreneurs, and Investors), but after testing out this idea with 5 users, I realised that most users do not pay attention to the phrase as an idea, and it lead to more confusion, so we decided to revert to a more simple UX pattern.
To view all paper sketches click here.
STAGE FOUR: PROTOTYPE
This was the stage I was most excited for, to digitize wireframes, plan a content strategy, create the visual Identity and build the prototype that would be tested with my target user group.
Creating digital wireframes
The wireframes began with sketching on paper, which helped me to brainstorm with a free hand. I then digitised the designs I liked, and brought them to life on Figma. Click here to see all the desktop wireframes.
Responsive design
Making the wireframes responsive was a time consuming, but enjoyable task. An important learning in this stage was realising that the copy in Desktop and Mobile will be slightly different (mostly due to the smaller real estate)
I also found that many design patterns were similar on both devices, thanks to using a hamburger menu, but many were different too.
Click here to view all the mobile wireframes.
Brand Identity and Style Guide
Creating the Brand Identity system was a 3 week long process that occurred simultaneously with the UX and later UI design process. I collaborated on the Brand Identity with Omar S, a graphic designer from Spain. We created several forms over a brainstorming session, and after feedback and refinement, we decided to go ahead with the form that represented “T” and “I” along with the future and vision of Tech Innovations best.
For the colour palette, we chose to go with Energising and Electric shades of green and blue, to enhance the feeling of a Tech-based environment. Supporting neutral and Secondary colours were added to the palette to help balance it out. The next step was to have a lot of fun while I created the UI kit.
High Fidelity Wireframes
Applying the UI kit to the high fidelity wireframes was a process of trial and error. I had to find the right balance between using colour in a delightful manner, and not as overkill. I found this sweet balance by using accents of blue and green and keeping most of the page a neutral colour. I created 3 different versions of the Landing page to identify what would be the best solution. Finally, I settled on one option and created the remaining pages accordingly.
STAGE FIVE: TEST
In this stage I tested out my prototype with users, to note down any pain points or difficulties they may have while navigating the website.
Key Findings From Usability Test
The usability test was conducted over a video call on zoom with 5 participants while observing and recording them as they navigated through different tasks which I asked them to carry out. I noticed a pain point with the Navigation menu when some users stated they were not able to understand which page they were on, as there was no visual reference.
So I decided to revise the Navigation, and move some Important pages into the main menu, and keep the rest inside the hamburger menu. The Navigation was also made to be sticky so users would always know which page they were currently on. This helped to solve the issue and also kept the pattern easier to follow on mobile. Below you can see the previous Navigation along with the updated version.
Learnings and Takeaways
• Working on this project reminded me how collaborative design is, and requires various people and teams to come together to create a great product.
• The copy I was initially presented with was not attention-grabbing and did not tell a story. I decided to outsource a copyrighter who would help me enhance the content and bring it out in a more narrative manner. This was a great decision as it greatly affected the readability and engagement of the site with users. It taught me how sometimes as UX designers, we should help clients understand the various roles and scope involved in a project.
• This was my first time working with a live client for a website, and it was full of learning. I learnt that as a designer, it is also important to be articulate with your ideas, create rapid prototypes for meetings where you are explaining a concept, and overall being clear and crisp with your communication and presentation skills.
I also learnt that some ideas might sound great, but upon implementation, you realise it does not add much value; this is where testing becomes key.
