top of page

Slack Redesign

Innovatemap

This project was focused on enabling more opportunities for community building among resident assistants and residents in college. Our team focused on increasing engagement and participation in residential life both in-person and digitally. We focused on speaking with resident assistants at Purdue and conducting competitive research on what other colleges do to increase engagement.

Portfolio Designs (1)_edited.png
Project Overview

Key details, users, deliverables, and, project planning.

What is Innovatemap?

InnovateMap is a design consultancy that specializes in user & market research, strategy, product management, and much more. Their focus is to help build companies that people love through shaping technology ideas. Not only does Innovatemap design for corporations, they also design for start-ups and even scale-ups. They focus their time on designing products that will be adopted, usable, and problem-solving. 

Deliverables

  1. Mid-fidelity prototype - of Slack features and onboarding experience

  2. Design Documentation + Research Report - Showing our process (goals, research, and ideation)

Type of Project

Platform redesign. This project, considering that it focused on communication, had an emphasis on redesigning a current platform to 

Tools & Research Techniques

  • Figma

  • Whimsical

  • Heuristic Evaluation

  • Competitive Analysis

  • Concept Testing

  • Usability Testing

*Note: This project was for a sponsored group project (FALL 2022). My personal contributions are stated below.

Project Overview
Setting the Scene
Setting the Scene

Why does Curology need an app? Defining the pain points...

Screenshot 2023-12-23 at 1.39.52 PM.png

This is Kiki...

  1. She has been a Curology subscriber for 3 months now and has loved the results of her free trial! 

  2. As she has been managing her subscription for her next order, she has struggled to navigate the mobile website experience.

Her Pain Points

  1. She wants quick access to her Curology Account.

  2. She struggles to navigate through the web experience.

  3. Would like to track her progress + sense of accomplishment.

Her current experience:

Screenshot 2023-12-27 at 11.08.14 AM.png
Screenshot 2023-12-27 at 11.08.34 AM.png
Screenshot 2023-12-27 at 11.09.01 AM.png
The Redesign
Final Design

How have I addressed these paint points in the app design. 

The changes made:

  1. Profile to Navigation Bar - the profile was only accessible through the homepage in the early iteration. 

  2. Information Hierarchy on Profile - ensuring that the user can find their routine and subscription details easier.

  3. Routine can be found easily - now accessible through homepage and profile settings.

  4. Direct messaging with dermatologist - ability to message directly and access resources.

  5. Creative component - to track their subscription, users get to enjoy a free gift/prize at certain milestones.

My Process
My Process

Through 3 milestones, how I got to the final design.

Understanding the current experience + exploring similar experiences

During this milestone, I conducted a heuristic evaluation on the current web experience, a competitive analysis on other skincare apps, and sketching based on research insights. ​

Evaluate the current experience + begin customization

Based on the research conducted, I sketched the current mobile app experience, created lo-fi/mid-fi mockups on Whimsical of the current experience for testing, and conducted concept testing to identify the pain points of the experience + iterations.

Research on creative component + Finalize prototypes

With the mockups tested, I researched + chose a creative component to add to the app experience, transitioned from mid-fi to hi-fi prototypes by using the Curology design system, and conducted usability testing and applied iterations

Milestone One
Milestone One

Understanding the current experience + exploring similar experiences

Goal for this milestone

During this milestone, I wanted to understand the space through a designer viewer rather than as a user. As an avid user of Curology, I have explored the website and have found inconsistencies and wanted to look into these further. 

Goal

Identify inconsistencies, navigation issues, and/or features that need to be highlighted more.

Approach

In order to identify these inconsistencies, I decided to conduct a heuristic evaluation while a new user navigates through the website. Using Nielsen’s Ten Heuristics, I mapped out a cognitive walkthrough that addressed each section of the website and evaluated the user’s experience. 

  1. Setting up the free trial

    1. Creating an Account

    2. Taking the survey about current skin state

    3. Purchasing free trial

  2. Managing Subscription

    1. Change what comes in the box

    2. Change payment method 

    3. Canceling subscription

  3. Community Aspect

    1. Viewing other users’ journey

    2. Create Postcard

  4. Tracking personal progress

    1. Viewing past progress

    2. Updating your current progress

  5. Contacting dermatology provider

    1. Messages from provider

    2. User to dermatology provider

  6. Using resources provided by Curology

    1. Research about diet

    2. Research about skin & routine

Sneak Peak into the Heuristic Evaluation:

 

 

Link to Full Protocol

Takeways

  1. Recognition rather than recall - certain buttons and features were hidden on pages that did not correlate with their purpose.

  2. Consistency & Standards - the message thread was not a way to communicate with the dermatologist provider rather it was just a treatment plan submitted by the provider.

 

Recommendations

  1. Change icons to match their intended purpose

  2. Either redesign the message thread to allow for the user to contact their provider or design it in a way that does not misdirect the user’s intuition. 

Screenshot 2023-12-27 at 12.11.22 PM.png
Narrowing My Scope
Narrowing the Scope

During my research in Milestone One, I found that there were too many inconsistencies in both the “before creating an account” and “after creating an account”. These two different views were just as complex as the other, which led me to reevaluating. 

Two options:

  1. Focusing on before creating an account

  2. Focusing on "account view"

Considering that my focus was originally on enhancing engagement within the app and including a creative component, I decided to focus on the account view. The “before creating an account” focus would require me to give the user incentive to create an account and that was not my original intention for this app. 

This would allow me to:

  1. Personalize the experience

  2. Enhance engagement

  3. Focus on the current subscribers

I also decided to move away from the points system because it did not fit with the subscription service that Curology provides. Due to this idea falling through, I decided to focus on the current experience still and to research the creative component in milestone three once the overall app design was established. 

 

With my focus on after creating an account, I moved into my next milestone to evaluate that experience and make iterations based on testing.

Milestone Two
Milestone Two

Evaluate the current experience + begin customization.

Goal for this milestone

In this milestone I decided to focus on evaluating the current web experience. I aimed to design screens that replicated the current mobile web experience in order to evaluate the experience. The takeaways from the test would inform the final design to ensure a seamless experience. 

Goal

Adapting the mobile web experience to an app experience.

Approach

I started by sketching out the mobile web experience and adding a few features based on the desktop web experience.

 

 

With these sketches, I moved into Whimsical to adapt them to mid-fidelity in order to test with them.. 

Screenshot 2024-01-06 at 1.04.32 PM.png
Screenshot 2024-01-06 at 1.04.21 PM.png
Milestone Three
Milestone Three

Research on creative component + Finalize prototypes.

Goal for this milestone

In this milestone, my focus was on personalizing the mobile app to enhance the user’s engagement.

Goal

To choose a gamification component that is recognizable and engaging to the user, but still benefits the company. 

Approach

I conducted research by exploring which gamification components are most widely used through Medium Blogs. I wanted to ensure that the component I was going to choose would not distract the users of the true purpose of the app, which is to explore their personalized skincare. 

 

“One of the best ways to avoid this scenario is to focus on how gamification can support your users as they move through your product, rather than merely providing them with unnecessary distractions for the sake of entertainment” 

- Sofia Quintero (Medium Blogs)

Takeaways

Throughout my research, I found a lot of ideas that all circled back to a points system. Looking back at my competitive analysis, I remember finding that many cosmetic apps use the points system because they have multiple products. A customer is able to gain points through purchasing on their own time. I found that this would not work for Curology because it is subscription based and the points would only be distributed every two months. Then I found:

 

“Achievements are rewards that are given to users when they have completed a certain task or reached a specific level. Achievements can be used to encourage users to continue engaging with the platform and to strive to achieve more”. 

- DesignGuru (Medium Blogs)


Considering that Curology could have something called “milestones” for the number of boxes (or how long the user has been using the subscription), I wanted to connect rewards along with them. I was able to ideate on the milestone idea along with a wheel that could be spun once the user reached one of the milestones. There would be different kinds of “prizes” or “rewards” that the user could win.

Mid-fi mockup of milestones feature

 

With each component of the app design in mid-fidelity, I moved into creating a design system that was inspired by the current Curology design system. 

Screenshot 2024-01-06 at 1.41.34 PM.png
Next Steps
Next Steps

Considering the time constraint and my abilities with Figma, there are a few iterations that I would like to make in the future. These are as shown below:

01

Add more interactivity

The routine page could have more interactivity. Thoughts: a swipe feature, animation, etc.

Designing the other view

02

Designing the "before having an account" view.

Implementing more features

03

Allowing the user to read more about skincare on the app instead of navigating to the website. 

Reflecting on Project
Reflection

What would I have done differently? What am I proud of?

This semester was one of the most defining times for my understanding of UX Design and also how I approach design. Not only was I able to focus on things that I found most interesting, but I also got to test my knowledge on design. I learned so much during the process and my peers and professor were very supportive. While my initial project plan was changed multiple times throughout the semester, I found that this was more beneficial than it was destructive. I was able to identify my design strategies and how I perform under my own supervision. One of the most defining parts of this project was when I had a pivot point after my first milestone. I was forced to narrow my scope because there were too many things I could address in my project but I couldn’t because of time and my design abilities. Moving away from designing both the “before creating an account” and “after creating an account” and just focusing on the “after”, allowed me to really focus on the necessary parts. I knew that if I tried to take on both of them, I wouldn’t be able to address every issue. The design wouldn’t have been evaluated enough and I would’ve wanted to strive for more. Overall, I am really proud of the work I did this semester and cannot wait to do more personal projects in the future. 

bottom of page