COMPOST TRACKER AND LOCATION FINDER APP

COMPOST TRACKER AND LOCATION FINDER APP

Level:

General Assembly Hackathon

Timeline:

Four days

Team:

7 members

Role:

User Experience Designer

Software:

Adobe XD, Figma, Miro, Google Suite

Tools:

Cardsorting, roduction, Project Planning, User Experience, User Interface, User Interviews, Wireframing

Demo:

Prototype:

The Challenge:
Create a product that resolves a sustainable living issue using open data resources. 

Solution:
Our first step was identifying what open data resources were available. We focused on New York City which has one of the most robust set of open-data available compared to other locations and metropolitan areas within the US. 

Results:
We built a mobile responsive solution that allows NYC residents to locate convenient composting sites, track their own composting activity, view composting activity of local businesses and invite businesses to become active on the app in reporting their compost activity. 

User Interviews

xxx

key insights

  • xxx

the probleM

xxx

PERSONAS

User flow

xxx

How Might We

xxx

sketches and wireflow

xxx

sketches

xxx

Wireframes

xxx

Client Presentation

View our full client presentation below:

Mobile responsive prototype

xxx

Next steps

xxx:

  • xxx – xxx

  • xxx – xxx

LATEST POSTS

DRUGGED DRIVING

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

NORTH CAROLINA STATE UNIVERSITY SEASON TICKETS

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

Impetus epicurei cu eum, et illud officiis splendide ius, has virtute volumus adolescens ea. 

#tag 

QUESTION-AND-ANSWER WEBSITE

QUESTION-AND-ANSWER WEBSITE

Level:

Client project; student training

Timeline:

Three weeks

Team:

4 members

Role:

User Experience Designer, Information Architect

Software:

Figma, Miro, Google Suite, UX Pressia, Gantt, UX Tweak

Tools:

Cardsorting, Data Visualization, Information Architecture, Market Research, Production, Project Planning, User Experience, User Interface, User Interviews, User Research, Wireframing

Prototypes:

Live site:

The Challenge:
The client needs to improve their UX strategy and test their activation funnel for a website build as a freemium business model. They needed to know how their platform can be designed to better deliver value, meeting the pain points of their target users. They wanted new features that would increase user engagement to incorporate into the next iteration of their platform. 

Solution:
The first step was to conduct interviews with users who use competitor platforms. From this, prototyping and usability testing determined an initial information hierarchy that was engaging to projected site users.

Results:
We built a highly engaging and visually appealing mobile responsive website to drive user engagement and value.

User Interviews

We asked seven users about about what their ideal online forum community would look like.

key insights

  • Users want a visually appealing site that is  straightforward, easy to use, and reliable

  • Users see value in responsive customer service  provided by websites

  • Users are more inclined to participate when they  find a community of people with similar interests  being able to search with keywords is important  to users

  • Users like to feel validated when participating in  online forums and communities

  • Users value content that is authentic and based  on their interests

the probleM

Olivia needs to find a trusted online space that provides easy-to-find, immediate, and reliable answers to her web-based questions because she has a limited amount of time to complete her assignments and needs help learning to navigate university websites while studying remotely.

Drew needs a single-sign-on website that allows him to quickly navigate to credible information from transparent sources so that he can easily find answers to work- and home-related questions from a trusted online community.

Peter, a small business owner, needs a website where he can feel comfortable contributing to discussions and creating posts on his own because he wants answers that are personal and specific to his problem.

PERSONAS

User flow

Once we identified the primary persona, Olivia, we proceeded to map out a flow chart of tasks and decisions she would be faced with in using the website.

How Might We

We considered our approach to the important goal of getting users to engage and trust the website and its content.

sketches and wireflow

To further tackle HWM Statement, we utilized a hybrid non-moderated card sorting to map out a site structure that optimized both the unregistered and registered user’s experience. Card sort participants were able to sort menu navigation items unique to ReeVueIt, those found on our competitor sites, and were also able to suggest menu items.

 

Some highlights from the card sort study include that 76.9% of participants placed the Settings menu item within the Utility Menu. We accommodated this with user settings within the ‘Profile’ page. And 84.6% of respondents envisioned the Support menu item also placed within the Utility Menu. We accommodate this with a ‘Contact Us’ page and including some support-related content within the ‘Frequently Asked Questions’ page.

sketches

We explored user interface concepts aimed at prioritizing user engagement and the use of custom notifications, the designation of subject matter expert users, content filters, allowing users to categorize their posts and also designate the post subject type.

Wireframes

In our mid-fidelity wireframe progression, we aimed at reducing options to prevent user cognitive overload while prioritizing elements geared towards expediting user engagement. We also focused on creating visual contrast so that users could readily identify features. Additionally, following a client meeting, we created UI concept for an advanced rating system.

Client Presentation

View our full client presentation below:

Mobile responsive prototype

For the mobile responsive layout, we used 2 approaches. In the column-drop approach the a layout was reduced from 3 columns to a single column. And while the Top Contributor card was displayed as a vertically-stacked list on the desktop version of the design, it was converted into a horizontal scroll on the mobile version.

 

For the sign in screen, we simplified from a pop-over window into its own screen via layout shifting. This approach aligned with our goal to seamlessly transfer the user’s ability to quickly engage from the desktop experience to the mobile responsive experience, and continue to prioritize elements associated with user’s primary goals.

Next steps

Continuing on the goal of creating value by encouraging immediate user engagement, increasing visibility across the web, and creating credible content we recommended the following next steps for getting users excited about ReeVueIt:

 

  • Card expansion functionality – combine chevron and comment icon into one for card expansion functionality.

  • Further development of Menu navigation – provide indication/organization for users to identify pages they are viewing outside of Home Screen.

LATEST POSTS

DRUGGED DRIVING

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

NORTH CAROLINA STATE UNIVERSITY SEASON TICKETS

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

Impetus epicurei cu eum, et illud officiis splendide ius, has virtute volumus adolescens ea. 

#tag 

ECOMMERCE REDESIGN

E-COMMERCE REDESIGN

Level:

Student training

Timeline:

Two weeks

Team:

Solo Project

Role:

User Experience Designer

Software:

Sketch, UX Tweak, InVision Studio, Zoom

Tools:

User Research; Market Research; Information Architecture; Wireframing, Responsive Design; Prototyping, Usability Testing

The Challenge:
With conditions arising due to the global pandemic, a local sporting goods shop can’t service its customer base or reach new potential customers because its website lacks the functionality and organization of an e-commerce site.

Solution:
To remedy this I utilized a number of tools to define user expectations, prioritize goals, and created a more relative information architecture. 

Results:
The process yielded an interface that was easy to understand and use. It also offers features that meet user expectations whether shopping in-person or online. 

Empathize

In the discovery phase I utilized various tools to could help me gain an
understanding of the problem I’m trying to solve. 

Affinity Mapping

The cardsort study synthesis revealed what services and features were desired.

Comparative and Comparative Analysis

As survey was taken of comparable local and national sporting goods stores and the features
they offered to assess how the redesign could compete within the market.

Feature Inventory

Comparative Analysis

DEFINE

User Personas

Two personas for the most ideal users were developed, and the problem defined. 

User Flow

A user flow was created for each persona.

Information Architecture

I reviewed the click streams for top competitors, their website structures and came up with a possible site map for the redesigned site.

Card Sorting

Task Analysis

The Checkout Process

Elements Analysis

Analyzing the Results

IDEATE

Sketches

To kick off the ideation phase I started with hashing out screens for
the new redesign, focusing on a single user flow.

Wireframes

Using the Sketch app I created wireframes as well as mobile device responsive layouts.

From left to right: home page, home page with dropdown menu, category product list, product profile, product cart, transaction confirmation

Home page screen responsive layouts

Prototype

Usability Test Plan

Going into the usability study, a plan was devised to moderate users through a specific user flow.

Live High-Fidelity Prototype

The final prototype was created using InVision Studio and demonstrates the 
clickstream for each usability study. 

Next steps

  • Conduct further usability studies to address viewport margin and device types
  • Test additional user flows
  • Conduct heuristic evaluation

LATEST POSTS

DRUGGED DRIVING

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

NORTH CAROLINA STATE UNIVERSITY SEASON TICKETS

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

Impetus epicurei cu eum, et illud officiis splendide ius, has virtute volumus adolescens ea. 

#tag 

PLANT-WATERING APP

A grayscale mid-fidelity mockup of the final prototype.

PLANT-WATERING APP

with physical connecting sensor

Level:

Student training

Timeline:

Two weeks

Team:

Solo Project

Role:

User Experience Designer

Software:

Sketch

Tools:

User Interviews, Affinity Mapping, User Persona, Problem and HMW Statements, User Flow, Block-level Sketches, Wireflow, Wireframes, Usability Test Plan

The Challenge:
Users have trouble finding the time to water their plants in a timely manner that prevents plants from dying. 

Solution:
To accomplish this I conducted three user interviews with individuals passionate about plants. I then utilized affinity mapping to identify the user’s goals and defined the problem with considerations on how it may be solved and established a user flow. The visualization of the interfaces began with hand-sketched wireframes, a wireflow; then, a usability test plan was devised. 

Results:
An app that utilizes Bluetooth technology and a separate sensor that is embedded into the soil of a potted plant was created. Upon installation, the user is prompted to input the plant type, geographic location, and time availability, while the sensor collects data about soil nutrition, lighting, temperature, and water quality. The app then creates a watering schedule along with other recommendations utilizing Atlas data for how to best care for the plant given the user’s time constraints. 

Empathize

User Interviews

I interviewed a group of plant lovers and gathered their feedback
on how they care and manage their plants.

Affinity Mapping

The user responses revealed that there was a general lack of time and concern
over specific care required for each plant type.

DEFINE

User Persona

Takeaways drawn from the user personal provided footing for defining 
the problem and how it might be solved.

Problem Statement

Home gardeners and indoor plant-enthusiasts with busy schedules need a service/application that helps them remember when to water their plants, based on plant soil and environmental specifications, in a timely manner to prevent their plants from dying/

“How Might We” Statement

How might we create an app-controlled product that allows users to virtually monitor their plant vitals and know when their plant requires water?

User Flow

Knowing that the end-product would be robust with a number of user flows, I wanted to first establish that the user could connect the sensor to their application. This was the most important task.

ideate

Sketches 

Here, brain-stormed a series of product and screen solutions 
to the proposed problem.

Physical Sensor

Physical Sensor

Sensor List

Sensor List

Sensor Profile

Sensor Profile

Notification Settings

Notification Settings

Sensor Installation

Sensor Installation

Watering Schedule

Watering Calendar Schedule

Almanac Data

Almanac Data

Wireflow

Digital Wireframes

After hashing out concepts though hand sketches, I took my screens into the Sketch application and refined them into digital wireframes. 

Prototype

Usability Test Plan

Going into the usability study, a plan was devised to moderate users through a specific user flow.

Live Low-fidelity Prototype

The prototype was created using InVision Studio and demonstrates the 
clickstream for each usability study. 

Next steps

  • Refine user flow, wireframes, and prototype based on user feedback
  • Revisit the Discovery phase to revise user questions for additional user interviews
  • Revisit the Ideation phase to conduct additional Usability Studies

LATEST POSTS

DRUGGED DRIVING

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

NORTH CAROLINA STATE UNIVERSITY SEASON TICKETS

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

Impetus epicurei cu eum, et illud officiis splendide ius, has virtute volumus adolescens ea. 

#tag 

DRUGGED DRIVING

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla facilisi cras fermentum.

Diam sit amet nisl suscipit adipiscing bibendum. Consequat mauris nunc congue nisi vitae suscipit tellus. Pulvinar etiam non quam lacus suspendisse faucibus interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Aliquam nulla facilisi cras fermentum. Diam sit amet nisl suscipit adipiscing bibendum. Consequat mauris nunc congue nisi vitae suscipit tellus. Pulvinar etiam non quam lacus suspendisse faucibus interdum.

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla facilisi cras fermentum.

Diam sit amet nisl suscipit adipiscing bibendum. Consequat mauris nunc congue nisi vitae suscipit tellus. Pulvinar etiam non quam lacus suspendisse faucibus interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Aliquam nulla facilisi cras fermentum. Diam sit amet nisl suscipit adipiscing bibendum. Consequat mauris nunc congue nisi vitae suscipit tellus. Pulvinar etiam non quam lacus suspendisse faucibus interdum.

NORTH CAROLINA STATE UNIVERSITY SEASON TICKETS

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla facilisi cras fermentum.

Diam sit amet nisl suscipit adipiscing bibendum. Consequat mauris nunc congue nisi vitae suscipit tellus. Pulvinar etiam non quam lacus suspendisse faucibus interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Aliquam nulla facilisi cras fermentum. Diam sit amet nisl suscipit adipiscing bibendum. Consequat mauris nunc congue nisi vitae suscipit tellus. Pulvinar etiam non quam lacus suspendisse faucibus interdum.

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla facilisi cras fermentum.

Diam sit amet nisl suscipit adipiscing bibendum. Consequat mauris nunc congue nisi vitae suscipit tellus. Pulvinar etiam non quam lacus suspendisse faucibus interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Aliquam nulla facilisi cras fermentum. Diam sit amet nisl suscipit adipiscing bibendum. Consequat mauris nunc congue nisi vitae suscipit tellus. Pulvinar etiam non quam lacus suspendisse faucibus interdum.