https://www.allisonberels.com/work daily 1.0 2020-06-11 https://www.allisonberels.com/work/sf-navigation monthly 0.5 2020-06-11 https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edd3fa36b90352c846af258/1591558058407/desktop-nav.png Work - Navigation Redesign - Case Study https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edd3101ea5e395a8564f194/1591554311505/mobile-nav.png Work - Navigation Redesign - Case Study https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edd3fc9945be529c6bbe1dd/1591558101857/new-nav.png Work - Navigation Redesign - Case Study - Conclusion With this general direction established, I customized the component to fit our needs visually and functionally by: Using the sidebar for the primary and secondary pages, allowing for the restructuring of existing features in a more intuitive hierarchy. Moving the tertiary navigation to the top of the screen rather than the left side to optimize horizontal space. Utilized new marketing colors and typography to provide a refreshed look in a way that didn’t require styles to be updated anywhere else. Creating a design that allows for future features to be added without disrupting the design of the new navigation. https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edd39839ae1433b3ababa93/1591556492337/old-design.png Work - Navigation Redesign - Case Study - Constraints In order to execute this redesign with a minimal amount of development effort, the following were some things I had to take into consideration: Try to utilize a Bootstrap component (since the front-end was already using that library). Disrupt the existing page layout and styling as little as possible. Design a solution that can account for new features to easily be added. Maintain the existing primary, secondary and tertiary structure. https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edd3d6f95d12324a327d5b8/1591557496268/Screen%252BShot%252B2020-06-07%252Bat%252B3.05.57%252BPM.jpg Work - Navigation Redesign - Case Study - Approach After evaluating the available bootstrap components I decided to move forward with the Nav List component for the navigation. From here, I researched existing patterns on the web that had a similar structure of primary, secondary, tertiary pages, to try to provide an experience that was familiar to our users. https://www.allisonberels.com/work/bc-billing monthly 0.5 2020-06-11 https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5eda7d09d52aa53cd29fee3e/1591377174088/BillingPage.jpg Work - Billing Page Redesign - Case Study https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5eda727d320e812026c69df5/1591374497763/BllingPageScrolled.png Work - Billing Page Redesign - Case Study https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ed998695e6be5361ef32f1a/1591319741271/BillingPage.jpg Work - Billing Page Redesign - Case Study - Conclusion After we released the design to all of our customers we followed up with some user research. From the research some of the major things we learned and iterated on were: Users disliked all of the scrolling that came from the more relaxed vertical spacing - I added navigation for within the page to allow for jumping from one section to another. Users thought the header was too tall and pushed the Balance section below the fold - I reduced the height of the header and reorganized the page to have the Balance section at the top of the screen. https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ed992cc42f1990bb92c558c/1591317242728/feature+mapping.png Work - Billing Page Redesign - Case Study - Audit I started tackling this project first by mapping out everything that was on the page. This was a great opportunity for me to look at everything on a molecular level, ask questions about what each piece of information meant, what value it held, and sometimes flag items as something that potentially should change in the new design. https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ed997bd42f1990bb92d0447/1591318469866/redesignV1.jpg Work - Billing Page Redesign - Case Study - Approach After auditing the legacy page I was able to eliminate some unnecessary duplications of content, regroup pieces of data and tweak micro copy in a way that better matched our users mental models. Other than these changes, I tried to keep the overall flow of the page fairly similar to the old design in order to keep the experience as familiar as possible when we launch the new design. https://www.allisonberels.com/work/syndetic monthly 0.5 2020-06-11 https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edaabb03667e147002f55f3/1591890684707/dashboard-viewer.png Work - Data Dictionary Web App- Case Study https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edaad2535d90a64cf402227/1591890684704/dictionary-creator.png Work - Data Dictionary Web App- Case Study https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edbc15f2746a420fb867c0b/1591890684717/dictionaries.png Work - Data Dictionary Web App- Case Study - Conclusion After working with the founders of Syndetic on this project the company moved on to be accepted into Y Combinator’s accelerator program. https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edbbda089d95f3735ceca08/1591890684714/dictionary-model.jpg Work - Data Dictionary Web App- Case Study - Approach After the founders had some time to connect with the potential users we learned that our initial assumptions about their mental model of a data dictionary was a bit off and had to restructure the relationship between a dictionary and the data fields it contains, as well as the relationship between an annotation and a data field. https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edbb5f6181ec82b5198abe1/1591890684711/dictionaries+processed.png Work - Data Dictionary Web App- Case Study - Discovery Working with the founders of Syndetic I started wire framing their initial assumptions about how their potential customers wanted to view data in dictionaries, how they wanted to comprise the data fields in those dictionaries, and how they wanted to annotate that data. https://www.allisonberels.com/work/more monthly 0.5 2020-06-11 https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edf99ede29cd629baec2979/1591712252799/Screen+Shot+2020-06-09+at+10.08.36+AM.png Work - More Work Samples - On-Demand Photography Service - iOS Application https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edfb5c921c13615577121fe/1591719636784/Screen%2BShot%2B2020-06-09%2Bat%2B10.10.52%2BAM.jpg Work - More Work Samples - Municipal Bond Trading Platform - Web Application https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edfbc43b691987f617535aa/1591721043184/submissionModal.png Work - More Work Samples https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edfbc9f2459c55a200f8e2a/1591721130230/sorted.png Work - More Work Samples https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edfec68f988bd0198e945e4/1591733364343/Screen%2BShot%2B2020-06-09%2Bat%2B10.10.07%2BAM.jpg Work - More Work Samples - Stock Watchlist - React Native App for Android & iOS https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edfee2af8dccb77144e4910/1591733808625/Dashboard-+notifications.png Work - More Work Samples - Distributed Network POC - Web Application Built on Etherium https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edffe6169a1aa6c58a3d95e/1591737966223/Contract+View+Ammendment.png Work - More Work Samples https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5edfefc294ff6b75fcedb479/1591734224357/dn-poc.png Work - More Work Samples https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ee004249111a5799349fab3/1591739442336/Screen+Shot+2020-06-09+at+10.10.34+AM.png Work - More Work Samples - Database Encryption Product - Web Application https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ee0067e256e2c499f8e1732/1591740040048/Invoice+Pending+export+bank.png Work - More Work Samples - Distributed Network POC - Web Application on the R3 Network https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ee005f4d892ce13a5e4ccb8/1591739913639/Invoice+pending+review+submit+2.png Work - More Work Samples https://www.allisonberels.com/work/bc-briteapps monthly 0.5 2020-06-11 https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ee25531f9fd164229420c66/1591893169290/dashboard.png Work - Insurance Web App - Case Study https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ee25cbdfd6fa204b0032383/1591893188696/Make+payment+current.png Work - Insurance Web App - Case Study https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ee2a62fdb75eb4c39200222/1591911998670/claims.png Work - Insurance Web App - Case Study - Conclusion After testing, and refining my designs based on team and user feedback we landed on a design that: Had an updated minimal aesthetic that is easily customized with any of our carriers branding. Had secondary navigation so that we could break apart larger sections of information into smaller, easily digestible sub sections. Replaced index views by utilizing the secondary navigation, providing easier navigation and clearer path of how a user got to where they are. Was flexible enough to allow for new lines of business to be supported in the future. That had a restructured information architecture to allow for quicker access to the most commonly performed tasks. https://static1.squarespace.com/static/5ed943bfc22aba0d80c163e6/t/5ee2608d7f2406082d5723c2/1591894185490/navigation.png Work - Insurance Web App - Case Study - Approach The first problem I tackled when reevaluating the visual design of BriteApps was to provide a template that fit all of our customers’ branding, only requiring minimal assets that they already have. Then I set out to solve the existing design’s biggest flaw, its information hierarchy and navigation.