Smart RCIC — UI Design Case Study
EPE Prep Mobile Application
Diversity is our culture…
Introduction
Canada, the true place for diversity and community. What brings Canada this diversity is the thousands of immigrants coming to live here every year. Smart RCIC is an app with a goal of helping the people who value immigration the most.
The Project
We were assigned to a Product Design Team that has been given a task of creating a design for a new app called “Smart RCIC”. The goal of the app is for creating the future of “Regulated Canadian Immigration Consultants” succeeding their EPE exam. It is our job to properly display content of the EPE with a welcoming and friendly design.
1. Research — Client
Before coming to the research, we had many questions to ask our clients simply because we are unaware of RCIC and not knowing where to grab inspiration. Once our clients, Rafael and Daniel from RCIC, came in to have our first meeting, they had an in depth presentation with personas and issues that gave a specific direction to follow. Having the in person meeting, made our clients speak their mind and ideas making it clear for us to understand.
What is SmartRCIC?
- A mobile application designed for the new generation of tech-savvy aspiring RCICs, who have limited time to prepare for the EPE.
- An RCIC is a Registered Canadian Immigration Consultant. Immigration consultants who provide their assistance for a fee need to be registered with the ICCRC and must be accredited as an RCIC.
- The EPE is the Entry to Practice Exam; the final test after completing the immigration course. Participants have to pass this test in order to legally practice as an immigration consultant. And it is a 3-hour exam with 140 questions.
The problems with the EPE Exam
Our client expressed that the exam has many issues that can cause stress to their target audience. First, the exam has very long questions that needs to be answered at an average of 12 seconds per question. Another issue raised is that study materials are hard to come by at an affordable rate. This is due to the content being over priced, not available in libraries.
The biggest issue what is stressed on the exam is that the main demographic for the EPE is immigrants themselves who want to help other immigrants. This specific demographic tends to have full time jobs and/or families they need to take care of, giving them very little time to study the material. These factors create a lot of stress for the people to take the EPE.
All of these issues lead to the exam having a passing rate of around 50%.
What can SmartRCIC can do
The idea is to eliminate the these issues by creating an app that will contain questions on the exam that will be timed to prepare them for the life scenario. SmartRCIC being an app will also have the user not needing to go to hard copy options. This is so the user doesn’t need to purchase over priced material and they can access the app at their own pace.
Research — Design
Understanding that the background and purpose of SmartRCIC, now it’s time for us give off the friendly and welcoming image of what SmartRCIC should be. Our team was more than excited to start gathering inspiration for the design.
Goals:
- Delivering a design that is simple and welcoming to the user.
- Properly displaying the content of the EPE exam.
Gut Test
We started with a 20 Second Gut Test. This is a series of images, icons, typography, and illustrations. This helped our client visualize and us to understand what we should base the design on. This helped us determine our visual design.
Takeaways from the gut test
Dislikes:
- Aggressive uses of dominant colours.
- Overuse of images and page elements that seemed to be jumbled together in a hasty fashion.
- Text that was small and hence confusing to read at a glance.
Likes:
- A clean design with effective use of whitespace.
- Simple, straight-forward illustrations and imagery to add character and delight.
- Easy to read fonts and uncluttered text.
- Round, soft edges for buttons and interactive elements.
2. Design Process
After the research and what we found from the gut test, we can move forward with coming up with a design inception for us to look back to when starting the design.
The Why — Design Inception
The client came with a lot of direction for where we should go. Due to this, when coming up with a why, it sounded too much like a “what”. What we needed to look at is that we needed to ask “why do we need the user to use this app”. Using key words the client was pushing, we came up with this “why”.
Our “why” reflects the immigration support and the community aspect of helping those around you. This also gives us an overall look on the welcoming feel of SmartRCIC.
4 Elements of the Visual Language and mood:
With all the research we gathered, we determined our visual language. To wrap it all together, we wanted a determined, confident, and energized design.
Voice and Brand: The clients key words was Inspiring and Empower. So coming about this, having the brand be more Confident and Friendly would help bring the perseverance energy to the design.
Colour: The colour of the app was a big topic our clients spoke about during the Gut Test. Colours that the client had comments on:
Green: Simply didn’t like it
Red: Reminded them too much of previous RCIC websites
Blue: Looked too much like other government companies
We concluded that purple was the most appealing to the client and a colour that can be feel welcoming and safe.
Shape and Image: Rounded edges were in favour during the gut test so we knew right away to use it. They also didn’t want to use images because it was too similar to textbooks. Instead we went with more illustrations that followed the colour of the app.
Space: The creation of the app is to eliminate using textbooks and convert to tech, the movement needed is to avoid being too similar to notes and textbooks. To avoid this, the movement would need to be simple with generous whitespace.
Style Tile & Brand Guideline
Collecting the traits from the interview we created a couple of mood boards which translated over to style tiles. One mood board created a style tile with warmer colours and a more technical aspect. Using the colour purple concluded from the Gut Test, a darker shade of purple was used to balance the warmer colours.
The second mood board created a more energized and brighter coloured style tile. With generous use of white space, movement and energy being added through colour, complimentary gradients.
Our clients then made the decision of choosing the more energetic mood board due to the welcoming gradient and brighter colours. However, they wanted to raise the brightness of the colours to add a lighter mood. they also believed that the user wouldn’t want to look at darker tones while using the app for longer periods of time.
Logo Iterations
When starting the logo, our clients wanted a friendly and confident design. Due to this, we started with a rounded design. This was made with lowercase letters to not come off intimidating.
Through more iterations later, We moved to a more simplistic approach to create a more informational logo. This eliminates the business of the first design making it more inviting for the user.
Final Logo
After finalizing that a more simplistic design, the heavy acronym paired with a maple leaf makes the logo came off too “sporty”. To eliminate this, our clients wanted the word “Smart” to be enlarged to reflect the app more than the company.
This brought us to our final Logo. This took elements from all the previous iterations to create a welcoming, friendly, and informational logo.
App Logo
The app logo is a direct reference to the main logo, taking the colours from the main logo to reflect it. The lines used is designed to be similar to bars on a bar graph. This shows the statistical and progressive side of the app. The maple leaf has been transferred over from the main logo to keep the Canadian representation of RCIC. These factors come together creating the letter “R”, which is a factor that our clients wanted to push.
Illustrations
Using the resource of Undraw.com we gathered some illustrations that push the welcoming feel with charming illustrations to stay away from the textbook feel.
We downloaded SVG files from Undraw so we can add our visual design to the different shapes of each illustration.
Final Style Tile
Gaining traits throughout our research, we finalized on a style tile. In the final tile, we use generous white space as well as energizing use of colour. Gradients helps add a sense of movement and balance throughout the use of white space. We used illustrations to achieve a friendly design and inspire users. Shapes are mostly rounded and soft, with subtle drop shadows to add depth. For our iconography, we used Google’s Material Design library for their simplicity, and to add consistency and recognizability. Finally, we settled on Ubuntu for our typeface for its modern, technical forms as well as its legibility.
3. Paper Prototypes and Mid Fi Designs
Paper prototypes have been given to us for a design direction to follow. During this time, as UI Designers, we needed to create a library that properly displays the information given.
Later on, Mid-Fidelity Designs have been handed over from our UX designers for us to fill through. To keep consistency, we only used assets from the illustrations we edited and library without unlinking.
4. Final Screens
Once the library was finished and the the Mid-Fi screens were finalized, we were ready to add our designs in. The library was reflective of our final style tile with heavy used of purple and gradients. We edited the illustrations with the main gradient, making them similar to the graphs and progress meters. These traits add uniform while the user makes their way through the app.
https://xd.adobe.com/view/7c1ef543-9edd-464b-7363-48eb9d1666db-0a2f/?fullscreen
Conclusion
It was more than a privilege to work with an amazing product design team. The process was smooth, where our clients knew what they wanted which gave us a great start to work from.
Future UI Considerations
- Creating completely original illustrations, without relying on elements from unDraw’s library. The style from the final tile can remain in the custom illustrations, to stay uniform.
- Implementing interactions and UI animations to add further to our design. This could be in the form of graphs and charts that populate their data.
Its always tough to work in a 2 week sprint, however, our group was outstanding! We were a very productive group with a good balance of professionalism and good down time. Which also gave us a lot of time to get to know each other as people and not just as designers and not separated from UX and UI.
