[vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column]
UX\/UI Design \u2022 Native App & Responsive Website<\/h1>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/2″][vc_column_text]The problem<\/strong><\/p>\n People didn’t start a business because they didn’t have access to business tools – 29%. They are unsure how to work with the tools\/technology needed to run a business – 26%. They didn’t have enough time for a new venture – 25%, and they didn’t have support from friends, family and peers – 23%.<\/p>\n <\/p>\n The Product<\/strong><\/p>\n BeOwner is a Toronto-based organization that helps entrepreneurs to start a business. The organization needs a tool to help people get up and run a business. BeOwner’s primary target includes people between 20-50-year-old that have a business idea and don’t know how to start, get mentorship, obtain finances and build a professional network to make them successful.<\/p>\n <\/p>\n The Goal<\/strong><\/p>\n Design an app and responsive website that will help people with access to information, advice, finances, tools and a business network to start and run a successful business. All of these will be available in one place, in person, and over the internet.<\/p>\n <\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”1\/2″][vc_column_text]Responsibilities<\/strong><\/p>\n I conducted interviews and created paper and digital wireframing and low and high-fidelity prototyping.\u00a0Also, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.<\/p>\n <\/p>\n My Role: <\/p>\n Software: <\/p>\n Duration: <\/p>\n Project:<\/strong> 1A<\/strong> \/ 1B \/ 1C \/ 1D<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]I used BeOwner data on how to start a business to develop interview questions, which were then used to conduct user interviews. Most interview participants reported that they have complex filings and problems when starting a business.<\/p>\n However, the research feedback made it clear that users will be open and willing to work with an organization that wants to help them to start a business and continue a successful business.[\/vc_column_text][vc_column_text]See UX\u00a0Research Study Plan<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2729″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 1A \/ 1B<\/strong> \/ 1C \/ 1D<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]Problem statement: Problem statement: 1A \/ 1B \/ 1C<\/strong> \/ 1D<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]To understand the competition and to determine the key opportunities that BeOwner can have above the competition, I performed a Competitive Audit.<\/p>\n Auditing a few competitors’ tools and products provided direction on gaps and opportunities to address with the BeOwner app.[\/vc_column_text][vc_column_text]See the full Competitive Audit<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2731″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 1A \/ 1B \/ 1C \/ 1D<\/strong><\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was explicitly offering solutions to start a business and adjacent services in one place and online.[\/vc_column_text][vc_column_text]See the Crazy Eight Exercise<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2734″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top has-animation”][vc_column][vc_text_separator title=”2. Start The Design”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 2A<\/strong> \/ 2B \/ 2C<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]After ideating and drafting some paper wireframes, I created the initial design for the BeOwner app. These designs deliver personalized guidance to users who need help starting a business.[\/vc_column_text][vc_column_text]See the Digital Wireframes<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2735″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 2A \/ 2B<\/strong> \/ 2C<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing how a business can be legally registered or transferred to be a BeOwner organization.[\/vc_column_text][vc_column_text]View BeOwner low-fidelity prototype<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2736″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 2A \/ 2B \/ 2C<\/strong><\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]I conducted a usability study, and the findings from the study helped guide the design from wireframes to mockups. These were the main findings uncovered by the usability study:<\/p>\n <\/p>\n PARAMETERS <\/p>\n FINDINGS: 3A<\/strong> \/ 3B \/ 3C<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]Based on the insights from usability studies, I applied the design changes, like providing a clearly defined area for the main call-to-action. For example, I added white space, brought colour, and highlighted the four main categories BeOwner covers.<\/p>\n <\/p>\n Additionally, I perfected the sign-in process, taking unnecessary steps and making fields and options more visible and apparent. Finally, I created the main navigation where I added a Home Page and a Your Account Page that let users access the main important features in the navigation.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2739″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 3A \/ 3B<\/strong> \/ 3C<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.[\/vc_column_text][vc_column_text]View high-fidelity prototype<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2740″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 3A \/ 3B \/ 3C<\/strong><\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]First Consideration <\/p>\n Second Consideration 4A<\/strong> \/ 4B<\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]<\/p>\n Site Map for Responsive Website [\/vc_column_text][vc_column_text]View Site Map<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2742″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″] 4A \/ 4B<\/strong><\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]Mobile \u2022 Tablet \u2022 Desktop 5A. Takeaways &\u00a0Next Step<\/strong><\/p>\n <\/h4>[vc_column_text]<\/p>\n 5A\u00a0<\/strong><\/p>\n [\/vc_column_text][\/vc_column][vc_column width=”2\/3″][vc_column_text]TAKEAWAYS <\/p>\n What I learned: <\/strong>I learned that even though the problem I was trying to solve was big, diligently going through each step of the design process and aligning with specific user needs helping me come up with feasible and valuable solutions.<\/p>\n NEXT STEPS
\n<\/strong>UX designer leading the CinemaMovie responsive website design<\/p>\n
\n<\/strong>Figma, Adobe Illustrator, Adobe Photoshop, Miro<\/p>\n
\n<\/strong>Aug. to Sept. 2022<\/p>\n
\nGoogle UX Design[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”50px”][\/vc_column][\/vc_row][vc_row][vc_column]SEE CASE STUDY SLIDE DECK<\/span><\/a>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”90px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2728″ img_size=”full”][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”30px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”3270″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top has-animation”][vc_column][vc_text_separator title=”1. Understand The User”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]1A. User Research – Summary<\/strong><\/h4>[vc_column_text]<\/p>\n
1B. Personas<\/strong><\/h4>[vc_column_text]<\/p>\n
\n\u200d<\/strong>Christina<\/strong> is a working engineer who needs help registering a business process and other assistance related, and because she’s swamped, she wants to have all support in one place<\/p>\n
\n\u200d<\/strong>Dennis<\/strong> is a digital strategist with a plan to start a business, but he needs help on the legal side of the business creation that will let him concentrate on perfecting his business plan.[\/vc_column_text][vc_column_text]Meet our users – Personas<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2730″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]1C. Competitive Audit<\/strong><\/h4>[vc_column_text]<\/p>\n
1. Ideation – Crazy Eights<\/strong><\/h4>[vc_column_text]<\/p>\n
2A. Digital Wireframes<\/strong><\/h4>[vc_column_text]<\/p>\n
2B. Low-Fidelity Prototype<\/strong><\/h4>[vc_column_text]<\/p>\n
2C. Usability Study; Parameters<\/strong><\/h4>[vc_column_text]<\/p>\n
\nStudy type: <\/strong>Unmoderated usability study
\n\u200dLocation: <\/strong>Canada, remote
\n\u200dParticipants: <\/strong>5 participants
\n\u200dLength: <\/strong>30-60 minutes<\/p>\n
\nSolution for a new business: <\/strong>People want easy access to solutions to help them start a successful business.
\n\u200dRegister a business: <\/strong>People had difficulty going through the legal process of registering a company.
\n\u200dTransfer a business: <\/strong>People preferred clear indications of the solutions offered and clear messages about the benefits BeOwner offers.[\/vc_column_text][vc_column_text]See the Affinity Diagram<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2738″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top has-animation”][vc_column][vc_text_separator title=”3. Refining The Design”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]3A. Mockups<\/strong><\/h4>[vc_column_text]<\/p>\n
3B. High-Fidelity Prototype<\/strong><\/h4>[vc_column_text]<\/p>\n
3C. Accessibility – Considerations<\/strong><\/h4>[vc_column_text]<\/p>\n
\n<\/strong>Clear labels for interactive elements that screen readers can read.<\/p>\n
\n<\/strong>The initial focus of the home screen on personalized recommendations helps define the primary task or action for the user.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2741″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top has-animation”][vc_column][vc_text_separator title=”4. Responsive Design”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]4A. Information Architecture<\/strong><\/h4>[vc_column_text]<\/p>\n
\n<\/strong>With the app designs completed, I started work on designing the responsive website. I used the BeOwner sitemap to guide the organizational structure of each screen\u2019s design to ensure a cohesive and consistent experience across devices.<\/p>\n4A. Screen Variations<\/strong><\/h4>[vc_column_text]<\/p>\n
\n<\/strong>The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit the specific user needs of each device and screen size.[\/vc_column_text][vc_column_text]View Site Map<\/a>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=”2743″ img_size=”full”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top has-animation”][vc_column][vc_text_separator title=”5. Going Forward”][\/vc_column][\/vc_row][vc_row el_class=”row_padding_top row_padding_bottom has-animation”][vc_column width=”1\/3″]<\/p>\n
\nImpact: <\/strong>Users shared that BeOwner has trustable applications that help start a business successfully. One quote from peer feedback was that “the BeOwner app helps me in the business registration process, and I can concentrate on perfecting and refining my business idea.”<\/em><\/p>\n
\n<\/strong>1. <\/strong>Conduct research on how successful the app is in reaching the goal of helping people to start their businesses.
\n2. <\/strong>Add more educational resources for users to learn how to start, fund and create a business idea. In addition, offering mentoring advice brings extra confidence.
\n3. <\/strong>Emphasize on provide robust solutions, connections and encouragement to users for successfully using BeOwner solutions.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"template":"","portfolio_category":[33],"_links":{"self":[{"href":"https:\/\/designatiostudio.itrendesign.com\/index.php\/wp-json\/wp\/v2\/grenada_portfolio\/2641"}],"collection":[{"href":"https:\/\/designatiostudio.itrendesign.com\/index.php\/wp-json\/wp\/v2\/grenada_portfolio"}],"about":[{"href":"https:\/\/designatiostudio.itrendesign.com\/index.php\/wp-json\/wp\/v2\/types\/grenada_portfolio"}],"wp:attachment":[{"href":"https:\/\/designatiostudio.itrendesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=2641"}],"wp:term":[{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/designatiostudio.itrendesign.com\/index.php\/wp-json\/wp\/v2\/portfolio_category?post=2641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}