CECILIA'S PORTFOLIO
ECBizPlanner
Several topics interested me when choosing the final project. After some research, I finally decided to start a project to design a system for adults to learn how to start a business. Rather than going for a case just for coursework, I have chosen a real-life applicable scenario to go into the market. I called this app ECBizPlanner.
Start with an idea and produce a proper high-fidelity prototype by using Figma. I have showcased the prototype using the iPhone 15 because it is the newest version. At this point, I have not extended it to the tablet yet since it still needs to be proven before going forward.
The application fulfils a range of users with varying business levels; Start-up, Professional and Educational. In this prototype, I am concentrating on the Professional version to give the reader a hint of what is in store and focus more on functionalities rather than cosmetic appearances.
Project Duration - Mar2024 for two weeks
The Problem
Users need an easy-to-use and well-designed business planning app that is methodological and provides relevant content without overwhelming the user and getting an overall picture of the process so that users can prepare the plan from end-to-end efficiently and collaborate for review and comments.
​
My Role
My role as a UX researcher as well as a UX designer designing a business planning app from taking an idea to a prototype by exploring UX Research Methods & leveraging the UX Design Framework.
The Goal
Providing a total solution, an all-in-one platform that is easy to use, methodological, systematic and satisfies a wide range of users with different business backgrounds to help and guide them with the business planning process and embracing them with a great user experience.
​
Responsibilities
From research, competitors’ analysis, interviews, paper & digital wireframing, presentation and low/ high-fidelity prototyping to conducting usability studies. Include accessibility and iterating on designs to ensure they conform to the WCAG AAA standards.
Methodology
The methodology used is based on UX Design Framework - Design Thinking Process. The attached listed the actual processes I took as well as the deliverables created in each stage of the framework Not all the deliverables are attached here in the case study but kindly reach out if you need specific information.
User Research Summary
I have gone through user research and discovered there is limited availability on the platform locally in the market. Most of them are direct links from accountant firms & others are from local universities. Most of them ask to fill in download templates but fail to give an overall picture of the business journey. To an experienced person, it might be fine, but counting out those with big ideas and less business knowledge. These people need step-by-step guidance to make their plans work. To some experienced users, some sites are too detailed and institutional and do not bring them straight to the point.
I conducted interviews and identified the corresponding information, and several groups were identified and interviewed. I can categorise them into three groups; the inexperienced, intermediate experienced and the highly skilled. Each group is represented by personas and put forward an empathy map. Although there are three groups, will focus on the primary user group here in this project due to time constraints i.e. users with experience.
​
This user group confirmed the initial assumptions about user behaviour; users want an easy-to-use app that is concise, to the point, not institutional and methodologically structured with the ability to collaborate with their trusted network for review. This group is a highly skilled workforce who wants to emerge in the business world and be able to do their business planning on different devices. In this prototype, we will concentrate on the mobile version.
User Pain Points
01
Information not relevant
Difficult to locate resourceful information that is relevant to user experience
03
App not well structured
Current tools available in the market are not well-designed and structured in a methodological way that is easy to use
​
02
Not direct & straight forward
Do not need read a detailed, institutional "how-to" before diving into the plan
04
Collaboration missing
Missing collaboration features to share with trusted personnel. Those with this feature are merely from accounting firms asking to incorporate their businesses in return without concern about the actual business feasibility
From Ideas to Final Wireframe Selection
Based on the research. The design has to be clean and neat, providing an end-to-end seamless business planning process. In addition, it will have a collaboration feature that can share work with trusted personnel for comments and review. Able to pick up from last saved work on any devices and will have the feature to read out content on the go from their devices. The landing page will display different business packages for each relevant group. A few designs came up from "crazy eight", consolidated features into one final version, prototyped using Figma. Again, we will focus on the professional version here.
Ideas
Final
Design and Functionalities Thought Process
According to the research and talking to users, different users have different requirements and expectations from the business planning applications as their knowledge varies & there is no "one size fits all" solution. With that in mind, I planned to give them an all-in-one solution platform with different packages available. Categories requirements according to the user level, giving them a great user experience which would take them into a structured, methodological, systematic and seamless process. The features I have considered are progress snapshots to give their status on where things are, the ability to pick up from the last saved work, spell-checker, collaboration functionalities and accessibility considerations. On the marketing and promotional side, I have considered putting in a video to display the product information, which also comes with a trial version besides the three packages.
In this case study, it is a prototype but the final product should be able to use on various devices. The ultimate goal is to ensure the product is usable, equitable, enjoyable and useful.
From Paper Wireframe to Digital to Low Fidelity to High Fidelity to Mock up
From paper to digital wireframe is easily achieved by doing it in Figma. Then going through iterations of designing and testing before the final mock-up is achieved. This time around, it is much easier as I already acquired the knowledge I need to use Figma from before. As the project is for two weeks, therefore, I put all the core functionalities first in the original design and tested out before polishing the details in the prototype elements to create better user interactions. That worked out nicely.
The final product is all conforming to the WCAG AAA standards, and all visual design elements are considered (type classification, typeface, fonts, colours & iconography), scale & proportion, balanced layout & other elements to ensure they comply with the Gestalt principle. Looking back, it was a great enjoyment when the final version was done.
​
I have chosen to use iPhone 15 as the design just because it is the latest model when this case is written.
Screens and design evolvement
Colour Theme
Fonts
Based Colour Themes and Related
Open Sans 15
​
All recommendations and suggestions incorporated in the design after two rounds of usability studies
The usability studies were conducted in Hong Kong. All modifications and fixes have been applied regardless of whether they were Priority 0(P0), Priority 1(P1) or Priority 2 (P2).
P0 are items that must be fixed before the product can work. P1 are items that should be considered in the future release and P2 are those that could be addressed later. In fact, during the two usability studies, there were no P0 items identified.
​
As I am only opening up the Professional mode, therefore, I have received from the user that I have to restrict some of the workflow to avoid confusion, this change has been made and would like to state it here in case you wonder why some of the icons are not highlighted.
Round 1 findings
-
Add one more frame in between Summary and Appendices to clarify process more clearly
-
Restrict workflow accordingly as not all features are opened up at this stage
-
Incorporate spelling tool
Round 2 findings
-
Add hamburger menu
-
Able to show online preview for business plan
-
Allow user to open another business plan
-
Make selection boxes more interactive
Sample Mock-ups Pages
Attaching a few core mock-up screens for illustration
Links to Prototypes
Accessibility Considerations
01
All color contrast are complying with the WCAG AAA standards. Have gone through some tools to also check for the typography and no violations found.
Clearly defined icons with description. Adding font size re-sizing feature.
03
The design is capable of using the accessibility on iPhone to read the content. This will make the review more easy for both the author as well as for busy collaborators to proofread on the go.
02
Adding bilingual capability for Chinese language (this is not done but already pencil in under the table of content)
​
​
​
​
​
04
Design using headings, scale & proportion, balance & layout to ensure better hierarchy and to ensure they comply with the Gestalt principle.
I applied my knowledge acquired previously and applying it to another business case. Start with an idea and produce a proper high-fidelity prototype by using Figma. The application is currently working in one mode; the Professional level due to time constraints & usability tests are conducted and found no issue. It will be easy to extend the work to open up the Start-up pack and Educational pack. Despite a tight deadline, I have made this through and have to say I have thoroughly enjoyed the process and am glad that I have completed three case studies.
​
The impact of this design will give the user a systematically structured way to write a business plan, giving the user the space & knowledge to fill in with information, which often formulas in a way of telling a story! This application allows users to select their comfort level & we’ll provide them with the relevant knowledge, thus making a whole new user experience when writing a business plan. There is certainly no “one size fits all” solution, but surely, there is a “one platform fits all” solution. This tool will help the users to realize their dreams and visions.
Next Steps and Going Forward
01
Perform research on other payment methods that are popular in the market and incorporate other payment options besides credit cards.
Also adding in motivation quotes in the app to encourage users.
02
Investigate the possibilities of using the local variables when designing the dropdown selection boxes. The current method is to define the default/hover/selected states and create the option list before linking them up in the prototype. It works perfectly but might be tedious if there are more than, say, six items in the dropdown boxes. Would be good to check out other options
03
Check into the bilingual translations. This should be done once the English version is completed. We need to accommodate those users who are more comfortable with Chinese and less fluent in English.
​
​
04
Add social media icons, currently, I have deliberately missed them. The common ones we should consider are Facebook, Instagram etc. Can look into the popular ones in the region before implementing them. All it needs are icons and a clickable link would bring you there.
I welcome all comments and not all the work related to this case study is listed. If you need to know more about any part of the details and the work I did, kindly click and reach out.
What Did They Say
