UI Designer
4 Week
UI Wireframes • High Fidelity Prototype • Landing Page
The Cord app was the third project of the Designation boot camp. The project name was Tally and a group from the previous cohort completed the UX research . The project in itself is a prompt given to the newer cohorts. To get us used to work in the Agile method. Sprints to be more specific. Each sprint lasted a week and we completed the project in four sprints. Part of the work had to be a team. This included: studying the UX research, researching competitors and the design principles. Each member had to rename the app, create wireframes and make high fidelity mock-ups. These were then used for creating the prototype. The final piece was the marketing site.
After all this work got completed, we presented the final product to a panel. Which included previous Designation attendees and industry experts. The final deliverables were to apply any feedback received from the panel. As well as the creation of a style guide and UI kit.
To flesh out this app as a product, it needed an identity but more important was having a rational system. This would provide structure and set guidelines for the use of colors, typography, images and other elements. The brand needed to talk to the student but it also had to keep in mind the parent since both use the app.
I made three mood boards for this app this was the chosen one. I named it the “real teenager” concept. Many of the elements here ended up in the final product. Like the color palette, typography and the use of Polaroid as a metaphor for the card UI elements.
In the style tile, I further developed the concept. I added the icon style, the use of typography for hierarchy and the card for subjects. One of the requirements of the user persona was that the student had fast-paced life. Thus the student doesn't want to waste time finding things in the app. Which is why I present the subject in this way versus having a list making it easy to find the subject at a glance. In the image to the right, we can see a mocked up screen with a pretty defined look that got refined during the process.
To come up with a logo I needed to come up with a name for the app. I started writing keywords or adjectives for education and one of the words was “connect”. This reminded me of how I learned about communication in the early stages of technology. Through the experiment of linking two cups with a string or a cord. After various iterations I arrived at the final version of the logo.
For the app icon, I tried a couple of versions this were my three favorite ones. The first option was having the logotype as the app icon. The size reduction, while readable, didn’t look appealing to me. Also combined with the cluster of other apps I felt it added more noise. The second one was having a representation of the “c” and “d” in “cord”. This I thought was too abstract adding to the mental load of recognizing the app. Which is why I went with the “c”. This increased the size of the dot and having the line trail off makes our brain complete the image. Between this and the animation for the logo, will make the app icon memorable and easy to recognize.
Looking at the app this way it seems like a small app which was surprising to me as I was looking at it from “inside-the-box”. In this diagram, we see how the screens connect by sections. The first screen, after the login/signup, it’s the home or overview of the day. From here the user can go into the calendar by tapping on the tab bar. In the calendar section, they can add events such as exam dates, games or recitals.
They then can tap on “thoughts” to see their thoughts on current assignments and materials. They can see them sorted by “agenda”, a feed-style view with the newest at the top. Then by subject to find a specific thought about a subject. After this, users can find their “bookmarked”, or saved, thoughts. This are thoughts they think are important and referenced in the future. In the last section we have thoughts by date.
The last section of the app is the “daily pop” section for quizzes. Once tapped students see the “pop” for that day’s subject. By tapping the segmented controls, below the "nav bar", they can see their bookmarked “pops”. Here the segmented controls change to allow sorting by subject or by date. Back in the main daily pop screen the segmented controls button for “date” can be tapped to see “past pops”. Like “bookmarked pops” they can be sort by subject or date.
The calendar section of the app is where the students organize their day. They can see their day in a normal calendar view or in a list by tapping “list view” in the segmented controls. In calendar view they have a "today" section which summarizes their activities for the day. To add something to their calendar students can tap on any day in the calendar view. In the list view they can tap on the plus button. After that the screen on the right will pop up and they can add what they need including thoughts.
Thoughts are the main form of communication between students and parents. Here is where the students write his/her particular thoughts on a subject which the parent can then view. They also act as reminders in a journal-kind of way. For example, a student can note down that they’re having difficulty with a subject and that they need to study up on it.
Daily Pop is a pop-quiz feature to help students learn the content for their classes. They can be viewed by subject, bookmarked or past dates.
While the prototype was build to follow a specific flow. I decided to expand it to cover the majority of the app to include it in the portfolio. So, please, give it a try and thanks for your time.