FutureFunds
Mobile App and Website Mockup
FutureFunds Financial Planning provides advising to young professionals looking to build financial security and success. The business wanted to redesign their mobile app and website to attract their young audience better.
Research & Analysis
Originally, I was provided a proposed low-fidelity wireframe for FutureFunds website. I performed competitor research to establish industry best practices and ways to set FutureFunds apart from competitors. I analyzed the proposed wireframe noting changes that needed to be made to improve user satisfaction based on user testing results. I also noted ways that UX and IA principles could be better utilized. With this research and information, I developed high-fidelity wireframes. The target audience for FutureFunds website and app would be young professionals. For the artifact to be successful it needed to include all requested features, meet client objectives, take into account market research, competitor research, and user testing.
Proposed Wireframe Analysis of UX Principles
To determine if user-centricity is applied to a design it’s important to look at user needs before making design choices. When looking at market research it’s clear the users have a range of technical skills but all value user-friendly interfaces. To make the design user-friendly the scheduling form and number of reviews should be simplified, more instruction should be provided (for scheduling and the financial calculator) buttons should have clear labels/functions, and visuals should be labeled.
Consistency is not only important throughout the design itself but also with how interactive elements function. Users come with certain expectations of how components function. For example, a form should have a clear submit button.
A good portion of the wireframe utilizes visual hierarchy well but in certain areas like the financial calculator there is no sense of hierarchy which makes the user experience confusing. Creating hierarchy allows the user to know the order in which they should read and interact with the design.
Context is crucial for a user to understand what the purpose or function of a component is. There is one section with graphics that are not labelled and it’s unclear what they are representing. Button’s function should also be clear to the user.
Efficiency is a key principle when designing a website. If users are unable to accomplish their goals quickly, they will become frustrated. Organizing the sections in an intuitive way that users expect is crucial to their user experience. Placing scheduling at the top before any information about the business is provided is not intuitive. User’s will not know what they are scheduling and by the time they reach the bottom of the page they may not remember that the scheduling form was there at all.
Lastly, cognitive load is a major impact on user satisfaction. If too much information is provided at once a user can become overwhelmed. Creating more separation between sections and streamlining information will greatly decrease the cognitive load while also providing the users with the necessary content.
Planning & Designing
The main improvements made from the low-fidelity wireframes was utilizing user experience principles, as outlined previously. In addition to these principles, I worked to streamline content making the user experience more efficient and reducing cognitive load. Offering users buttons or links to view more information allows them to control their cognitive load and journey through the product. I also simplified forms to only include necessary fields. I used the IA principle of exemplar by including images that paired with text for both the service offerings and recent blog posts. This helps to break up text heavy sections and help users comprehend information.
When reviewing the user feedback from the low-fidelity wireframes the users’ concerns all related to either layout/order of content, spacing, cognitive load, or unlabeled content. To incorporate this feedback in the mock-ups I created a list of all the users’ feedback and made sure to design with these concerns in mind. I changed the layout of the features in an order that was intuitive and fit the user’s mental models. Other users mentioned there was poor spacing between sections and it made the experience overwhelming for them. I made sure to include negative space and create distinct sections. Users also mentioned different concerns related to cognitive load like unnecessarily long forms, an excessive number of customer reviews, and overall, too much information at once. To combat this, I reduced the number of fields in the forms, decreased the number of testimonials significantly, and streamlined the rest of the content. Lastly, the other user feedback related to unlabeled content, forms, and buttons. To mitigate this, I added headers to all features, including the form/fields, and buttons.
Prototype Testing
I developed a usability test to perform to evaluate the user experience of the mobile app and website design. I focused primarily on finding the efficiency of the navigation and forms. I also took cognitive load and layout into consideration when designing the tasks and establishing the follow-up questions. Through market research FutureFunds’ target audience has been established as young professionals primarily in their late 20s with a medium to high level of technical skills. Recruiting participants that fit these parameters is necessary to gain the most relevant insights about the product. To find and recruit participants a screening should be performed. Questions related to the candidates age, occupation, and technical skills would allow us to find relevant participants. FutureFunds target audience is primarily one distinct group so we wouldn’t need to recruit many participants. To encourage participation, we would offer monetary compensation to participants. The facilitator would need additional materials/tools other than the test plan, task scenarios, script and other information within this document. Some examples of these would be a quiet testing space with reliable internet connections, recording equipment (cameras, microphones, and screen recording software), both computers and phones to perform the tests on, and additional analytic tools could be used like heatmaps and click tracking.
Usability Testing
The usability test will help promote iterative design optimization in multiple ways. User feedback helps identify problems within the design that may have been overlooked by designers. Usability testing will help gather insights about users’ thoughts, feelings, and behaviors when using the product. These findings can then be adapted into specific design changes that are backed by testing. The usability testing will also provide specific data that can be referenced. This data will also show what should be prioritized to allow for the best user experience. Additionally, testing early on helps prevent errors in the final product that would be much harder, time-consuming, and expensive to remedy.
Finding patterns within testing, specific user pain points, and areas of improvement will all need to be done. Once the issues are established, they should be prioritized, and solutions should be identified. The high-fidelity mock-up will then be developed into an interactive prototype. Another round of testing should be performed with a focus on the interactive components. These results will be analyzed, problems will be identified and remedied then the product will be sent to the developers. In the future it’s important to empathize with the users, implement user feedback early on and repeatedly throughout the design process, build your problem-solving skills, and embrace change and flexibility as you move through stages.
Mockups
