Pro-Sales App UIUX Design
Pro-Sales App UIUX Design
Pro-Sales App UIUX Design
-
Project Role: Teaching Assistant (Designer: Linda Hsu)
-
Support Team: Appedu design institute
-
Advisor: Peichi, founder of Tones design,
-
Skills/Tools: Adobe illustrator, photoshop
-
Timeline: Fall 2016
-
Project Role: Teaching Assistant (Designer: Linda Hsu)
-
Support Team: Appedu design institute
-
Advisor: Peichi, founder of Tones design,
-
Skills/Tools: Adobe illustrator, photoshop
-
Timeline: Fall 2016
-
Project Role: Teaching Assistant (Designer: Linda Hsu)
-
Support Team: Appedu design institute
-
Advisor: Peichi, founder of Tones design,
-
Skills/Tools: Adobe illustrator, photoshop
-
Timeline: Fall 2016
Your Business Teacher - Start a business
“Let me teach you how to create your own business, how to build the unique brand.” #Concept, #Research, #Visuals
Project Initiated by Google UX design Professional Certificate ; UCI Human Computer Interaction and Design
DURATION
Aug-Oct, 2021 (2.5 months)
PROJECT ROLE
UX Designer and Researcher
SUPPORT TEAM
10 UX Designers
Project background
Inspired from the book- "How to Start a Business in Taiwan," "Your Business Teacher” is an online learning platform that teaches young adults how to create their company. The strategy team at this platform focus on someone who lacks general knowledge about business since it wants to improve education on the business-related topic and, in doing so, also hopes to reduce young entrepreneurs’ pressure on starting their company. Thus, the typical user of this platform is between 20-35 years old, and most are creative workers, young entrepreneurs, or early career professionals, like interns. In short, Your Business Teacher’s is designed to make business guide completed and easy for all fields of users. The site allows users to search, editing, and downloading business information.
Other Related Platforms - Competitive Product Analysis
These products aim to help all new entrepreneurs create or maintain their business (brand) easily, but they are designed with different angles. To be more specific, "Small Business startup" focuses on how to find your own opportunities, "Startitup" provides tools you need on how to start a small business and get to real revenue, and "Startup Space" cares about how to instruct you real-time.
In my case, I hope I can help them build a brand online directly. That is to say, we can finish our business lessons and make our business come true by myself. Moreover, this app provides us with real-time consultants and inspections. If our application materials don't meet its requirement, we will be rejected. Apparently, this system offers a service to get us easily startup strategy.
Target user
Young entrepreneurs of all genders and backgrounds who want to create their brand on their own would have a convenient experience to learn.
Innovation is driven by customer insight, and we can't gain insight without empathy.
The very first step, and the centerpiece, of the design thinking process, is to develop empathy with our users.
By starting draw out the full spectrum of user journey, I can learn the way they do things and why,
their physical and emotional needs, how they think about the world, and what is meaningful to them.
Research conducted and the research findings
To understand the story of our users at a deeply human level. We need to understand our user deeper. There are two main types of research we use to learn about our users: Engage - User interviews and Observe - NPS Studies. By combing these two research method, give us more holistic user input. The NPS studies were based on a regular quantitative survey in the past year, and I look into the feedbacks to find the pattern. On the other hand, user interviews was a great way to help us ask more question and collect more in-depth qualitative findings.
In this session, we conducted user research and received feedback from users that we incorporated into user personas. For example, one of our user personas, Alex, is a 25-year old graduate student majoring in programming and aspires to have his own business to sell his works to satisfy his sense of accomplishment or provide some CS-related service to enhance his customer working efficiency. The research revealed that Alex was frustrated by the cluttered navigation because it made him hard to find business information accurately. We also learned that Alex would feel tired and bored with learning due to incorrect sizes and unvivid styles. Alex would like to see improvements on any business-related learning app, like more oversized buttons, simple icons, and colorful design.
-
User journey
(Alex Lawther's goal : I can easily learn how to start, maintain, export my business via end-to-end online system.)
(the other personas are shown on the page below as reference.)
So, what’s the problem?
Business-related apps and sites have a complicated information feature that sometimes feels a bit confusing and difficult to follow and action.
Insights learned
From user research, we learned that there were some pain points for users. The three most significant issues were
-
the correctness of business-related information,
-
the size of buttons, and
-
the types of icons used on mobile and desktop devices.
The small buttons caused users to select incorrect sizes and colors; thus, we solved this issue by making more oversized buttons and simpler icons. We also learned that users wanted a more enjoyable experience browsing for young adults’ learning. They commented that all of the business-related sites felt too dull. They also said that sometimes they came to pages without a specific item in mind. That is to say, we can solve these problems by making the homepage cooler and engaging for the user by adding business-related images and videos and using vivid colors to bring specific items to the user’s attention. This made the browsing experience more enjoyable, which helped meet the user’s needs.
Ideation: sketches and storyboard
Here’s how we put our users’ needs first. The process below begins with our initial idea’s wireframes, then moves to mockups, and finally to the high-fidelity prototype.
Sketch
We sketched out some concepts for our app’s design on what we learned about our users in the empathize stage using the Crazy 8’s approach. We rapidly brainstormed multiple creative solutions based on what we learned from our research to identify various ways to begin designing.
Storyboard
To show our goal of this product clearly, we also drew a big picture storyboard through images displayed in a sequence of panels or frames that visually describes and explores a user’s experience with this product.
Build wireframes and Low-fidelity prototypes
In this version, I connected the digital wireframes from the previous step together into a working prototype. That meant users could interact with each part of the design and test the way it worked. In this example, we demonstrate how the various wireframes that make up our design pages fit together when each element becomes interactive.
Paper Wireframes
In this stage, we created the first levels of the design using what we knew about our users and their needs. The headings are clearly listed and separated by categories. There are buttons and icons to represent clearly defined sections, and there is a place for a carousel that will display more business-related information, images, and videos without including too many on-screen at one time. These provide a simplified and intuitive means of navigation for the user and allow the user to browse for a more enjoyable user experience.
Digital Wireframes & Lo-Fi Prototypes
Revised wireframes after low-fidelity prototype usability testing
What kind of person do we want to be to show up in front of our user? To align our team member’s idea, I initiate this quick survey to invite our team members to choose word car I prepared. Although our team members work from different counties/ time zone - It’s amazing that how quickly we found the consensus. By using the slack integrated vote tool and zoom for open discussion, I can be still proud to say that we move the needle forward quite efficiently.
In the revised version, you see the progression of the design based on insights identified from usability test feedback. Design additions include “+” and “-” buttons to allow for the ability to edit quantity and a prompt for users to log in to their account if they have one.
Priority 0
-
Based on the theme that: (Useful), an insight is: (“Doesn't see uses for business plan and guide”).
-
Based on the theme that: (Confusion), an insight is: (“Confused about names of sections”) and
(“Has a hard time knowing how to find a guide”). -
Based on the theme that: (Getting started), an insight is: (“Feels frustrated following steps to finish them”).
-
Based on the theme that: (tone), an insight is: ( “Speaks in an annoyed or impatient tone”).
Priority 1
-
Based on the theme that: (Useful), an insight is:(“See uses for business plan and guide, but the user prefers to see more images and videos. ”).
-
Based on the theme that: (Confusion), an insight is: (“ I can know how to find a guide, but nativation can be improved to reduce my confusion”).
-
Based on the theme that: (Getting started), an insight is: (“Feels inconvenient following steps to finish them”).
-
Based on the theme that: (tone), an insight is: ( “Speaks in an indifferent tone”)
Priority 2
-
Based on the theme that: (Useful), an insight is: (“See uses for business plan and guide, and...
-
if it can enhance its server, it would become better”).
-
Based on the theme that: (Confusion), an insight is: (“Easily finds guide. Just need to adjust the website alignment and text size, or
add the voice explanation. -
Based on the theme that: (Getting started), an insight is: (““No problem following steps to finish them, but I hope this website style can
be more vivid”). -
Based on the theme that: (tone), an insight is: ( “Speaks in a positive tone.”)
Mockup and High-fidelity prototype
At this point in the design cycle, we began to add colors, images, and icons to our designs. We updated the shape, size, and structure of content borders and sections to high-fidelity versions. We also implemented the feedback we received during usability testing to improve the user experience. To do this, we simplified “Start a business,” made the language clearer, demonstrated the value of each content section, and added more details on each step to make it easier to understand.
We then moved from designing to prototyping to create our hi-fi prototype. We connected all of our screens into a working version that was representative of our final product. Each page of the design reflected the changes we made due to usability testing and worked exactly like the real app world. This is what we presented to stakeholders and passed off to the development team for production.
Visual Elements
Utilizing a soft gradient consisting of warm and vivid colors felt like the perfect fit for "Your Business Teacher" platform's branding. The Yellow helps evoke an active feeling out of users , and paired with the Grays it creates a nice balance between calm and energetic. The main typeface of choice for the app is Segoe UI . I felt this typeface best fit the app do to it's extreme versatility through uppercase and lowercase styling, as well as dark and light text fills
-
Typography
-
Colors
Accessibility considerations
To ensure that our app was accessible, we included assistive technologies such as keyboards and screen readers throughout all stages of the design cycle, including interviews and usability testing. We took their needs and feedback and incorporated what we learned into our designs to provide an inclusive and accessible experience for all.
