Eurika: A UI Case Study
Introduction
For our third project at Red Academy, we worked with a local community partner to design an app based on the requirements and needs of both our client and the app users.
We worked with our wonderful client Daniel and his company Banging Rocks to digitize a physical card deck known as Group Works, which supports facilitators in executing group gatherings whether it be meetings, debriefs, or team building.
The deck was founded by the Group Pattern Language Project (GPLP), a group of individuals who spent several years collaborating to create the current Group Works Deck. Over many years, they pooled information and knowledge by witnessing group environments and how these groups worked & collaborated together. This knowledge was used to make the group Works deck the most impactful and useful as possible.
Meet the Team
As a team, our task was to digitize this set of Group Works cards into an app that represented the original card deck and provided solutions to issues that the current card deck users were experiencing. The app is meant to assist users to plan for meetings more efficiently and emulate the physical deck rather than replacing it.
Before I dive into the research section, I wanted to elaborate that we worked collaboratively as a team consisting of both UX and UI students and would like to introduce our team below!
Our team consisted of 5 members, two of whom are UX students and three UI. Natiea and Ethan were part of the UX team, and myself, Jeremy, and Halina made up the UI part of the team.
Research
Following our initial client kickoff meeting, we combined the information from the meeting as well as online research to create a list of key points to keep in mind during the app design. We researched other tarot card apps although there was quite a limited range, so we searched dribbble for inspiration for card design as well as other modern apps designed for group collaboration. The key findings from both the kickoff meeting and online research were:
Stay true to the roots of card design
Keep layout clean & simple, and easy to understand for current users/new users
Keep rainbow color palette on physical cards, play with imagery + graphics
Design app for ability to be applied in a corporate environment while remaining playful
The business goals behind this project were to create an app that again, emulated the card design rather than replacing it, and an app that portrayed the reasoning behind why the original card deck was created. To reiterate this, the app is primarily used to support facilitators in executing group gatherings.
Target Audience/Persona
As a team, we determined our target audience and user persona as a basis for the rest of the project. Our persona inspires our team’s design decisions as this is an example of an individual we will be designing the app for. They influence our decisions along with other parts of the project including research and gut test results, which I will explain further on.
After doing our research as a team and analyzing the information/results, we determined that our target audience was current users of the card deck, as well as new users. This meant we had to design an app that was clean, simple, and easy to understand for current users. We had to ensure there was not a disconnect between the current physical deck and the app we were designing, and that current users were able to easily familiarize themselves with the app. We also had to ensure it was easy for new users to learn and understand how the cards worked by including an information section in the app. This part of the process set a solid base for our design decisions which will be explained throughout the rest of my case study.
After determining our target audience, the UX team created our persona and provided it to the UI team to assist and inspire the design process. Our persona is:
Maggie Richards
- 44 years old
- Facilitator and Educator
Mindset: “I love using the Group Works Card Deck to bring life and dynamism to my meetings, but I find using the physical cards alone for planning my meetings is a bit limited. I need more functionality.”
Need for the App: “When I’m planning for meetings, I want to be able to group cards together and make notes on those collections. It would be nice to have the ability to do it all in one place without the need for sticky notes and other materials.”
The UI Design Process
Gut test
The first steps of the UI design process following research included conducting the gut test.
The gut test is a technique that was presented to our client in order to determine his aesthetic preferences and give our UI team a better idea for the visual design direction. We presented 20 varying images in terms of visual design and presented them to our client to gauge his gut reaction to each option, and rate them on a scale of 1 (do not like) to 5 (love).
We asked our client Daniel to pay attention to the visual aspects of each design including color, shapes, icons, typefaces, and general composition and told him not to focus so much on the content of the app. From the gut test that we performed, two favorite approaches were selected, which were the playful, fun, vivid approach, and the approach with a large focus on imagery.
Design Inception sheet
The next step in the UI design process was creating our design inception sheets. The design inception sheet is great for designers to use as it helps to set a solid base for the design. It consists of a “Why” or reasoning behind our project which sets a basis for all of our design decisions. The design inception sheet also includes the mood and visual language (shape, space, movement, color) for a specific design direction which stems from our “Why”, and is great for reference when making a certain design decision.
For our design inception sheets, we created three different directions that stemmed from the same “Why”. This is because each of our design directions differed in terms of mood and visual language. The “Why” became:
“To promote the growth of interconnection through insight and understanding of the pattern language”
Our “Why” is based on the idea of Pattern Language which was created by architect Christopher Alexander and is defined as,
“an attempt to express the deeper wisdom of what brings aliveness within a particular field of human endeavor, through a set of interconnected expressions arising from that wisdom.”
This info was obtained from the Group Works website at this link on the Group Works website.
Our three directions
After creating our “Why”, we went three different directions in terms of the mood and visual language using the results from our gut test and the information obtained from our initial client kickoff meeting. We also kept our persona in mind throughout this process.
Using the gut test results, we decided to go a playful direction as well as a more muted, professional direction, both with a large focus on imagery. We also decided to go a direction with a minimalist approach with more delicate pastel colors to give our client a variety of options to choose from and give him the option to choose different elements that he liked from each direction.
Daniel did choose elements from each direction and from there we combined them to create the final design, which will be explained later.
The Muted Direction
Muted Moodboard
The first direction that our team decided to go was the muted direction. It has a very muted and professional feel with a focus on human connection, and the mood conveyed through the moodboard is:
Wise, Positive, Evolving, Human Connection
Muted Style Tile
The visual language elements of the inception sheet are portrayed through our style tiles.
Visual Language:
Shape — Angular
Space — Open
Movement — smooth, direct
Color — Solid, muted, natural
- Category icons — Muted colors, natural and professional
- App icons — simple lines with little quirks like open connections
- Colors — Muted colors, natural and professional
- Typeface — Radley, which is the font used in the original cards but the regular version for readability, Lato for clear readability
The Minimalist Direction
Minimalist Moodboard
The second direction that our team decided to go was the minimalist direction. It has a more delicate pastel approach with a key focus on collaboration. The mood conveyed through this moodboard is:
Wise, Present, Evolving, Calm, Mindful, Productive
Simple in form
Minimalist Style Tile
Visual Language:
Shape — basic, softened
Space — open, bare, sparse
Movement — hurried, static
Color — transluscent
- Category icons — pastel, muted, delicate colors
- App icons — professional, straightforward
- Typeface — Futura (header) — geometric — resembling circular pattern, simple but friendly and Proxima Nova (copy) for professionalism and legibility
- Buttons — only slightly rounded corners to focus on efficiency and professionalism, translucent, muted, overlay, monotone
The Playful Direction
Playful Moodboard
The third Direction has a fun and playful approach with a sense of curiosity and childish mood while remaining simple and clean. The mood that this moodboard is conveying is:
Wise, Positive, Curious, Playful, Evolving, Communication
Playful Style Tile
Visual Language:
Shape — Rounded, freeform, waves
Space — Open, free, white space
Movement — Gentle, steady, free-flowing
Color — Rainbow, bright, vivid, gradient
- Category icons — slight gradient for depth and modern feel, rainbow, rounded shapes
- App icons — playful, rounded corners w/ rounded shapes (playful, inviting, interactive, consistent)
- Colors — Vivid & bright (playfulness), gradient, rainbow on physical cards
- Typeface — Playfair Display (header) and Circe (body) — playful yet legible and professional
- Buttons — Rounded corners for consistency, bright vivid colors to stand out as CTA
Final Direction
Style Tile
The final style tile that we created before continuing into the skinning, or implementing of the visual design aspects into the mid-fi wireframes, is below. We combined different elements from each of our style tiles based on the preference of our client through the gut test, as well as keeping our target audience and user persona in mind to create an app that is user-focused and highly accessible.
Visual language:
Shape — Rounded, gentle, smooth
Space — Open, free, spacious, white space
Movement — flowing, free, gentle
Color — vivid, gradient, muted rainbow colours
- Category icons — slight gradient for depth and modern feel, muted rainbow, rounded shapes for playfulness
- App icons — playful, rounded corners with rounded shapes (playful, inviting, interactive, consistent)
- Colors — muted rainbow colors to stay true to physical cards & not overpowering, rainbow gradient
- Typeface — Playfair Display (header) and Catamaran (copy), Playful yet legible and professional, easy readability for mobile
- Buttons — rounded corners for consistency, bright yet muted green to stand out as CTA (banging rocks inspired)
During the creation of our final style tile and throughout the entire process, we worked on our logo design and finalized the design of the logo around the same time as completing the final style tile. I will do a walk through the process of the logo design in the next section.
Logo
1st Step — Initial sketches: For the logo design of Eurika, we initially sketched out our rough ideas on a sheet of paper and drew as many options as possible to broaden our range. We kept in mind keywords such as collaboration and teamwork to brainstorm ideas. The first step is pictured above.
2nd Step — Narrowing it Down: The second step of our logo design consisted of selecting three logos as a team, that we felt most suited the company/project as a whole and resonated with the branding. The three options we choose all included the general concept of collaboration represented in different visual forms. The three options chosen are pictured above.
3rd Step — Logo Evolution: The third step in our logo design process was to digitize our three options in black and white on adobe illustrator and present them to the client. After an option was chosen by the client, we adjusted and experimented with the base shape of the logo to make it more lively, appealing, and suiting to the company’s branding. The chosen option is pictured above on the left, along with the evolution of the logo.
4th Step — Finalizing: The fourth and final step in our logo design process was finalizing the logo design and presenting it to our client alongside the high fidelity prototype and presentation of the design process. The final logo design consists of a group of four people in a card shape format representing the cards in the physical deck. This represents the idea of collaboration and communication. The rainbow color scheme is staying true to the roots of the physical cards and the color of the pattern icons. The rainbow colors are a gradient across the logo to represent unity and growth/evolution of working together as a team!
Hi-Fidelity Screens/Final Prototype
For the final Hi-Fi screens, our team created an InVision prototype walkthrough, as well as a Principle prototype for presentation. I will link the InVision prototype below.
The first four screens of the example wireframes consist of the patterns/categories page, the pattern card, a card within a pattern, as well as a collection example.
When a user first opens the app, they briefly presented with a splash/loading screen, followed by the main page called “Patterns”. It consists of the 9 card patterns or categories within the deck and when tapped, the user will be navigated to the pattern card page.
The pattern card (intention in this case) page consists of an explanation of the card and when a user scrolls down they can view the cards within the pattern (pictured above). There is also a share and add to collection option on the top right for the pattern card where a user can share cards via email, or add their own set collections within the app. This is great if a user wants to use a specific collection for a meeting, debrief, etc. When a card is selected, the user will transition to the selected card.
A selected card (commitment in this case) has a brief explanation, along with a share and add to collection option. As the user scrolls down they have a list of related cards which was derived from the physical card deck (pictured above along with pattern card).
I will explain the example collection screen (co-op housing workshop) in the next section along with the following example wireframes.
The following wireframes (above) include a cards screen, collections screen, and an overlay example.
When a card is added using the add to collection button on a specific card, a screen would appear prompting the user to choose a collection to add the card to. After the process, the user’s action would be confirmed with a checkmark (right) and they can go to the collection using the CTA on this overlay.
After a user goes to the given collection, they can view the cards within that specific collection (co-op housing workshop) which can also be navigated to through the collection screen (middle screen).
The cards screen (left) is an index where users can view all the cards alphabetically or can navigate through the 91 cards in the deck easily by using the alphabetical sorting options on this screen. The search bar is also an additional feature for quickly searching for a specific card.
Invision Prototype
Please enjoy viewing the InVision prototype below!
Conclusion
This project was very valuable to myself and I enjoyed working with a team of individuals to create a product for a community client. Our client Daniel was an absolute pleasure to work with and was very helpful every step of the way in providing the team with what we required or anything additional that we needed.
It was a great learning experience and our team grew and actively learned together, and from each other. We were also able to effectively adapt to the situations or roadblocks that we experienced in a timely and collaborative manner. We worked extremely well as a team and am very thankful for my team members. I learned a lot from them and from RED academy in general through this project, especially the instructors.
As for future considerations, there were a few in terms of UX, but I think that a takeaway for the UI team would be to have a better understanding of each other’s viewpoints and being more communicative about certain topics. All in all, we grew and learned from this as we worked through the project.
Thank you for taking the time to read and supporting our work!
