This app can provide an online environment for anyone who wants to learn something together online. People can create an online group, learn and share online with others who take the same course, can help users insist on learning and not feel lonely.
Target users like commuters and students who lack time to switch job and want to learn something new.
UX design
UI design
User-centered design
Usability test
Figma
Google Form
Concepts app
Keynote / Numbers / Pages.
4 weeks
- Create a new mobile app independently.
- Find volunteers to complete the surveys and usability test.
- Achieve design goals:
1. Easily to create a new online learning group.
2. Easily to share and save information in share board.
Before this research, I had created a small study group through the Wechat app with 37 people taking the same course, and this time there were 12 people taking the survey.
In addition to the questionnaire design tips I learned above, this survey shows the demand for this application and the user is willing to join an online group to learn together. And the two main user groups are commuters and students.
Since this application was designed from 0 to 1, I created personas and tried to predict user needs based on user journey maps, user flows and storyboards, and then I could start creating my wireframes.
From the research, I found the two kind of people will use this online learning group app, commuters and students.
From the perspective of the personas, I created a map of their journey to see what I could do for them. The goal of this map is for a user to complete an online user experience course.
Draw a user flowchart, thinking about what users will do with the online learning group app, and guiding them to achieve their goals to make the app useful.
Draw a user flowchart, thinking about what users will do with the online learning group app, and guiding them to achieve their goals to make the app useful.
The logo is the first impression given to the user, it helps the user to remember the application, and each appearance of the logo in daily life will deepen the user's impression. In this application, I tried to create two logos using the initials of the Online Learning Group, and finally I chose the second one, here are the details.
↓ Logo #1
Looks like a robot and is cute, but OLG is an abbreviation for many words, such as "On-line Gamers", which can be easily misunderstood.
↓ Logo #2
Is a fusion of these three letters in a simple, round shape that better reflects the concept of a Group.
Except Logo, icons in the navigation bar are also very important. So I integrated with brand elements to improve brand recognition and it more interesting.
I conduct two times usability test, and summarized user feedback and filtered out some priority problems and solution.
Testers
10 people
Goal
Determine if users can complete core tasks within the low and high-fidelity prototype. And find out the top problems we need to solve.
- Task 01: From home page, create a new group.
- Task 02: Invite friend to your group you just created: “Watercolor learning group”
- Task 03: In your groups “Watercolor learning group” page, figure out where is the “Share board” page.
- Task 04: Then review and save “How to choose your material” from “Share board”.Task 05: Create a new share.
What I learned from the research
With the feedback from tester, I realized that it would be easier to make components for text and cards, and that I could change all the components in one place, saving a lot of time.
If we have different insights, I will communicate with the users and exchange our mutual design rationale to make a better design.
In the Group Chat page, I try to guide the use to find the button to share board page, but the testers told me it is hard to find the button.
Since this is a Group Chat page, I wanted this design to be easy for users to communicate. The location of the other icons should be at the bottom and keep concise, below I will show three versions I created and tab bar design details.
Because many cell phones have long screens, I use popular screen size to instead of the previous one. And I also do some change to improve the use experience.
For the share board icon, since it is the core feature, I chose to outline it in grey to catch the user's attention. The reason for not using red color because this page is used for group chats, red color will be too strong.
For the other icons, I chose to fill them with black, which also attracts the user's attention, but is less outstanding than the share board icon.
Finally, I chose a design with only one line because it makes the tab bar look simpler and more modern.
Share board have three features, at the beginning I design individual page for them, but it is a little complicate and made testers confuse and have no idea where are they after a few clicks.
In the Share Board page, users can find all the sharing information, including group members' sharing, users' sharing and favorites. I combined these three pages “Group shared”, “Your shared” and “Your saved” into one page.
- Make the screen easier to read.
- Reduce the process to achieve users’ target.
- Less thinking and operate simple.
In the Home page, the testers said they can easily find the button to create a new group, but they thought the information cards in the home page are difficult to read.
When I thought about how to make the cards easier to read, I realized that I should also make it easier for users to get the information about the group so that they could make a decision to join the group quickly. Here are the changes I made to do that.
I saw many great portfolios, I think designer‘s unique design comes from their different experience, and design concept is the core competence. As this case study is my first application design, so I want to show more details including my design thinking, how to deal with users’ feedback, and how I modify my design.
I will keep learning to improve my professional skills, such as the coming online course Graphic Design in Coursera.
