Designing new iOS mobile & web app - like Sharesies but for property investment - Tressel, An Auckland fintech startup
Company: Tressel, Auckland | Role: Agile UX/UI Designer | Timeline: Feb - April 2023 (10 weeks) | Tools: Figma, FigJam, Miro, Jira and Confluence
Achievement: Received great feedback from the founders on the depth and quality of my work. Delivered a fully functional prototype app to be used for investor presentations and long-term planning. Also documented the product strategy.
The Work: I was the sole UX Designer and collaborated closely with the product owner and CEO, to ensure that my designs aligned with the company's vision for the product and to deliver a seamless and intuitive interface that makes real estate investing accessible to all. My goal was to create solid user experience journeys and a usable and effective platform.
Product Owner's Endorsement: "You would be foolish to underestimate Rameez. Her depth of thought coupled with the behavioral logic that is applied to her work is second to none. It is a privilege to work with her on our project and I could not recommend her enough to any potential employer. A creative self-starter with a very wide range of abilities. I can only hope to be able to find a way to bring her into our team in the future." - Ricky Jack, Tressel, Auckland
Agile Coach's Endorsement: "As an Agile coach, I had the privilege of collaborating with Rameez, a superb UX designer who thrives in Agile settings. Her dexterity in conducting premium research results in exceptional UX designs that leave even the most experienced UX veterans in awe. Without hesitation, I endorse Rameez for any organization on the hunt for a quality UX designer." - Sai Constantine, IDNZ
The Process
The Challenge: Create a design from scratch to a functional prototype that would be easy to navigate, visually appealing, and provide users with all the information they needed to make informed investment decisions. Through careful research and testing, I created a user experience journey that was engaging and efficient, resulting in a design that delivered user engagement and satisfaction on the platform.
The Process: Given that it was a new product, I started my research process by analyzing previous market research data and conducting interviews to develop a product strategy. To guide my research and design process, I followed the Double Diamond Approach of design thinking, which involves four key steps.
Discover - UX Research
(Research data were blurred to protect the company's privacy.)
Given Data - Affinity Mapping Analysis
Using the UX technique of affinity mapping, I organized the information provided by the sponsor into different groups based on their similarities. This helped me to gain a better understanding of the users' needs, product requirements, and potential features from the perspective of the client. By grouping the information together, I was able to identify patterns and connections between different ideas and insights, making it easier to synthesize and analyze the data. Using these insights, I created the multiple empathy map to understand what the target user groups thinks, says, sees and hears when it comes for the property investment fractionalization. (Research data were blurred to protect the company's privacy.)
Conducting Interviews with Business Person & 3 Users from target groups
A business person interview was carried out with Ricky Jack, who is the product owner of RJZNZ Ltd., with the aim of comprehending the project's objectives and key results it seeks to achieve. The questions were created to understand the business OKRs, target users & their behavior, competitors, pain points and constraints.
Once the business person interview done, for user interviews, I chose three users from different targeted user groups.
The interviews were conducted using different methods - one in-person and two online - with varying questions tailored to each group. As the OKRs of the project were already established, the focus of the interviews shifted towards understanding the interviewees' expectations for the future product
Empathy Mapping
Empathy mapping is created from the insights took from the business person and 3 users' interview.
Direct Competitor Research
Involves identifying and analyzing the user experience (UX) of the competitors' products or services. This type of research aims to understand what our direct competitor's customer journey is to buy investment shares, key features, customer reviews and pros and cons in their product. (Research data were blurred to protect the company's privacy.)
Sources: Competitor's website, Trust pilot, Investor Junkie, user interview
Similar Product Research
To better understand the needs and pain points of other investment platform users, I conducted similar product research on their vision, UI styles and also studied user reviews. Through this process, I discovered some opportunities for the product. (Research data were blurred to protect the company's privacy.)
Venn Diagram
Using the insights gathered from the empathy mapping exercise, I employed the Venn Diagram Method to identify common goals among the interviewees. This, in turn, helped me establish the necessary, immediate goals of the product. (Research data were blurred to protect the company's privacy.)
Define
The Product Strategy
After completing my research, I worked closely with my product owner to establish a product strategy aligned with our vision. By creating and refining personas and journeys, and incorporating feedback from my product owner, I ensured that the strategy met our business OKRs. The strategy encompassed
-
Defining potential Tressel users/personas,
-
Defining ideal customer journey mapping
-
Defining KPIs and business goals
-
Identifying/ Defining opportunities for differentiation from other products
Personas
To improve the overall experience, I created five potential customer personas and carefully analyzed their behavior, motivations, challenges, influencers on investing, pain points, preferences, needs, and goals. This involved developing both a new buyer persona and an existing Tressel customer persona, allowing me to empathize with each group and gain a deeper understanding of their journeys. A sample persona structure,
Ideal Customer Journey Mapping
Using the CJM UX method, I established the ideal customer journey in the product, from initial discovery of the product to becoming a loyal customer. Throughout the process, I worked closely with the product owner to define KPIs and business goals for each phase of the journey. (Research data were blurred to protect the company's privacy.)
Affinity Mapping
Leveraging the Affinity mapping method, I structured the potential opportunities on each page using the insights gathered from my research.
Defining Product Goals
By conducting a UX interview and using various research techniques such as interviews, empathy mapping, Venn diagrams, and affinity mapping, I established the following goals for the customer experience of the product: exploring the app journey, onboarding journey for both novice and seasoned investors, buying and selling shares journeys, getting help journey, rent-to-own journey, and refer-a-friend journey.
With a focus on the timeframe, I created two journeys, one for buying and the other for exploring the app, ensuring that all critical features were included to provide a high-quality MVP.
Project Management - Agile Scrum Work Hierarchy
In terms of project management, I was granted the autonomy to assign tasks and plan sprints on my own, which I subsequently shared with my product owner. Nevertheless, I remained receptive to adjusting the sprints in accordance with feedback from the product owner, and I maintained flexibility in terms of task prioritization and integrating new objectives. Over the course of five two-week sprints, our goal was to conduct research and develop a functional prototype for the first MVP.
.jpg)
I have designed an Agile Scrum work hierarchy that starts from the highest-level task, which is an Epic, and breaks down into smaller sub-tasks. By focusing on the lower-level tasks, there are ample opportunities to incorporate changes without sacrificing the overall product quality. Each feature is thoroughly defined, including problem statements, user journey mapping with personas, and sub-user stories. Additionally, all user stories are accompanied by clear acceptance criteria, Definition of Done (DOD), and user flows to ensure that they are well understood.
To enhance collaboration, I utilized various tools such as Jira board for sprint planning and tracking high-level tasks, Confluence for documentation, and Miro for UX research collaboration. Additionally, I relied on Slack for seamless communication among team members. Following is the Agile scrum work hierarchy.
Develop
The Information Architecture
Based on the details that I specified in the data flows of the user stories, I developed the Information Architecture (IA) for the Mobile iOS app, which involved both the buying and exploring journeys. The IA evolved continuously throughout the development and testing phases and underwent several changes. However, the final version of the IA reflects the most updated and refined structure for the app's user experience. (Data were blurred to protect the company's privacy.)
_.jpg)
Sketches, Interaction design & wireframes
In my design process, I prioritized identifying all the focal points before proceeding to create possible flows for each journey. I captured this process through sketches and interaction flows, which helped me to visualize and refine the user experience design. Here are some examples of my sketches and interaction flows. Wireframes were created using Figma. I also created a web app functional prototype on these journeys for the investor presentations. (Data were blurred to protect the company's privacy.)
Design Principles
As part of my design process for the Mobile app, I suggested several innovative ideas that were not present in existing products. These ideas were well-received by the business team and generated positive results during testing.
In addition to crafting a seamless user experience for purchasing shares, adding payment methods, and depositing funds to the wallet, I also incorporated visual design principles to enhance the product's intuitiveness for users. Furthermore, I developed processes to effectively handle negative scenarios (addressing the unhappy paths) , such as removing payment methods, removing shares and withdrawing money from wallet. By doing so, I ensured that users have a smooth and seamless experience, even when encountering unexpected or undesirable situations.
As part of my efforts to continuously improve my design skills, I completed a Udemy certification on iOS Human Interface Guidelines and applied these principles in my designs for the iOS app. Specifically, I adhered to the best practices and clear anatomy recommended in the Apple iOS Human Interface Guidelines when designing alert boxes, which involved creating brief and informative messages with an appropriate style and tone, providing clear options for users, and refining the design through testing to optimize the user experience. Moreover, I designed empty screens for various sections such as Wishlist, Notifications, and Portfolio, in accordance with Apple's recommendations. These screens were carefully designed to display clear and informative messages when no content is available, using a design language that is consistent with the app's overall style and tone, thus improving the app's overall user experience.
I attempt to upsell shares whenever possible, and their placement has been tested with users to ensure it meets their expectations.
I have ensured that every microcopy in the UX writing, including empty screen text, button labels, error messages, placeholders, and confirmation messages, has been crafted with care and clarity, and that the wording used remains consistent throughout the product.
Although the brand colors had not yet been finalized, I used a basic color scheme for the entire design. I made sure that no two interfaces were distinguished solely by color, taking accessibility into consideration. Instead, I added extra attributes to differentiate between different elements in the design. Furthermore, I included negative spaces, clear wording, and additional details throughout the product to assist users with learning or language difficulties. By doing so, I ensured that the design was accessible and user-friendly for a wide range of users.
Deliver
Conducting Testing
The testing process involved two stages. In the first stage, I tested the prototype with four users. In the second stage, I incorporated feedback from sponsors, conducted another round of testing with one additional user, and made necessary modifications. Both in-person and online testing were conducted. During testing, the majority of the user story journeys were easily achieved by the testers, with only one issue related to the IA causing a catastrophe. However, after making necessary adjustments to the IA, the issue was successfully resolved in the second round of testing. The following is the sample testing plan during Level 1 testing. (Research data were blurred to protect the company's privacy.)
Design System
The Tressel design system I developed includes guidelines for the brand's visual identity, reusable components, style guide, layouts, icons, and images. Incorporating these key elements into the design system enables the future design and development team to create the app more efficiently while ensuring consistency and a recognizable visual identity.
.jpg)
Hand Off
At the end of the project, I delivered a hand-off presentation that covered user research insights, design process, design decisions, possible future enhancements and the design system. Additionally, I provided written documentation on the Confluence page for further reference.
Sample screens & Functional Figma Prototype
A prototype is developed to simulate the experience of using a real product. It includes integrated user journeys, allowing users to switch between them seamlessly. All interactions are presented as components to enhance user comprehension and provide a realistic feel. In instances where the product requires dual feedback, such as displaying a notification message and changing screens, I provided the developer with annotations adjacent to the wireframes. Here's a glimpse of iOS screens and Figma prototype.
My Experience
-
As the only designer on a project from the beginning, I had more opportunities to innovate and try out new ideas.
-
I was given the opportunity to work independently, which greatly boosted my confidence in managing the project.
-
I embraced Agile methodologies and incorporated them heavily into the project. I focused on creating minimum viable products (MVPs) and was flexible with new requirements.
-
Through this project, I gained a wealth of experience in documentation.
-
I took advantage of this opportunity to complete a new certification in iOS Human Interface Guidelines and applied what I learned to the project.
-
I also appreciated the opportunity to attend Agile workshops in a group environment through Industry mentor/Agile Coach meetings with Sai Constantine.