Close
A platform designer living in Denver, Colorado.
This is some of my old work. For more recent work, check out celinefucci.com
Curious about the details? Click to enlarge.
Project Background
When it comes to the sustainable movement our collective habits can shift demands, making our voices heard, and building the future we want.
That’s why Sustaio Founder and CEO Olivia Pedersen, along with CTO Leif Schjeide, created Sustaio — an application that helps people transition their habits to live a sustainable lifestyle. Sustaio guides its users from information to understanding to action, helping them connect the dots of their impacts and track their metrics all while delivering a personalized, self-empowering experience.
Success for our clients meant collaborating with a team of three UI designers in order to launch a minimum viable product where the end-user experience of Sustaio would be well-branded, refined, and impactful.
A glimpse into the previous designs given to us by the clients
"How can we find a stronger hierarchy of how to use all these colors and find consistency so it’s not this loud, noisy brand? It’s more like very colorful and empowering while still being clean, professional, and not overwhelming."
Olivia Pedersen — Sustaio CEO
Kickoff
Based on what Olivia said, the overarching challenge for the Sustaio app was figuring out how we could entice individuals to re-examine their daily habits in order to live a sustainable lifestyle.
Our first step in approaching this challenge was research. We began by asking ourselves:
What does the current sustainability market landscape look like?
To answer this question, we leveraged two research methods to help us gather strategic insights pertaining to the industry, marketplace, and target audience of a sustainability-driven application.
Evaluating the domain involved taking a deep dive into what sustainability is and what the current state of the digital marketplace looks like. Through this, we identified industry and business trends that would guide Sustaio's product development.
Many apps are gamifying sustainability through friendly competition and lucrative reward systems. There are various apps out there to help people live more sustainably, but most of them glitch out or simply don’t offer a good user experience, regardless of their good intention.
On the other hand, analyzing the market provided a way for us to assess the strengths and weaknesses of current and potential competitors within the sustainability sector. Our analysis was done in order to examine products from a visual design standpoint, ultimately allowing us to gain ideas and inspiration for our designs.
We were able to extract insights from direct competitors and indirect competitors as well as analyze two apps that our clients were inspired by.
From these products, we prioritized understanding certain facets such as:
Social competition incentivizes users to earn rewards and brings more value to the user experience
Find a happy medium between the way Headspace presents content (organized and strongly-branded) and the simplicity of Down Dog (photo-heavy, no childish illustrations)
Change doesn't happen overnight — Slowly ease users into making more eco-friendly choices as they progress in the app
Explorations
After gaining a foundational knowledge of the market landscape, we started exploring and experimenting with Sustaio’s existing brand identity. To understand where our clients' expectations were, we wanted to baseline things with a Challenging Assumptions workshop involving the clients.
This workshop yielded an underlying knowledge of client mental models surrounding key screens of the Sustaio interface.
The Challenging Assumptions workshop allowed us to confidently transition into our style tiles, where we explored different themes for the Sustaio app.
In order to validate our style tiles with users, we tested them against a series of desirability adjectives to determine if the overall theme we were intending to convey was coming across.
The UI should be self-explanatory, intuitive, and naturally lead users to learn more about functions and features.
When you just download [an app] and it has pop-ups to show you what to do and where to go, that's always helpful.
Emily H. — End User
Users should know where they are in the app at all times, what each button leads to, and be introduced to unfamiliar industry terms.
[An app] can't have so many features where it's overwhelming. It's better to do 1-2 things well.
Tammie W. — End User
After feedback from both clients and users, I identified a couple of my style tile ideas just weren’t worth the time. This sparked a rather significant design pivot for my team members and I. Looking back at user research and keeping the project's needs in mind, we each created a converged style tile by building onto existing options, as well as exploring alternative approaches, to see if we could determine a design direction for Sustaio.
In brainstorming sessions with the client, we focused on some different ways to rebrand sustainability and decided that maybe trying a dark theme would be useful.
Incorporating the dark theme was a trade-off but we decided that it would allow Sustaio to keep their competitive differentiation in the market.
After solidifying our design directions, my team and I created four design principles. These principles, crafted with the insights we gathered in our initial research, acted as north stars for our first round of high fidelity mockups.
Language, although it may seem minor, can have a huge impact on the overall app experience. Use voice to excite, add personality through humor, and resonate with users.
Be bold — Spark curiosity and allow people to view sustainability through a new lens.
Slowly introduce features so that people have time to get acclimated to the product and progressively disclose information to limit cognitive load.
Don't reinvent the wheel — Sustaio should be easy-to-understand and take advantage of the knowledge users have from other apps.
Prior to starting my designs, I prioritized organization before execution by creating a component library.
Take advantage of storytelling — Users should be able to resonate with and envision themselves through images across the interface.
Few people have long-term memory. Incorporating charts and other graphics allows users to see a visual output of what the app is tracking.
Encourage users to improve their habits and scores with mini CTA’s throughout the app.
Sustaio has to be inviting enough to want users to continue to go down the funnel. Experiment with brand colors more to make the interface feel cool and not overly formal.
Refinements
The user testing key findings helped lay the foundation for iterations. One thing in particular that became abundantly clear after testing was that redesigning the dashboard needed to take precedence over everything else.
"The dashboard should have snapshots or previews of content instead of just links to various pages."
Leif Schjeide — Sustaio CTO
These two artifacts became the basis for my dashboard redesign. One of my teammates took a stab at designing the dashboard early on. He ended up scrapping his design but our clients kept referring back to the card carousels, which is why it became a jumping off point for me.
At this point in the design process, we had to take a step back. As we started to build out more screens, we were blocked by the flows of the application. They simply weren't clear. Additionally, the wireframes we received were not satisfactory to base our designs on. In order to plow forward and try to understand the functionality of the application, I took it upon myself to create user flows and wireframes.
final Solution
Our clients, Olivia and Leif, were very happy with the assets we produced. In a short four-week timeframe, we created a consistent look for the Sustaio mobile application and achieved a strong hierarchy of colors. Additionally, we strengthened Sustaio's usability case by creating user flows and wireframes.
After a live crowdfunding campaign, V1 of Sustaio made its way to the App Store.
Through testing, we discovered that including a bottom nav bar puts valuable pages of the interface within reach. However, this UI element will need more testing as the Sustaio app gets built out.
A majority of users expressed interest in an expanded onboarding process that would allow them to tailor Sustaio to their needs. Ultimately, onboarding must be designed in a way that adds value to the user's understanding of the product.
UI elements should be interactive in order to create a fun learning environment for users. This could be through quizzes, interactive learning modules, and other dynamic experiences. Future designers should explore how they can best deliver educational content in different forms to reduce cognitive load.
As a final step, I created a design system that would enable Sustaio to further the interface after handoff.
Reflection
UI design is not just about designing screens. We failed to fill in the missing information and got caught up in the original scope of the project — providing enhancements and improvements on the visual design of the Sustaio user interface.
It appeared as if everything was well-laid-out for us, especially due to Sustaio's concrete brand identity. In actuality, there were a lot of missing pieces, two of those being the user flows and the wireframes we received. These things should have come first before diving into the visual design and forced me to make a pivot point at a time where I didn’t necessarily have the bandwidth to do so. This is ultimately where I would have adjusted the scope of the project.
Engaging clients in the design process creates moments of collaboration, alignment, and visibility. Throughout this project, we sacrificed moments of communication for moments of work. In hindsight, we should have been open and honest about our concerns, communicating with our clients more often outside of weekly sprint presentations.
Endorsements
"Celine, glad I got to work with you. Secretly I wanted to work with you because I really liked your designs. I can see that you really are process driven, you like to flush things out first, and you're organized — three things I really learned from you. Thanks for always being a helping hand when I had questions and being someone who approaches tasks strategically."
"Celine! So so glad we were on the same team. My favorite thing about you as a designer is your integrity and determination. I love that you value finding the right solutions rather than just any solution. It can be hard when everyone is tired or short on time, but you always choose the path with more integrity. Thanks for keeping my morale high during this phase, for inspiring me to go the extra mile, and for getting me to think of cookies and cream ice cream from time to time."
Project Background
Small steps can deliver powerful changes over time.
What if we could put this into practice to promote change in our communities?
Recent studies suggest that America is currently experiencing its lowest rate of volunteerism in the last two decades. Despite this fact, most people care about making a difference and giving back to their communities, but they either don’t have the time or find it to be a daunting commitment.
The primary target audience for this project was young, busy professionals of the ages 20-35 who have the lowest rates of volunteerism and need extra motivation to get involved.
The project brief at hand introduced us to two personas — Jessica Lane and Sarah Boulders. Understanding their needs and pain points allowed us to succinctly frame the project challenge.
How might we create a frictionless app experience for users that re-engages them in the volunteering space, maximizes their time, and evokes positive emotions towards community involvement?
Kickoff
Micro-volunteering is when individuals complete small tasks, a few minutes to a few hours in duration, that are part of a larger project. It was a key concept that laid the foundation for our product because we needed to create an experience that maximized the time of our users.
In order to put the project into context, we began with domain research.
We needed to determine why low rates of volunteerism exist.
The competitive analysis was a beneficial next step because it helped us assess what the current volunteering market landscape looked like while identifying trending insights and patterns that could possibly inform our visual design strategy.
We specifically paid attention to how visual elements are being used to impact the experience, the feelings and impressions that they established, and what was working/not working.
Explorations
Keeping in mind research insights, I began the ideation process. While creating moodboards and style tiles, I focused on identifying what colors and elements could be used to engage users on the topic of volunteering.
.jpg)
.jpg)
.jpg)
#1 Gain insight on what users think about both volunteering and micro-volunteering
#2 Evaluate preferences on the design, layout, and features of our style tiles
#3 Strategize to decide which design direction each team member would be taking
Round 1
had a pleasant experience
prefer to volunteer in a group
never used a volunteering app
Apps users kept referring back to, citing their simplistic, modern, and straightforward approach. This was an indication for my team to look at these apps and let them serve as a basis for our designs.
Testing our style tiles with users resulted in subjectivity. Instead of trying to decipher which of the nine style tiles users liked best, we could have shifted our approach by asking users to thoroughly explain their statements.
Although testing produced some beneficial takeaways, I decided to look back at research to determine a design direction. Something that made Deed stand out from the other platforms was the use of bright and inviting colors. If I wanted to achieve the project goal of re-engaging users in the volunteering space, bright and expressive colors was the way to go.
After interviewing multiple users and getting feedback as a team, we determined that the following ideas and principles would be essential to our design language. They focus on visual design as well as our overall design process.
Stick to a smart organization system. Information should be structured, straight-forward, and easy-to-find.
Design with a user-centered mindset. Our designs should do what they say, exhibit openness, and shouldn't contain secretive or unethical patterns.
As we’re designing, it’s inevitable that mistakes will occur. Keep on improving and moving forward, iterate as often as possible, be open to change, and take feedback as constructively as possible.
Align with user needs and preferences by implementing a contemporary aesthetic that includes recognizable, polished design patterns.
Our volunteering platform should allow users to feel accomplished and provide them with ample opportunities to make an impact.
Volunteering is a social activity and it's critical to allow users to invite friends or connect their existing social media platforms to the app.
Before diving into visual design, we evaluated the wireframes and usability test report from the creative brief. Understanding prior pain points users encountered allowed us to make informed design decisions when building out our screens.
The original wireframes took a gamification approach but I made a pivot from them because I thought this wouldn’t appeal to many users.
Why?
#1 There's a time commitment associated with games. This would hinder the target audience (young, busy professionals) from using the app.
#2 While interviewing users, no one mentioned games when talking about apps they use on a daily basis.
Round 2
Small things such as including the source of the organization in the volunteer opportunities screen increased trust among users.
Users said the vibrant confirmation screen that popped up after completing a task resulted in excitement to continue using the app.
Referring to the instructions screen, users mentioned having clear, short, digestible nuggets of information helps with readability.
"I really like the Apple Maps UI and it's familiar to a lot of people. What if you could take some hints from it for your map screen?"
Katie S. — End User
Refinements
User testing helped lay the foundation for iterations and additions. One thing in particular that I needed to do was design an onboarding process.
Why?
We discovered in our first round of testing that several users had no prior knowledge of micro-volunteering. Since this was the main concept of the app, we needed to successfully introduce it in a series of onboarding screens.
It’s the little things that turn a good digital product into a great one, which is why I created micro-interactions for Voluntopia. They added visual enjoyment and enhanced the user experience.
Our last round of user interviews focused on testing the usability of our solutions. To get the most out of these interviews, we created a set of scenarios and tasks that outlined key flows we asked users to go through.
Bias/Constraint
There was a bias we experienced during testing. Since each of the three prototype had a similar flow, the prototype that was tested first was at a disadvantage. In other words, by the time users got to the second and third prototypes, they were more comfortable with the flow. We tried our best to combat this by having each team member switch up the order in which they tested the prototypes.
Round 3
Allow users to share that they completed a micro-volunteering task to their social media platform of choice.
Give users options. For example, allow them to easily switch between grid/list view on the home screen and show activity instructions in various formats (text, video, GIF).
The onboarding process should be concise but also successfully introduce users to the app and its features.
People need incentives to use the app. A robust reward system would increase engagement and retention.
Final Solution
The project impacted the overall volunteering landscape because it introduced a solution into a marketplace with a lot of potential. My team collected some helpful data to see how users would integrate Voluntopia into their daily schedules.
Results
"This app is catered towards a particular audience. If I was dedicated to helping the world change and knew that I was truly making a difference, I would definitely find time for this app, but some people just don't care."
"I could carve out a couple of minutes every day for this app, especially if I'm passing by places (daily commute) where there's outstanding tasks."
"I like how the app offers small tasks to complete so that I don't have to commit too much of my time. It feels good to help others within a short time."
As a final step, I created a design system for Voluntopia. It provides context to guide current and future design decisions while serving as a foundation for later iterations.
Reflection
Every design decision and outcome should be grounded in research and reasoning. Even though research can be time-consuming, it’s vital to take the time to do it because it will make design decisions easier.
Communication is underrated and it's important to seek alignment on all fronts with team members.
This may seem simple but just like communication, critical thinking is overlooked. Throughout this project, I learned how to frame deliverables with clear context and also thought about the "why" behind several decisions.
I learned more about accessibility and took steps towards designing for it. Sure, I still have a long way to go, but I'm glad I didn't completely disregard it. It's important to be mindful of accessibility and in the future, I would like to expand my knowledge on it.
Project Background
Today’s digital fitness market is saturated with applications. Whether you’re interested in nutrition, fitness, or total wellness, there are a plethora of tools for users to explore.
However, one key feature is lacking in most of these apps — customization, specifically for a wide range of health conditions such as asthma, diabetes, hypertension, etc. Users aren’t able to tailor applications to their needs. Because of this, fitness becomes an afterthought and simply something people only do sometimes, or if at all.
The creative brief I was handed included an example persona for Erin.
Erin is a 23-year-old single millennial with a demanding and stressful job managing kids as an elementary school teacher. She's trying to get in great physical shape while dealing with an ongoing health condition.
How might we create a customized wellness solution that addresses Erin’s health condition while holding her accountable to a routine?
Kickoff
My first step in approaching the project challenge was research. I began by asking myself:
What does the current health and fitness market landscape look like?
In order to answer this question, I kept in mind the project goals. Since I would be creating a holistic brand concept from scratch, I determined that it would be vital to conduct research from a branding standpoint as well as a user experience standpoint. To do this, the primary research method I leveraged was a competitive analysis.
It was important that I outlined the strengths and weaknesses of competitor products because this would help me identify any gaps in the marketplace and design a product that aligned with Erin's core needs.
Explorations
Informed by my visual research, I started drafting up a brand DNA by creating divergent logos, moodboards, and style tiles. I had to consider finding an opportunity where my brand could exist among the saturated digital fitness marketplace.
What could be the key defining characteristics of my brand?
A couple of competitor design choices went on to influence my product:
When deciding on a brand direction, the research insight that heavily influenced my brand direction was:
Most competitors embraced a minimal approach with muted colors.
This insight presented an opportunity for me to diversify both my color palette and my brand. The concept that included a wide range of colors was the dark theme with the vibrant neon colors. I paired this concept with the logo sketches based on the 808 Drum, arriving at an exciting concept that connected the dots between dance music and fitness.
This exploration aligned with Erin's needs because it would evoke excitement and vitality, something Erin clearly needed due to her high stress levels and inability to maintain a consistent workout routine. Additionally, the logo tagline “Find Your Rhythm” implies that with ROOM808, Erin can find her niche when it comes to fitness.
Design Execution Prep
Evaluating the wireframes from the UX team was a critical part of my design process and was key in the execution of my high fidelity mockups.
Why?
Jumping straight into designing screens is risky. It was my responsibility to ensure the wireframes were clear, organized and easily functional for the user. Furthermore, discovering any issues upfront with usability or functionality as well as paying attention to the layout and the approach to UI elements would save time and reduce confusion down the line.
Creating a user flow diagram helped me detail the steps a user must take in order to complete a goal — In this case, logging food. As I learned from competitor products, this can often be a complex task. By determining this path, I was able to see possible turns through the route and optimize the user experience.
These are two divergent concepts I explored. I was experimenting with different colors as well as different ways of laying out UI elements. At this point in the design process, I struggled to translate the wireframes that the UX team had created. As a UI designer, it was difficult to assess how much freedom I had in adjusting the layout and structure of the wireframes. I ended up taking some risks regarding how content was displayed, which were influenced by research and user feedback.
I arrived at these designs after critiques with my classmates. One thing I struggled with was the dark theme. UI elements such as cards originally had an off-white fill, which was jarring against the dark background. In order to better align with the dark theme, I ended up changing these fills to darker shades.
I created my first prototype in Framer. Although this was a fun experiment, I didn't proceed with this direction because Framer had a steep learning curve and distorted my assets upon import. I also encountered problems sharing and viewing the prototype, which ultimately caused it to not function properly.
Due to these problems, I had to re-do my prototype in Adobe XD, which ended up delaying the creation of additional high-fidelity mockups. All in all, I learned that sometimes it's better to stick to what I know. I always get excited about shiny, new tools, but they come with drawbacks and take time to learn.
To evaluate the desirability and usability of the ROOM808 app, I relied on two individuals who fell within the target audience. This allowed me to gather qualitative data and better empathize with users.
Effort directly correlates with the familiarity of interface patterns. Users mentioned they prefer to utilize their knowledge from other apps rather than learning completely new patterns.
Users associated certain colors with certain actions. Colors helped them differentiate between elements and increased recognizability.
Discussions with users revealed that they struggled to identify static vs. dynamic elements because buttons and cards in the app were outlined instead of filled in. Therefore, they didn't appear interactive or clickable.
Refinements
User testing revealed that some small tweaks were needed to enhance comfort and familiarity while navigating the app.
"I would love it if there was a way for me to easily change the flavor of yogurt in the overlay."
Katie S. — End User
"It's not really apparent which elements and buttons are clickable. Although I can navigate around the interface with ease, some of the buttons weren't consistent and just didn't look dynamic."
Kassandra H. — End User
On the Progress screen, the "Workout" section was overhauled to better meet the needs of Erin. The new screen states supported health conditions upfront as well as images of exercises to expect.
Meanwhile, a key thing that changed on the Nutrition screen was the relocation of the "Water" section to the top. One user mentioned water should be at the top because it's the metric she tends to fill out most frequently.
Originally, the "Scan Barcode" section was taking up a lot of real estate. A key refinement I made here was relocating the barcode to the top right-hand corner. This allowed the food cards to sit above the fold on the interface, eliminating the need for users to scroll.
I completely overhauled the slide-out hamburger menu after testing it with users. With the previous design, it wasn't clear which page was active and the addition of the icons provided more context.
Creating the workout screen was based on one key concept from competitive research — The use of long, continuous videos to display exercises and classes. These proved hard to follow, which is why I introduced a step-by-step approach.
The other changes I made to the workout screen took into account user feedback:
Final Solution
The ROOM808 marketing site was an opportunity for me to tell a story about how my solution solves a real-world problem for users.
As a final step, I created a style guide that clearly defined the key elements of ROOM808 so that future designers can create the same consistent style and aesthetic.
ROOM808 was special to me and I'd love to expand on it in the future. My first step would be to elaborate on these micro-interaction sketches. I would like to digitize them because subtle interactions are good feedback indicators and inject personality into products.
Reflection
This project gave me a glimpse into what it’s like to design a holistic brand from the ground up. Because of this, I improved on my ideation skills by generating various brand concepts from the start. Designing a logo was a challenge for me, but acquiring validation from other designers along the way allowed me to approach this task with a continuous iteration mindset.
Moving forward, this project introduced me to grids and modular type scales — Two key techniques that I continued to improve on throughout my time at the Flatiron School. Learning about these techniques shifted my design process by making it more organized and systematized. This would also lead me to start exploring design systems in detail.
Lastly, this project introduced me to effective critique methods. I learned how to:
I find it so fascinating to see the impact design has made and the different ways in which it has been leveraged for the greater good. Along with my interest in mobile apps, the ability to make an impact on people's lives became my why for pursuing a career in design.
.png)
.png)
