Critical Thinking Studio — UI Case Study
Myself, a UI designer, and a Team of UX designers worked together to design a functioning app prototype for our client Critical Thinking Studio. This case study will focus on the UI aspect of the design process.
The goal of this project was to
Design an app that increases public access to interactive tools and resources that foster the use of critical thinking.
Through design, our team aimed to satisfy a list of goals for both users and our client.
Client Goals
- To take content that is currently exclusive and to make it more available.
- In the long term, to introduce critical thinking as its own distinct branch under the broad category of self-improvement.
- To make an app that facilitates the habit of thinking critically.
User Goals
- To fill their desire to improve critical thinking.
- To expose them to current and up to date events in a unique way.
- To widen their perspective about the world and themselves.
- To challenge their way of thinking.
BACKGROUND
The Critical Thinking Studio is inspired by Vancouver’s elite and exclusive educational schools. This project seeks to adapt the elite school experience to the online world where it can benefit anyone without the exorbitant cost. The Critical Thinking Studio takes the teaching methods and content that has been exciting curious minds and opening closed ones in the classroom and turns it into an interactive, first of its kind online learning experience.
A typical Critical Thinking Studio lesson is a compilation of different mediums such as text, video, and audio. Each different medium is called a module and together the modules make up a package.
Each of the module’s topics are thought-provoking, relative, and current but are unrelated to each other. This is where a user learns critical thinking. At the end of the package, users are challenged to solve difficult problems by thinking through and answering questions utilizing the little, unrelated knowledge they have gained from the previous modules.
The Critical Thinking Studio is formed on three learning techniques that help the user retain the knowledge that they are learning.
- Regular random interruptions during modules that test the user on information they have just read or listened to.
- Cumulative vocab and multiple-choice quizzes at the end of modules to test users understanding of concepts.
- Collective community engagement over the topics discussed.
RESEARCH
The UX team’s research gave me a great starting point as to who the app’s target user would be. From there I was able to conduct my own research and develop a solid design inception.
Of the people who said they use self-improvement resources, 53% were male and 47% were female. 61% of people who said they need to improve their critical thinking were between the ages of 18–30.
Interview Research
In the UX interviews, I included questions about mood and colour to get a better idea of what users what to feel and see when they were using a self-improvement app. I concluded that users want to see colours that create a calm, but grounded feeling and encouraged them to learn. Pastels, blues, greens, and yellows all scored high when being related to critical thinking and self-improvement. Whereas reds, oranges, and neon colours felt alarming and rushed.
Competitor App Research
Since Critical Thinking Studio hopes to create its own category under the self-improvement umbrella there are no direct competitors. Apps such as luminosity have small aspects of critical thinking but there are no apps solely dedicated to critical thinking. For this, I looked to indirect competitors for research.
Apps like Elevate, Lumonsity, and Khan Academy all have a flat design with a realistic element to them. When comparing the colour pallets of these apps to my interview research I found they didn't match. These apps weren’t what users wanted in a critical thinking app.
An app that did match my user interviews was Headspace. The colour, shape, mood, and space all matched what users were looking for. I decided to take design inspiration from Headspace when conducting the design inception for Critical Thinking Studio.
Client Research
At our kick-off meeting with our client, I asked her to give me 5 descriptors of her company:
- Bicycle — a lot of moving parts, but not too complicated a thing, a classic piece of technology, perfect as it is.
- Orange — flavourful, full, playful, comfortable and in round shape.
- Bright — associated with wisdom and intelligence.
- Soft — unintimidating, welcoming, lots of work but you will be taken care of here.
- Water — refreshing, life source, power, moves in different ways, dynamic.
After this, I ran through a colour swatch exercise with her that had her select three colours that best showcased how she wanted her app to feel. I then asked her to describe why she selected those colours to get a better understanding of the visual representation she is trying to convey.
Next, I conducted a contrasting word test with her to better understand the personality of her brand. The results are shown in bold.
- Masculine / Feminine
- Simple / Intricate
- Gray / Colourful
- Extravagant / Conservative
- Approachable / Authoritative
- Necessity / Luxury
- Fun / Serious
- Casual / Professional
- Modern / Classic
- Elegant/ Sporty
- Extreme / Safe
Finally, I created a gut test using the research from above. A gut test consists of 20 different slides each containing a styled web or mobles app interface. The client gets 20 seconds per slide to rate each style from 1 (I hate it) to 5 (I love it). The following are the highest and lowest ranked slides.
The client rated this slide a 5 because of the calm colours. She especially loved the mint green and the modern illustrations.
The client rated this slide a 1. She didn’t like the dark colours and realistic photos. She also said the mechanical / bicycle feeling was too literal.
DESIGN INCEPTION
Combining the findings from all the research categories allowed me to create a solid design inception that is based on facts and not just aesthetics and personal preference. I also wanted to make sure that the design stood out against self-improvement competitors and didn’t look like a copy of Headspace.
Why
When constructing the why I had to ask myself how I could purposefully design this app to meet the user and client needs. My UI design why actually ended up becoming the why of the whole project. “To design an app that increases public access to interactive tools and resources that foster the use of critical thinking” My intent was to design this app in a way that was both user-friendly and encouraged users to keep learning.
Mood
I established the mood of the design as being simple, fun, modern, unintimidating, and approachable. I wanted the app to embody a friend teaching you a cool new fact that they learned rather than feeling like the user was reading out of a textbook.
Colour
I chose to use a split complementary colour harmony of green, yellow, and purple. This harmony is not a conventional colour harmony and one might initially think that the colours wouldn't look good together until you see it. I chose this because critical thinking is a more abstract form of thinking compared to everyday thinking that is conventional. I wanted colours that made you think and challenged what someone may think is right.
Individually the colours are important as well. Purple combines the calm stability of blue and the fierce energy of red. The colour purple is often associated with royalty, ambition, creativity and wisdom.
Green helps alleviate anxiety, depression, and nervousness it is the most relaxing colour for the human eye to view because green takes up more space in the spectrum visible to the human eye. It is often associated with renewal and growth.
The colour yellow helps activate the memory, encourage communication, enhance vision, build confidence, and stimulate the nervous system.
Movement
Our client associated the word water with her brand. I wanted the movement of the brand to feel like it flowed from page to page with a dynamic purpose.
Shape
The shape again takes cues from water being smooth and rounded, but also from paper pages of a book. The main pages are formed using rounded edges that flow.
Space
The space should feel simple and approachable. by creating an open and breathable layout user don’t feel confined or stressed.
MOOD BOARD
When thinking about the mood of the app the main imagery that came to my head was layers of paper. Creating a sense of depth with pages. I wanted to balance out the complexity of layered paper with simple iconography that kept the app feeling light.
STYLE
Colour
I built my colour pallet off of my initial design inception. I chose a bright yellow to focus attention on CRT buttons. The purple and green are also primary colours but contrast the bright yellow and give a sense of calm as they are more pastel. The secondary colours are a muted light green and dark navy. These colours help to offset the primary colours.
Depth
Page hierarchy and depth was the main pillar of my design. I created three plains at the top level CTR buttons and packages hover. This is where tempory clickable content goes.
The second level is the main level. This level contains text and digital content as well as flat iconography and illustrations. The core information lays on the plain.
The third level is the bottom level. I wanted the third level to feel like the foundation of a house, its locked in a sturdy. This is where the navigation bar sits. I wanted users to feel that the navigation bar was rooted always easy to find.
Iconography
Another key factor when designing was iconography. Apps are condensed to a small screen and an overabundance of text can make it hard for a user to focus. By adding illustrations to the onboarding screens I make the information more simple to understand.
Each individual package also contains specific illustrations that relate to the tile to the package. For example, Hurricanes, Hospitals, and complexity contains illustrations that resemble each of the titles.
Typography
I wanted a simple sans-serif typeface the had rounded points. I chose Quicksand because it is a google typeface that is easily accessible.
Instead of creating a font paring I decided to create an all-cap heading with an extra wide tracking of 5.5. This ensured that the fonts would be compatible but still allowed for greater font hierarchy.
Logo
I wanted to create a logo that was abstract in design, but still had a connection to the brand. I initially started drawing brains but felt that there were too many other companies in the industry using a brain and it didn’t make Critical Thinking Studio stand out. I next looked into using light bulbs but this didn't match my design inception of wanting to be modern.
Next, I started playing with shapes to see if I could create the company’s name out of the layers of shapes and negative space. After multiple iterations, I was able to create the company’s acronym using the exact same shape but in different sizes and orientations.
At first glance, the shape looks to just be a symbol of the company, but with more insight, you can see the C T S take form. This relates back to the purpose of the app, using critical thinking to see the logo for more than what it is.
Visually the logo contains the three primary colours, but can also have the same effect in grey scale. It also retains its legibility at multiple different sizes.
Buttons and Symbols
There are five types of buttons in this design. The first three are all on the top plain of design. These include the main yellow CTR button, secondary navy CTR button and clickable packages. All these buttons contain a slight grey drop shadow which sets them on the top plain.
The next set of buttons are flat symbols. The back button and module buttons are simple symbols on the main plain. When a module has been complete the button gets a green abstract overlay which symbolizes being complete.
The last set of buttons are the iconography used for the navigation bar. These were designed using a grid. This ensures that all the illustrations are cohesive. Each symbol uses vertical, horizontal, 45-degree diagonal lines, or a whole and or /part of a circle with the same diameter. The buttons have a yellow overlay to show when they are active.
Style guide
I created a style guide that includes all the specific details that would be needed to create additional pages of the app.
WIREFRAMES
The UX team started testing their layout in low fidelity. After their initial testing, we were able to collaborate to create the mid fidelity so they could further test user flow.
Once testing was completed, the UX team passed off the mid fidelity wireframes for me to start designing the high fidelity. As the project progressed we worked together to add in new pages that were missing and make critical user adjustments. Thanks to the design process, bringing the wireframes from mid fidelity to high fidelity wasn't too hard. I already had a well-developed symbol library in Sketch that was easy to overlay. Only minor tweaks were needed due to utilizing atomic design.
FINAL DESIGN
The final design I feel captures the “why” I set out to achieve. The design allows users to simply work through complex problems and creates a digital environment that allows users to better their critical thinking.
Key Features
My first key feature of the design was the layered paper effect. I wanted to create a sense of depth for all three plains of my design, but without making it seem cheap. The suttle drop shadows over the stacked paper is unique in its design. The curvature of the paper adds a sense of creativity along with the added texture to each sheet. The design takes cues from Google’s material design but creates something that is its own.
The next key feature is the UI process of moving through a package. I wanted it to feel like you selected a package from the home screen by picking it up and sliding the sheets up paper to the package content.
Overall the app feels purposeful in its design. It executes the design inception that I intended it to. The paper design is present but isn’t overpowering and allows the app to still feel current. The primary colour scheme paired with white space executes what I intended allowing the app to feel unintimidating, and approachable.
LEARNING OUTCOMES
This was the first time that I created a UI design for a full app. When creating an app there are so many screens and parts of a design that you don't think about. It was eye-opening to see really how much attention to detail goes into creating a fully functioning app.
This was also the first time that I got to work with UX designers. I found that communication is key. Not everyone knows what each other's jobs look like. It is important to have clear channels of communication as well as set expectations for each group member to meet.
For this project, I was the only UI designer. I had to schedule my time wisely so that I could make deadlines on time as I knew my UX team was relying on me. Next time I will be more prepared with how long certain tasks take so I can schedule my time even more efficiently.
PROTOTYPE
See more on my portfolio at www.devonseidel.com
