Polaris

POLARIS

Self-Care Mobile App Case Study

The Mission:

This group project was worked on for a whole semester (4 months). There were a lot of steps that we had to follow through. But the basis of it is to brainstorm on a defined problem, gather information from it through surveys, and from the survey, create a solution that will work best with the problem chosen. We then have to create a low/medium-fidelity wireframes, high-fidelity wireframes, then prototype them.

For our group, we initially looked into college students (~ages 18-30) and decided to build a self-care app. It then transformed into a “habit builder” app to help those working remotely-or just need assistance with tracking new healthy habits.

Group brainstorm session.

Interview questions and survey findings.

Challenges Faced:

  • During the first stage of the project, my group members and I had troubles deciding on which problem to tackle in the amount of time we were given.
  • We had confusion in understanding some of the deliverables stated in the first few stages. 
  • We didn’t know whether we actually had to hand code the project in the end or just have a prototype.
  • “Should we converge during this section of the project? Or just discuss it as a group?”
  • “Who should be our target audiences for our app?”

User persona.

Low-Fidelity Wireframes

High-Fidelity Wireframes & Prototype

>To access the prototype, please click here.

Outcome:

Although we did have 4 months to create our product, we weren’t able to finish it entirely as planned due to simultaneously working on multiple projects similar to this; along with practicum and internships. We were able to compile all our presentation slides, wireframes, and branding but we were not able to fully prototype the design. There are some buttons that do not work as it does not have pages to link to. But overall, the most important pages and buttons are available for viewing. Also, my group members and I have created a friendship after working together, which shows that no matter what, creating personal connections is one of the most important things out there!

Responsibilities:

This was a group project (5 people). My responsibilities included:

  • UI Designer
  • Graphic Designer
  • UX Researcher/Designer 

Software:

  • Adobe XD
  • Mural
  • Google Slides

Date accomplished:

Started: January 2022 

Ended: April 2022

The Hummingbird

THE HUMMINGBIRD

Restaurant Website Case Study

The Mission:

For this personal project, I focused on improving and reviewing my knowledge in the UI/UX field on web design. The goal was to help users easily navigate through this new restaurant website while capturing their attention throughout with a captivating interface. I wanted to highlight the most important notes that were mentioned in the user personas and implement those elements onto the site for everyone’s benefit.

Empathy Map

User Personas

Challenges Faced:

  • I had to create my wireframes through Figma, which was a challenge for me since I’ve never used it before. Prior to that, I used Adobe XD quite a bit.
  • “Which colour palette should I use for my branding that can make this appealing to look at and not strain people’s eyes?”
  • “I’m not that used to the Laws of UX just yet, but I need to keep it in mind when creating this site. “
  • Considering I have never used Figma before, I had to quickly learn where the elements were. Though it does have very similar components to Adobe XD, there are definitely some differences to it.
  • Trying to navigate through Figma’s interface was a hindrance to my workflow as I get confused about where the components were located and how they worked on this specific software.
  • “I was planning on putting this menu bar here. But I have no idea how to do it on Figma. I should find an alternative solution.”
  • I had to research that the prototyping area in Figma did not have a responsiveness feature to it.

Low-Fidelity Wireframes

Medium-Fidelity Wireframes

Outcome:

Throughout my journey in creating this design, I have managed to put together the website wireframes and prototype well enough to what I imagined it to be. I have settled for a slick and minimal design to not confuse the user and get them to easily navigate around the website. I’ve also decided to change the sticky side menu bar that was originally in the medium-fidelity wireframe into a top sticky instead since I had trouble figuring out how to make it on Figma. And, it did create more white space for the menu, allowing more breathing room for the elements.

Overall, I felt like I did a great job since this was my first time using Figma. Though I may still be biased with my software choices, I should keep exploring what Figma has to offer!

High-Fidelity Wireframes and Prototype

> To access the prototype, please click here.

Responsibilities:

This was a solo project. Responsibilities included:

  • UI Design
  • UX Design/Research
  • Graphic Design 

Software:

  • Figma
  • Adobe Illustrator
  • Adobe Photoshop

Date Accomplished:

Started: March 1, 2022

Ended: March 28, 2022

Exert

EXERT

Fitness App Case Study

The Mission:

This was a personal project to further enhance my UI and UX skills. The goal was to learn how to incorporate the needs of a few people, then narrow down the ones that could be beneficial to a whole group of individuals that would use the application. I also chose to do a mobile-centered interface because we rarely had the chance to do so in our classes. We were more focused on web design, not software/app design. And since UI tackles not just web design, this gives me a window of opportunity to learn and design an interface on a technology that the majority of the population uses. 

Empathy Map

User Personas

Challenges Faced:

  • I’m not too knowledgeable with app interfaces which made it difficult to think of what elements go on which pages.
  • Brainstorming notes on empathy maps was a challenge since I had no real data to pull from. I had to rely on what some people have told me in previous years and research.
  • I didn’t know which phone size to use; not sure if that mattered as much.
  •  “Which fonts and colours will look the best and will send out the tone of voice I’m trying to convey?” (Tone of voice: Strong, Encouraging, Friendly)
  •  “Which elements would be better to have on this landing page?/Which elements would be more beneficial for the user?”
  • “Where should these elements go? Top or bottom corner?”

Low-Fidelity Wireframes

Medium Fidelity Wireframes

Outcome:

After drafting multiple wireframes and debating with various choices, I was able to create and put together a finalized design. I’ve went with a minimalistic design as the attention should be on the functionality of the app. I have included elements that may be helpful when it comes to someone’s fitness journey and overall physical health. I also included a social aspect: sharing their progress on their social media and the top exercises done that week. This may entice the person to be more motivated if others were involved in their journey. There are also trophies to be earned, which may be beneficial to those who are competitive and gets motivated through achievements. 

Though it may not be perfect or the best, I am still proud of my progress. 

High-Fidelity Wireframes & Prototype

> To access the prototype, please click here.

Responsibilities:

This is a solo project. Responsibilities included: 

  • UI Design
  • UX Research/Design
  • Graphic Design

Softwares:

  • Adobe XD
  • Adobe Illustrator

Date accomplished:

Started: February 1, 2022

Ended: February 28, 2022

ReadyTech

READYTECH

Electronic Shop Website Project

The Mission:

This was a part of our final project in my second semester. For this portion, we had to create wireframes and mockups before tackling on coding the actual website itself. We were given the logo and its branding standards. However, we were then left to create everything else-from the website layout to the website content such as product photography and product descriptions.

My goal was to create a website that had a similar feel and look as other tech sites out there. I wanted the visitor to instantly know that they are in a tech website just from how I laid things out. The website should also be easy to navigate around, have clear CTA (call-to-action) buttons, and have majority of the elements that is needed for a great user experience.

Low-Fidelity Wireframes

Challenges Faced:

  • I had troubles displaying the feeling I wanted to convey. I looked at various tech websites-such as Best Buy, Visions Canada, The Source, Canadian Tire-to get a sense of what similarities they had. I needed to know which components were most prominent in all of those websites and how similar they laid some of the elements out.
  • Along with the logo, the colour scheme was already pre-done and given to us. With that, I had to plan out where each colour would suit best since I’m unable to change them.
  • At the time, I still had a small knowledge in coding. So, coding the website will be difficult and I had to keep in mind responsiveness too. 
  • I also wanted to implement some features that had not been taught to us. So, I had to think of how to lay my website out with the abilities that I had and then carefully apply the ones that I taught myself.

Medium-Fidelity Wireframes

Outcome:

There were steps to be taken before we moved forward each time. Luckily, I was approved every time. With the approval, I was able to move forward to our last step and actually code it as an actual website. Though I do not have the website anymore (the server we used was the school server), I still have the prototypes. I did made some small adjustments that I made when I coded it but the overall premise and understanding is still there. 

High-Fidelity Wireframes & Prototype

> To view the desktop prototype, click here
> For the mobile prototype, visit the link here.

Responsibilities:

This was a solo project. All work was produced by me except for the logo and colour palette. Responsibilities included: 

  • UI Design
  • Graphic Design
  • Product Photography
  • Web Design & Developer

Softwares:

  • Adobe XD
  • Adobe Illustrator
  • Adobe Photoshop
  • Visual Studio Code
  • ShiftEdit

Date accomplished:

Started: February 5, 2021

Ended: April 23, 2021